Javascript 在CKEditor中只添加一次HTML元素

在我的ckeditor实例中，我想让我的用户插入一条水平规则，但只插入一次。如果有一个现有的行，它应该被替换为一个新的，与Wordpress上的阅读更多功能相同。如果我只想保留最后一个HR标记，我可以让它工作，但是如果用户希望在文档中插入比现有标记更高的HR标记，该怎么办

我使用了一个变量savedContent来存储默认内容，在实例化时没有任何HR。按照中的步骤，我的想法是在使用范围或书签在光标位置插入新的HR之前，使用savedContent变量将CKEditor内容还原为默认的HR-less内容

代码如下：

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

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

我该怎么办？

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

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

---

极好的解决方案！非常感谢。使用此方法而不是我自己的解决方法，这涉及在光标位置插入自定义字符串，使用字符串替换删除所有其他HR标记，然后将自定义字符串转换为HR标记。它不仅会弄乱插入点两侧的P标记，还会将光标位置重置到文档顶部。这个解决方案非常干净，不会和其他P标签混淆。