Question

我有一个要求，我需要并排显示源代码编辑器和wysiwyg编辑器，如tinymce。这个想法是用户应该点击wysiwg编辑器中的任何元素，相应的元素应该在源代码编辑器中突出显示。

到目前为止，我已经能够通过使用onnodechange事件获得所选择的节点

setup: function(ed) {
            ed.on('NodeChange', function(e){
                console.log(e.element);
            });
        }

但是，当编辑器处于只读模式时，事件不会触发。你知道为什么会这样吗？或者你能建议我克服这个问题吗？

Answer 1

通过添加以下内部设置回调

，我找到了一种解决方法

//prevent user to edit content inside tinymce
    ed.on('PostRender', function(e){
        ed.getBody().setAttribute('contenteditable', false);
    });

    ed.on('KeyPress', function(e){
        e.preventDefault();
        e.stopPropagation();
    });

这并不完美，但至少，它可以解决问题;）

Answer 2

我遇到了类似的问题，但是我们需要拦截点击事件，而不是＆＃34; NodeChange＆＃34;。

我通过直接在tinymce iframe的body元素上添加事件处理程序并使用事件目标来解决。

bodyEl.addEventListener('click', function(e) {
  console.log('Hello ', e.target);
}, false)

如果您需要检测选择更改，可以使用＆＃39;选择＆＃39;事件

tinymce readonly模式事件没有解雇

2 个答案: