从TinyMCE移除onSubmit事件挂钩 [英] Remove onSubmit event hook from TinyMCE
问题描述
我目前正在一个用户可以编辑某些HTML的页面上工作.为了使他能够以一种不错的方式进行操作，我使用了TinyMCE，因为它具有相当不错的界面.问题在于底层框架是ASP.NET MVC，它不允许轻松提交HTML.当用户提交的HTML传递到另一个后端时，我宁愿不只是声明提交能够包含HTML.相反，我只想在提交之前在表单字段上运行escape或类似内容即可.
I'm currently working on a page where a user has the ability to edit some HTML. To enable him to do it in a nice way, I'm using TinyMCE, as it has a rather nice interface. The problem is that the underlying framework is ASP.NET MVC which doesn't allow for easy submission of HTML. As the HTML the user submits is passed on to another backend, I'd rather not just declare submission to be able to contain HTML. Instead I'd like to just run escape or similar on the form fields before submission.
这种方法在没有TinyMCE的情况下也可以，但是对于TinyMCE来说，它似乎具有onSubmit的钩子.由于我还没有找到一种方法可以挂接到TinyMCE的该函数中或阻止它的发生，所以我有些卡住了.起作用的是在提交之前删除编辑器，但这有点笨拙而且相当引人注目.
This approach works okay without TinyMCE but with TinyMCE it looks like it has a hook for onSubmit. As I haven't found a way to either hook into that function for TinyMCE or prevent it from happening I'm somewhat stuck. What does work, is to remove the editor before submission but it's kind of clunky and rather noticeable.
那么钩住TinyMCE的onSubmit事件或从TinyMCE中删除钩子的正确/最佳方法是什么?
So what would be the correct/best way to either hook into the onSubmit event for TinyMCE or remove the hook from TinyMCE?
以下代码提供了一个最小的工作示例.要了解我的意思，请运行它，然后单击显示值".您将看到textarea内容未转义.如果单击转义"，它将在textarea上运行escape.您可以使用显示值"进行检查.如果继续单击提交"，然后再检查该值，您将发现它不再被转义.
The below code provides a minimal working example. To see what I mean, run it and click "Show Value". You will see that the textarea contents is unescaped. If you click "Escape" it will run escape on the textarea. You can check it with "Show Value". If you proceed to click "Submit" and check the value afterwards, you will find that it's not escaped anymore.
<!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>
推荐答案
实际的解决方案似乎很简单.如您在TinyMCE的init中看到的，已经有一个绑定到动作的change事件.到目前为止，绑定到submit事件并返回false似乎是可行的.
The actual solution seems to be rather easy. As you can see in the init for TinyMCE there is already an event for change that an action is bound to. For now it seems to work to bind to the submit event and just 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事件挂钩的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
