Question

在我的ckeditor实例中，我想让我的用户插入一个水平规则但只插入一次。如果存在现有行，则应将其替换为新行（与Wordpress上的Read-More功能相同）。如果我只想留下最后一个HR标签，我可以让它工作，但是如果用户想在文档中将其HR标签插入比现有标签更高的位置，该怎么办？

我使用变量（比如savedContent）来存储实例化的默认内容（没有任何HR）。按照Set cursor to specific position in CKEditor中的步骤，我的想法是使用savedContent变量将CKEditor内容恢复为默认的无HR内容（使用范围或书签）在光标位置插入新的HR。

这是代码：

CKEDITOR.on('instanceReady', function() {
    $(".cke_button__horizontalrule").attr("title","End Preview here");
    var savedContent = CKEDITOR.instances['pro_story'].getData();

    $(".cke_button__horizontalrule").on("click",function(){
        var ranges = editor.getSelection().getRanges();
        CKEDITOR.instances['pro_story'].setData(savedContent);
        editor.getSelection().selectRanges( ranges );
        editor.insertHtml("<hr />");
    });
});

现在这个代码的问题在于，由于某种原因，它给了我以下错误：给定的范围不在文档中。

我该怎么办？

Answer 1

在插入新标记之前获取现有<hr />标记的数组。然后，在插入新标签后删除所有这些标签。

let hrArray;

CKEDITOR.instances['pro_story'].on('beforeCommandExec', function(evt) {
    if (evt.data.name == 'horizontalrule') {
        hrArray = evt.editor.document.getElementsByTag('hr').toArray();
    }
});

CKEDITOR.instances['pro_story'].on('afterCommandExec', function(evt) {
    if (evt.data.name == 'horizontalrule') {
        hrArray.forEach(el => el.remove());
    }
});

在CKEditor中只添加一次HTML元素

1 个答案: