CKEditor 5为何替换软连字符­？如何阻止该替换行为？

方案1：开启不可见字符可视化 #

通过配置让编辑器显示软连字符（\u00AD）的可视化标记，编辑人员能直接看到软连字符的位置：

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        view: {
            showCharacters: true // 显示所有不可见字符，包括软连字符
        }
    } )
    .catch( error => {
        console.error( error );
    } );

开启后，软连字符会以特殊小标记显示在编辑区域，切换源码模式时虽仍为\u00AD，但编辑人员能在可视化模式下准确把控位置。

方案2：自定义软连字符的HTML处理规则 #

若需要保留可识别的HTML标签形式（而非Unicode字符），可通过扩展编辑器的Schema和Converter实现：

1. 注册自定义元素：定义<soft-hyphen>标签承载软连字符

// 扩展Schema，允许自定义元素
editor.model.schema.register( 'softHyphen', {
    allowWhere: '$text',
    isInline: true,
    isObject: false
} );

// 配置Data Converter，实现模型与HTML的双向转换
editor.conversion.for( 'dataDowncast' ).elementToElement( {
    model: 'softHyphen',
    view: '<soft-hyphen>&shy;</soft-hyphen>'
} );

editor.conversion.for( 'dataUpcast' ).elementToElement( {
    view: 'soft-hyphen',
    model: 'softHyphen'
} );

// 配置Editing Converter，在编辑区域显示可视化标记
editor.conversion.for( 'editingDowncast' ).elementToElement( {
    model: 'softHyphen',
    view: ( modelElement, viewWriter ) => {
        const span = viewWriter.createContainerElement( 'span', {
            class: 'ck-soft-hyphen'
        } );
        viewWriter.insert( viewWriter.createText( '\u00AD' ), span );
        return span;
    }
} );

2. 添加自定义样式：给可视化标记加样式方便识别

.ck-soft-hyphen {
    background-color: #ffeb3b;
    padding: 0 2px;
    border-radius: 2px;
}

编辑人员在源码模式下可手动添加<soft-hyphen>&shy;</soft-hyphen>，切换到可视化模式也能看到标记位置，且不会被编辑器自动转换。

方案3：使用专用插件辅助插入 #

集成SpecialCharacters插件，让编辑人员无需手动写源码就能插入软连字符：

import SpecialCharacters from '@ckeditor/ckeditor5-special-characters/src/specialcharacters';
import SpecialCharactersEssentials from '@ckeditor/ckeditor5-special-characters/src/specialcharactersessentials';

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        plugins: [ SpecialCharacters, SpecialCharactersEssentials ],
        toolbar: [ 'specialCharacters' ]
    } )
    .catch( error => {
        console.error( error );
    } );

开启后，编辑人员可通过工具栏的“特殊字符”按钮找到软连字符直接插入，配合方案1的可视化配置，就能精准控制断句位置。

内容的提问来源于stack exchange，提问作者Nicolai Schwarz