2017-03-16 43 views
0

我目前的工作,其中一個用戶編輯一些HTML的能力的頁面上刪除onSubmit事件掛鉤。爲了讓他以一種很好的方式做到這一點,我使用了TinyMCE,因爲它有一個非常漂亮的界面。問題是底層框架是ASP.NET MVC,它不允許輕鬆提交HTML。隨着用戶提交的HTML被傳遞到另一個後端,我寧願不只是聲明提交能夠包含HTML。相反,我想在提交之前在表單字段上運行escape或類似內容。從TinyMCE的

這種方法適用還好沒有TinyMCE的,但與TinyMCE的它看起來像它有onSubmit鉤。由於我沒有找到一種方法來鉤住TinyMCE的這個功能,或者阻止它發生,我有點卡住了。什麼工作,是提交之前刪除編輯器,但它是一種笨重,相當明顯。

那麼這將是要麼掛鉤到onSubmit事件TinyMCE的或從TinyMCE的勾去掉正確的/最佳方式是什麼?

在下面的代碼提供了一個最小工作示例。看看我的意思,運行它並點擊「顯示值」。您會看到textarea內容未轉義。如果你點擊「逍遙遊」,它將運行在textareaescape。你可以用「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> 

回答

0

實際的解決方案似乎相當簡單。正如您在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; 
     }); 
    } 
});