Question

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

这种方法在没有TinyMCE的情况下工作正常但是使用TinyMCE看起来它有onSubmit的钩子。由于我还没有找到一种方法来为TinyMCE挂钩或防止它发生，我有点卡住了。什么工作，是在提交之前删除编辑器，但它有点笨重而且相当明显。

那么为TinyMCE挂钩onSubmit事件或从TinyMCE中删除钩子的正确/最佳方法是什么？

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

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

实际解决方案似乎相当容易。正如您在init for TinyMCE中所看到的，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;
        });
    }
});

从TinyMCE中删除onSubmit事件挂钩

1 个答案: