我目前的工作,其中一個用戶編輯一些HTML的能力的頁面上刪除onSubmit事件掛鉤。爲了讓他以一種很好的方式做到這一點,我使用了TinyMCE,因爲它有一個非常漂亮的界面。問題是底層框架是ASP.NET MVC,它不允許輕鬆提交HTML。隨着用戶提交的HTML被傳遞到另一個後端,我寧願不只是聲明提交能夠包含HTML。相反,我想在提交之前在表單字段上運行escape
或類似內容。從TinyMCE的
這種方法適用還好沒有TinyMCE的,但與TinyMCE的它看起來像它有onSubmit
鉤。由於我沒有找到一種方法來鉤住TinyMCE的這個功能,或者阻止它發生,我有點卡住了。什麼工作,是提交之前刪除編輯器,但它是一種笨重,相當明顯。
那麼這將是要麼掛鉤到onSubmit
事件TinyMCE的或從TinyMCE的勾去掉正確的/最佳方式是什麼?
在下面的代碼提供了一個最小工作示例。看看我的意思,運行它並點擊「顯示值」。您會看到textarea
內容未轉義。如果你點擊「逍遙遊」,它將運行在textarea
escape
。你可以用「Show Value」來查看它。如果你繼續點擊「提交」,然後檢查值,你會發現它不再逃脫。
<!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>