在 Ckeditor 实例中通过 htmlbutton 插件插入文本之前重新定位插入符号

Question

我使用 CKeditor 的 htmlbuttons 插件的目标是在文本框内容的最开头插入 html 代码，尽管有插入符号的位置。我改编了下面显示的脚本（在此处找到），但它不起作用，所以我需要知道可能出了什么问题。

CKEDITOR.plugins.add( 'htmlbuttons',
{ init : function( editor )

{ for (name in CKEDITOR.instances) {
  var instance = CKEDITOR.instances[name]; }

上面我得到了 id（与名称相同）- 已验证

function setSelectionRange(input, selectionStart, selectionEnd) {
if (input.setSelectionRange) {
input.focus();
input.setSelectionRange(selectionStart, selectionEnd);
}
else if (input.createTextRange) {
var range = input.createTextRange();
range.collapse(true);
range.moveEnd('character', selectionEnd);
range.moveStart('character', selectionStart);
range.select();
}
}

function setCaretToPos (input, pos) {
setSelectionRange(input, pos, pos);
}

以上是我在这里找到的用于重新定位插入符（光标）的脚本。

var buttonsConfig = editor.config.htmlbuttons;
    if (!buttonsConfig)
        return;

    function createCommand( definition )
    {
        return {
            exec: function( editor ) {
                
                instanceId = (instance.name);
                    
setCaretToPos(document.getElementById(instanceId),0);

上面的行应该将插入符号定位在 ckeditor 文本框的开头，但它不起作用。

editor.insertHtml( definition.html );
            }
        };
    }

    // Create the command for each button
    for(var i=0; i<buttonsConfig.length; i++)
    {
        var button = buttonsConfig[ i ];
        var commandName = button.name;
        editor.addCommand( commandName, createCommand(button, editor) );

        editor.ui.addButton( commandName,
        {
            label : button.title,
            command : commandName,
            icon : this.path + button.icon
        });
    }
} //Init

} );

Answer 1

我找到了答案 - 将 "SetCaretToPos..." 行替换为以下代码：

editor.focus();
var selection = editor.getSelection();
var range = selection.getRanges()[0];
var pCon = range.startContainer.getAscendant('p',true);
var newRange = new CKEDITOR.dom.range(range.document);
newRange.moveToPosition(pCon, CKEDITOR.POSITION_BEFORE_START);
newRange.select();

就是这样。它在最开始插入代码 - 忽略光标位置。

Answer 2

这是一个更好的解决方案：

将 "SetCaretToPos..." 行替换为以下代码：

(function( cursorManager ) {                
var range = editor.createRange();
range.moveToPosition( range.root, CKEDITOR.POSITION_BEFORE_END );
//OR range.moveToPosition( range.root, CKEDITOR.POSITION_AFTER_START );
editor.getSelection().selectRanges( [ range ] );
}( window.cursorManager = window.cursorManager || {}));

在 Ckeditor 实例中通过 htmlbutton 插件插入文本之前重新定位插入符号

Repositioning the caret before inserting text via htmlbutton addon in Ckeditor instance

javascript

cursor

ckeditor