javascript - 无法从 tinymce 编辑器中调用 javascript 方法

Question

我正在尝试从 tinymce 编辑器中对编辑器中编写的一段文本的单击事件进行 javascript 方法调用，但它不起作用。我正在使用 Tinymce 版本 4。

下面提到的是代码片段。虽然我可以像在第二个 div 中那样成功调用内联警报方法，但我无法像在第一个 div 中那样调用我的自定义 javascript 方法。非常感谢您的建议。

<script type="text/javascript" src="tinymce/js/tinymce/tinymce.min.js"></script>
<script type="text/javascript">
function customMethod(){
  alert('custom method not being called !!');
}
tinymce.init({
  selector: "textarea",
  valid_elements: "*[*]"
});
</script>

<form method="post">
    <textarea name="content" style="width:100%">

        <div onclick="customMethod();">Call custom method.</div>
        <div onclick="alert('alert called');">Call Alert.</div>
    </textarea>
</form>

Answer 1

您有两个选择:首先，您将 onclick 作为有效属性添加到您的 div(请参阅 tinymce 配置参数 valid_elements)。这是一个示例配置

valid_elements: "@[id|class|title|style|onmouseover|onclick]," +
    "a[name|href|target|title|alt]," +
    "#div,blockquote,-ol,-ul,-li,br,img[src|height|width],-sub,-sup,-b,-i,-u," +
    "-span[data-mce-type],hr",

第二个选项是将此设置参数添加到您的 tinymce 配置中，以捕获编辑器中的每个 onclick 事件

setup : function(ed) {
    // Display an alert onclick
    ed.on('click', function(evt) {
        console.log('User clicked the editor. Element:', evt.target);
        if (evt.target.className == 'do_1') alert('do_1');
        if (evt.target.className == 'do_2') alert('do_2');
    });
},

您可能想看看这个 tinymce fiddle 以了解它的运行情况:http://fiddle.tinymce.com/QXdaab