Question

我正在尝试从编辑器内部写入的文本上的click事件中的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');
    });
},

你可能想看看这个小小的小提琴，看看它的实际效果：http://fiddle.tinymce.com/QXdaab

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

1 个答案: