在CKEditor 4

Question

我一直在阅读有关如何在CKEditor中监听点击事件的内容，特别是：CKEditor's click event not firing由Reinmar回答，但我仍然无法使其正常工作。

我的场景是我有一个CKEditor实例。段落附有<p>标记，但我将部分文本包含在<span>标记内，内容如下：

<p>This is the first paragraph</p>
<p>This is <span>The second paragraph</span></p>

我想添加点击事件，因此每当用户点击范围标记中的文字时，它都会执行操作，我很高兴暂时只显示警告。

这是我一直在尝试的代码。我editable() element，editor和document属性/方法已经working through the documentation。

_instance.on('contentDom', function () {

    let editable = _instance.editable();
    let elements = new CKEDITOR.dom.element(editable.getElementsByTag('span'));
    console.log(elements);

    editable.attachListener(elements, 'click', function () {
        alert('test');
        console.log("click event");
    });
});

console.log(elements)的结果正确记录了以下内容：

并且从阅读文档开始，attachListener()方法要求第一个参数是CKEDITOR.dom.element的实例，所以我传递了正确的参数，但是当我没有提醒或记录任何内容时点击span标签。

我不确定如何继续寻求任何帮助。

修改

如果我将editable.attachListener(elements...)替换为editable.attachListener(editable...)，它会按预期工作，但每当我点击编辑器中的任何位置时都会有效，而不是专门的跨度标记，这对我来说并不是很有帮助。< / p>

Answer 1

默认情况下，当前版本的CKEditor span不在allowedContent配置中，因此在输出这些元素后可能会被剥离。我在这里有一个简单的例子，我在编辑器中输出被点击元素的元素名称：

var editor = CKEDITOR.replace("txtarea");
editor.on("instanceReady", function(evt) {
  evt.editor.editable().on('click', function (event) {
      // YOUR CODE GOES HERE
      console.log("element clicked: ", event.data.$.target);
  });
});

如果我切换到源并添加跨度，然后再次跳出源，它将被剥离！

请参阅此处的完整示例：http://run.plnkr.co/paYzYa25kt6wFM1J/