我們用一個后端標簽像人或位置的話。我發送文本到后臺，它給我標記單詞。我必須在ckeditor前端創建標簽。

所以我的任務是創建可編輯的內聯元素，這意味著它們應該可以添加到文本可以添加的地方。 標簽必須是可編輯的。 如果標簽為空，它也應該是可見的(應該是一個自己的樹節點，而不是文本屬性)。 標簽應該有視覺突出，如背景顏色和邊界半徑。 如果標簽是空的，它的類型應該通過css '::添加到偽類和內容屬性之前。 如果你能切換它的可編輯部分就好了。因為我們也需要只讀標簽，所以到目前為止，它們是作為獨立的元素開發的。 到目前為止，我的方法是使用文本屬性應用:

writer.createText('my tag', {tag: tagType})

我基本上是在創建標簽，就像你創建粗體文本一樣。我應用了css樣式，如背景色和邊框半徑，使它看起來像一個標簽，但這種方法達到了極限。同樣，使用這種方法，你不能讓可編輯和不可編輯的標簽成為同一個ckeditor實體，因為你不能有不可編輯的文本，我猜。

然后我在視圖端發現了editableElement的。問題是你不能有空標簽，因為空文本什么都不是。您也不能修改& quot標簽& quot在索引0處，因為這樣你就在標簽之外了，見粗體行為。我的意思是，我可以以某種方式修復這一切，但我希望標簽是模型上自己的元素。所以我嘗試了這種方法:

// in editingDowncast conversion:
viewWriter.createEditableElement('div', {class: 'inline'})

// this is the whole code in the ui:
 
        this.editor.model.schema.register( 'test-tag', {
            allowChildren: '$text',
            allowWhere: '$text',
            allowAttributesOf: '$text',
            isObject: true        
        });
        // if it is isInline: true it behaves mostly like my approach with text attributes
        

        this.editor.conversion.for('editingDowncast').elementToElement({
            model: 'test-tag',
            view: (modelItem, conversionApi) => {

                let { writer: viewWriter } = conversionApi;
               

                const tagView = viewWriter.createEditableElement( 'div', {

                    class: 'inline'

                });

                return tagView;

            }
        })

基本上EdtiableElement只處理塊元素，所以我嘗試通過css將它們內聯，將它們的display屬性設置為inline-block。這里我又有一個問題，當元素為空時，你不能再通過光標訪問它。所以它會永遠空著。一般來說，它的行為似乎有點問題，因為我猜你不應該把它作為內聯使用。基本上我有很多類似的問題，就像上面的方法。

我將繼續在第一個解決方案中實現它，但是我想問問社區是否有任何其他方法，也許是一種不太復雜的方法來創建模型中實際節點的內聯可編輯元素。類似于span標簽，但是在模型側。 有什么想法嗎？

# # #就我對公開問題的看法而言，這還不太可能。我認為團隊會實現它，但它似乎在列表中很低。

您應該能夠通過一個連接到內嵌小部件的彈出表單來做到這一點。

所以你會 a)按照占位符示例創建內聯小部件。 https://cke editor . com/docs/cke editor 5/latest/framework/tutorials/implementing-an-inline-widget . html

b)在UI類的占位符中添加一個點擊觀察器

import ClickObserver from '@ckeditor/ckeditor5engine/src/view/observer/clickobserver';
const editor = this.editor;
const view = editor.editing.view;
const viewDocument = view.document;

view.addObserver( ClickObserver );
    
    editor.listenTo( viewDocument, 'click', ( evt, data ) => {
        const modelElement = editor.editing.mapper.toModelElement( data.target);
    
        if ( modelElement.name == 'placeholder' ) {
            console.log( 'Placeholder has been clicked.' );
          
        }
    } );

c)遵循使用自定義用戶界面獲取用戶輸入教程 https://cke editor . com/docs/cke editor 5/latest/framework/plugins/abbreviation-plugin/abbreviation-plugin-level-2 . html

d)根據您的需要編輯表單項目、按鈕。

e)而不是從工具欄按鈕啟動彈出表單。加上這個。_ showUI()；在上面的點擊功能中

if ( modelElement.name == 'placeholder' ) {
   console.log( 'Placeholder has been clicked.' );
   this._showUI();
}

f)然后，您應該能夠將占位符文本/屬性傳遞給表單，并以這種方式編輯它。

我自己也在研究這個。當我滿意的時候，我會發布一個完整的解決方案。

希望這有所幫助。