如何让CKEditor 4 Widget在指定位置插入文本/HTML？

需求说明 #

我希望自己的CKEditor Widget能够在指定位置放置文本/HTML，想了解如何实现以下位置的文本插入：

• 内容最底部
• 内容最顶部
• 段落1与段落2之间

基础Widget代码 #

以下是基础的可运行Widget代码：

CKEDITOR.plugins.add( 'simplebox', {
    requires: 'widget',

    icons: 'simplebox',

    init: function( editor ) {
        editor.widgets.add( 'simplebox', {

            button: 'Create a simple box',

            template:
                '<div class="simplebox">' +
                    '<h2 class="simplebox-title">Title</h2>' +
                    '<div class="simplebox-content"><p>段落1</p><p>段落2</p></div>' +
                '</div>',

            editables: {
                title: {
                    selector: '.simplebox-title',
                    allowedContent: 'br strong em'
                },
                content: {
                    selector: '.simplebox-content',
                    allowedContent: 'p br ul ol li strong em'
                }
            },

            allowedContent:
                'div(!simplebox); div(!simplebox-content); h2(!simplebox-title)',

            requiredContent: 'div(simplebox)',

            upcast: function( element ) {
                return element.name == 'div' && element.hasClass( 'simplebox' );
            }
        } );
    }
} );

各位置插入实现方法 #

1. 在内容最顶部插入文本/HTML

要在simplebox-content的最顶部插入内容，可通过获取该区域的DOM元素，将新元素插入到第一个子元素之前。可以在Widget的初始化逻辑中添加，或者自定义编辑器命令触发插入：

// 自定义插入到顶部的命令
editor.addCommand( 'insertToTop', {
    exec: function( editor ) {
        var widget = editor.widgets.selected[0];
        if ( widget.name === 'simplebox' ) {
            var contentEl = widget.editables.content.getElement();
            var newElement = CKEDITOR.dom.element.createFromHtml( '<p>顶部插入的内容</p>' );
            // 插入到第一个子元素前，无内容则直接追加
            var firstChild = contentEl.getFirst();
            firstChild ? newElement.insertBefore( firstChild ) : contentEl.append( newElement );
        }
    }
} );

// 给命令绑定工具栏按钮
editor.ui.addButton( 'InsertToTop', {
    label: '插入到内容顶部',
    command: 'insertToTop',
    toolbar: 'insert'
} );

2. 在内容最底部插入文本/HTML

直接向simplebox-content元素追加新内容即可，通过自定义命令实现：

// 自定义插入到底部的命令
editor.addCommand( 'insertToBottom', {
    exec: function( editor ) {
        var widget = editor.widgets.selected[0];
        if ( widget.name === 'simplebox' ) {
            var contentEl = widget.editables.content.getElement();
            var newElement = CKEDITOR.dom.element.createFromHtml( '<p>底部插入的内容</p>' );
            contentEl.append( newElement );
        }
    }
} );

// 绑定工具栏按钮
editor.ui.addButton( 'InsertToBottom', {
    label: '插入到内容底部',
    command: 'insertToBottom',
    toolbar: 'insert'
} );

3. 在段落1与段落2之间插入文本/HTML

先定位到simplebox-content下的第二个段落元素，再将新元素插入到它之前：

// 自定义插入到段落间的命令
editor.addCommand( 'insertBetweenParagraphs', {
    exec: function( editor ) {
        var widget = editor.widgets.selected[0];
        if ( widget.name === 'simplebox' ) {
            var contentEl = widget.editables.content.getElement();
            // 获取所有段落元素
            var paragraphs = contentEl.find( 'p' ).toArray();
            if ( paragraphs.length >= 2 ) {
                var newElement = CKEDITOR.dom.element.createFromHtml( '<p>段落1和2之间的内容</p>' );
                newElement.insertBefore( paragraphs[1] );
            }
        }
    }
} );

// 绑定工具栏按钮
editor.ui.addButton( 'InsertBetweenParagraphs', {
    label: '插入到段落1和2之间',
    command: 'insertBetweenParagraphs',
    toolbar: 'insert'
} );

关键注意点 #

• 操作前要确保目标Widget处于选中状态，通过editor.widgets.selected[0]获取当前选中的Widget实例
• 必须使用CKEditor提供的DOM API操作元素，保证编辑器状态同步，避免直接用原生DOM方法
• 插入的HTML结构要符合WidgetallowedContent中定义的规则，否则会被过滤

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