从 TinyMCE 中移除 onSubmit 事件挂钩答案

【问题标题】：Remove onSubmit event hook from TinyMCE从 TinyMCE 中移除 onSubmit 事件挂钩
【发布时间】：2017-03-16 06:41:59
【问题描述】：

我目前正在处理用户能够编辑某些 HTML 的页面。为了让他以一种好的方式来做这件事，我正在使用 TinyMCE，因为它有一个相当不错的界面。问题是底层框架是 ASP.NET MVC，它不允许轻松提交 HTML。由于用户提交的 HTML 被传递到另一个后端，我宁愿不只是声明提交能够包含 HTML。相反，我想在提交之前在表单字段上运行 escape 或类似的。

这种方法在没有 TinyMCE 的情况下也可以正常工作，但如果使用 TinyMCE，它看起来就像有一个 onSubmit 的钩子。由于我还没有找到一种方法来连接 TinyMCE 的该功能或防止它发生，所以我有点卡住了。有效的方法是在提交之前删除编辑器，但这有点笨拙且相当引人注目。

那么，什么是挂钩到 TinyMCE 的 onSubmit 事件或从 TinyMCE 移除挂钩的正确/最佳方法？

以下代码提供了一个最小的工作示例。要了解我的意思，请运行它并单击“显示值”。您将看到 textarea 内容未转义。如果您单击“Escape”，它将在textarea 上运行escape。您可以使用“显示值”进行检查。如果您继续点击“提交”，然后检查该值，您会发现它不再转义了。

<!DOCTYPE html>
<html>
<head>
    <script src='http://code.jquery.com/jquery-1.10.2.min.js'></script>
    <script src='http://cloud.tinymce.com/stable/tinymce.min.js'></script>
    <script>
    tinymce.init({
        selector: 'textarea',
        setup: function(editor){
            // Let the editor save every change to the textarea
            editor.on('change', function(){
                tinymce.triggerSave();
            });
        }
    });

    $(document).ready(function(){
        $("form").submit(function(e){
            // Do one final save
            tinymce.triggerSave();

            // Escape every textarea
            $("textarea").each(function(k,v){
                $(this).val(escape($(this).val()));
            });

            // Prevent submit for this example
            return false;
        });

        $("#showvalue").click(function(){alert($("textarea").val())})
    });
    </script>
</head>

<body>
    <form method="post" action="URL">
        <textarea><html>Here is some code<strong>With some HTMl</strong></html></textarea>
        <button>Submit</button>
        <button type="button" onclick="document.querySelectorAll('textarea')[0].value = escape(document.querySelectorAll('textarea')[0].value)">Escape</button>
        <button type="button" id="showvalue">Show Value</button>
    </form>
</body>
</html>

【问题讨论】：

标签： javascript jquery asp.net tinymce

【解决方案1】：

实际的解决方案似乎相当简单。正如您在 TinyMCE 的 init 中看到的那样，已经有一个动作绑定到 change 的事件。目前看来，绑定到 submit 事件并返回 false 似乎有效。

tinymce.init({
    selector: 'textarea',
    setup: function(editor){
        // Let the editor save every change to the textarea
        editor.on('change', function(){
            tinymce.triggerSave();
        });

        // Do nothing when submitting the form
        editor.on('submit', function(){
            return false;
        });
    }
});

【讨论】：