javascript - 带标签的 CKEditor 自定义插件环绕选择

Question

这看起来很简单，我想添加一个 <strike>在选择之前添加 /by User</strike>选择后..

这是我到目前为止得到的:

CKEDITOR.plugins.add('test',
{
    init: function (editor) {
        editor.addCommand('inserttest',
            {
                exec: function (editor) {
                    var selection = editor.getSelection();
                    if (!selection) {
                        return;
                    }
                    var text = selection.getSelectedText();

                    editor.insertHtml('<strike>' + text + ' /By User </strike>');
                }
            });

        editor.ui.addButton('test',
            {
                label: 'Insert test',
                command: 'inserttest',
                icon: this.path + 'images/test.png'
            });
    }
});

这有点管用，但它有一些怪癖，它会删除所有 html，而且它不会验证我们是否已经处于罢工中..

那么在不丢失 html 的情况下我该怎么做呢？并验证我已经不在罢工标签内了吗？

我曾尝试分析插件的源代码，但发现至少可以说是令人困惑...

请注意，我使用的 asp.net 控件似乎使用的是 CKEditor 的 3.6.4 版本。

Answer 1

我不知道您是否已经找到答案并且问题是实际的，但希望这个答案对将来偶然发现此错误的人有所帮助。

而不是使用 editor.insertHtml 为您的罢工代码创建一个元素，并只将该元素添加到编辑器。

selection.getSelectedText().setData(''); // cleans the selection
var strikeElement= editor.document.createElement('strike');
strikeElement.setText(text + ' /By User');
editor.insertElement(strikeElement);