如何删除退格时插入的<span>？</span>

Question

使用案例：我为CKEditor构建了一个自定义的Acronym插件。因此，用户可以通过对话框弹出窗口插入首字母缩略词，也可以选择文本并将其转换为首字母缩略词。在任何一种情况下，我都会为一些自定义样式和操作添加<span>。

像这样<span class="acronym">test</span>

问题：在插入首字母缩略词后的编辑器中。如果我使用退格键删除，请说我删除了结束</span>并再次开始输入。所有东西都被添加到首字母缩略词范围内。

像这样<span class="acronym">test typing something

我正在根据CKEditor创建范围，因此即使我删除它也会添加结束</span>。所以光标留在跨度内。

有没有办法检测并删除整个首字母缩写词。是否删除了打开或关闭范围？

Answer 1

查看Placeholder plugin。它基于widget system，您可以轻松地build your own widget代表首字母缩略词。

Answer 2

我使用的逻辑：按退格键，获取光标下选中的当前元素并检查其首字母缩写元素。如果是，请删除。

 $('html').keyup(function (e) {
    if (e.keyCode == 8) {
       var editor = CKEDITOR.instances.editable,
       sel = editor.getSelection();
       var ele = sel.getStartElement();
       if(ele.getAttribute( 'class' ) == 'acronym'){
          ele.remove();
       }
    }
 });

我无法使用CKEditor的占位符插件，如下面的评论中所述。

探索其他选择。在此之前，接受这个作为正确答案。