如何在TinyMCE中从不可编辑元素执行JavaScript函数？

Question

我的 TinyMCE 文本编辑器中有不可编辑的按钮。我想插入一个 JavaScript 函数，以便当单击这些按钮时，文本“Hello world”会记录到控制台。这是相关的 HTML 和 JavaScript 设置

<textarea id="tinymce">
    <div class="myclass">
        <button onclick="myFunction()">button outside</button>
    </div>
    <div class="myclass non-editable">
        <button onclick="myFunction()">button Inside</button>
        <button onclick="myFunction()">button Inside</button>
    </div>
</textarea>

tinymce.init({
    selector: 'textarea#tinymce',
    height: 500,
    content_style: `
        body { font-family:Helvetica,Arial,sans-serif; font-size:16px }
        .myclass { border: 0.1rem solid green; border-radius: 0.8rem; padding: 0.2rem; }
        .non-editable { border-color: red; }
    `,
    noneditable_class: 'non-editable'
});

function myFunction() {
    console.log("Hello world");
}

我尝试将 myFunction 脚本直接插入 TinyMCE 内容片段中，但编辑器内的按钮仍然无法触发该函数。 TinyMCE 支持这种类型的功能吗？

Answer 1

出于安全原因，TinyMCE 永远不会允许 JavaScript 从编辑器本身运行。

如果您想要编辑器主体中某些元素的单击行为，您可能需要查看 TinyMCE 的事件处理：

https://www.tiny.cloud/docs/tinymce/latest/events/#handling-editor-events

使用这种方法，例如，如果最终用户单击按钮，您可以对每次单击进行检查以查看他们是否单击了按钮，如果是，则运行某些功能等。