CKEditor 4.8.0占位符插件只读内容可双击编辑及退格删除问题咨询

针对你遇到的placeholder双击可编辑、退格键能删除的问题，我给你提供两个针对性的解决方案：

问题[a]：双击placeholder弹出编辑窗口 #

默认情况下，CKEditor的placeholder插件自带了双击触发编辑的逻辑。要禁用这个功能，你可以通过监听编辑器的doubleclick事件，阻止默认行为：

CKEDITOR.replace('your-editor-id', {
  // 保留你原有的其他配置项
  on: {
    doubleclick: function(evt) {
      const targetElement = evt.data.element;
      // 判断当前点击的是否是placeholder元素（默认带cke_placeholder类）
      if (targetElement.hasClass('cke_placeholder')) {
        evt.cancel(); // 阻止默认的双击编辑弹窗
      }
    }
  }
});

如果修改配置不起作用，你也可以直接修改plugins/placeholder/plugin.js源码：找到绑定双击事件的代码段（通常是editor.on('doubleclick', ...)这部分），把它注释掉或者删除即可。

问题[b]：退格键可删除placeholder内容 #

要阻止退格/删除键对placeholder的操作，需要监听编辑器的键盘事件，拦截对应的按键动作：

CKEDITOR.replace('your-editor-id', {
  // 保留你原有的其他配置项
  on: {
    key: function(evt) {
      const keyCode = evt.data.keyCode;
      // 拦截退格键(8)和删除键(46)
      if (keyCode === 8 || keyCode === 46) {
        const selection = this.getSelection();
        const selectedElement = selection.getSelectedElement();
        
        // 情况1：直接选中了整个placeholder元素
        if (selectedElement && selectedElement.hasClass('cke_placeholder')) {
          evt.cancel();
          return;
        }
        
        // 情况2：光标在placeholder元素内部或紧邻其前方/后方
        const range = selection.getRanges()[0];
        const parent = range.startContainer.getParent();
        if (parent && parent.hasClass('cke_placeholder')) {
          evt.cancel();
        }
      }
    }
  }
});

这段代码会同时拦截两种删除场景：直接选中placeholder元素按删除键，以及光标在placeholder内部按退格键的情况。

内容的提问来源于stack exchange，提问作者dcparham