javascript - 选择小部件可编辑

Question

我有一个带有代码的小部件:

CKEDITOR.plugins.add( 'mywidget', {
    requires: 'widget',
    icons: 'mywidget',
    init: function( editor ) {
        editor.widgets.add( 'mywidget', {
            /* Basic Widget definition */
            button: "My Widget",
            template:"<div><div>Header</div><div class='mywidget_contents'></div></div>",
            editables: {
                content: {
                    selector: '.mywidget_contents'
                }
            },
            /* Initiate */
            init: function(){

                /* Move whatever was highlighted into the widget */
                var selectedHtml = editor.getSelectedHtml( true );
                if ( selectedHtml ) {
                    if ( selectedHtml.substr( 0, 1 ) === '<p>' ) {
                        this.editables.content.setHtml( selectedHtml );
                    } else {
                        this.editables.content.setHtml( '<p>' + selectedHtml + '</p>' );
                    }
                }

                /* Move the selection into it */
                // What to do here??
            }
        } );
    }
} );

如您所见，当用户单击小部件的按钮时，我会将选定的任何内容移动到小部件的可编辑区域。

之后，我想将光标移动到该可编辑区域的末尾。因此，如果我突出显示“文本”然后单击按钮，“文本”将出现在小部件中，光标位于它的末尾。我用 this.editables.content 尝试了一些不同的东西变量如: this.editables.content.focus();但它似乎没有做任何事情。我的部分困惑还在于我不确定是什么类(class) this.editables.content是的对象，好像不是CKEDITOR.plugins.widget.nestedEditable因为文档说应该有一个 element属性(从那里我可能会弄清楚)但是当我调用它时它返回 undefined .

我也试过这个:

var sel = editor.getSelection();
if ( sel ) {
    sel.selectElement( this.editables.content );
}

但这只会产生一个错误:

TypeError: undefined is not an object (evaluating 'range.checkReadOnly')

---

顺便说一句，我假设移动所选文本的方式不是最好的方法，但如果所选内容只是文本(其中如果它需要进入 <p> ) 或者如果它已经是一个段落。如果有人可以推荐更好的方法，我们将不胜感激。

Answer 1

一旦创建，小部件就会触发 ready然后 focus .等到 focus 并从代码 (JSFiddle) 中设置选择:

CKEDITOR.plugins.add( 'mywidget', {
    requires: 'widget',
    icons: 'mywidget',
    init: function( editor ) {
        editor.widgets.add( 'mywidget', {
            button: "My Widget",
            template:"<div><div>Header</div><div class='mywidget_contents'></div></div>",
            editables: {
                content: {
                    selector: '.mywidget_contents'
                }
            },

            init: function(){
                var selectedHtml = editor.getSelectedHtml( true );
                this.editables.content.setHtml( selectedHtml );

                this.once( 'focus', function() {
                    var range = editor.createRange();
                    range.moveToPosition( this.editables.content, CKEDITOR.POSITION_BEFORE_END );
                    range.select();
                }, this );
            }
        } );
    }
} );