从 TinyMCE 移除 onSubmit 事件钩子

Question

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

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

那么 correct/best 挂钩到 TinyMCE 的 onSubmit 事件或从 TinyMCE 移除挂钩的方法是什么？

下面的代码提供了一个最小的工作示例。要明白我的意思，运行它并单击 "Show Value"。您将看到 textarea 内容未转义。如果您单击 "Escape"，它将在 textarea 上运行 escape。你可以用 "Show Value" 来检查它。如果你继续点击"Submit"，然后查看这个值，你会发现它不再被转义了。

<!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>

Answer 1

实际的解决方案似乎相当简单。正如您在 TinyMCE 的初始化中看到的那样，已经有一个 change 的事件绑定到一个动作。现在似乎可以绑定到 submit 事件并且只是 return 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;
        });
    }
});

从 TinyMCE 移除 onSubmit 事件钩子

Remove onSubmit event hook from TinyMCE

javascript

asp.net

jquery

tinymce