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??
            }
        } );
    }
} );

如您所见，当用户点击窗口小部件的按钮时，我将所选内容移动到窗口小部件的可编辑区域。

之后，我想将光标移动到该可编辑区域的末尾。所以，如果我突出显示＆＃34; Text＆＃34;然后单击按钮，＆＃34; Text＆＃34;出现在窗口小部件中，光标位于窗口小部件的末尾。我已使用this.editables.content变量尝试了一些不同的内容，例如： this.editables.content.focus（）; 但它似乎没有做任何事情。我的一部分困惑也是我不确定哪个类this.editables.content是一个对象，它似乎不是CKEDITOR.plugins.widget.nestedEditable因为文档说应该有一个{{1}属性（从那里我可能想出来）但是当我调用它时它会返回element。

我也试过这个：

undefined

但这只会产生错误：

TypeError：undefined不是对象（评估＆＃39; range.checkReadOnly＆＃39）

顺便说一句，我假设我如何移动所选文本并不是最好的方法，但如果选择的内容我无法弄清楚如何让它变得更好只是文本（在这种情况下，它需要进入var sel = editor.getSelection(); if ( sel ) { sel.selectElement( this.editables.content ); }）或者它已经是一个段落。如果有人能推荐一种更好的方式，那将是值得赞赏的。

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 );
            }
        } );
    }
} );

选择小部件可编辑

1 个答案: