如何禁用wysihtml5 HTML在編輯器中清理？

Question

如何在編輯器模式下禁用HTML清理？我需要在代碼中允許內嵌HTML格式的&。這個想法是在粘貼代碼並輸入編輯器進行編輯時禁用解析器和html清理操作。謝謝。

Answer 1

實際上，這是解析器規則的用途。

在實例化編輯器對象或創建自己的規則對象並提供給編輯器的構造函數之前，您可以將自定義規則附加到包含的var wysihtml5ParserRules。

例如，允許除了允許分佈式簡單的例子規則標籤的H1和H3標籤，你需要設置如下：

<form> 
    <div id="toolbar" style="display: none;"> 
     <a data-wysihtml5-command="bold" title="CTRL+B">bold</a> | 
     <a data-wysihtml5-command="italic" title="CTRL+I">italic</a> 
     <a data-wysihtml5-action="change_view">switch to html view</a> 
    </div> 
    <textarea id="textarea" placeholder="Enter text ..."></textarea> 
    <br><input type="reset" value="Reset form!"> 
    </form> 

    <!-- The distributed parser rules --> 
    <script src="../parser_rules/simple.js"></script> 
    <script src="../dist/wysihtml5-0.4.0pre.min.js"></script> 
    <script> 
    // attach some custom rules 
    wysihtml5ParserRules.tags.h1 = {remove: 0}; 
    wysihtml5ParserRules.tags.h3 = {remove: 0}; 

    var editor = new wysihtml5.Editor("textarea", { 
     toolbar:  "toolbar", 
     parserRules: wysihtml5ParserRules, 
     useLineBreaks: false 
    }); 
    </script> 

現在，當你輸入/將<title>test</title>粘貼到編輯器中，而處於編輯模式，然後切換到html視圖，則會得到<title>test</title>。當您切換回編輯器視圖時，您將再次獲得<title>test</title>。

---

這是一般的部分。

現在，對於您的情況，我不確定使用121個自定義解析器規則（要處理的HTML標記的計數）是否是最好的想法，或者如果不花時間和挖到源代碼找到一個更高性能的解決方案（沒有任何意義告訴解析器實際上只是返回輸入字符串，對吧？）。 此外，你說你也想允許CSS。所以你的自定義解析器規則甚至可以擴展。

無論如何，作爲一個起點，請隨意使用我自定義的解析器規則集：https://github.com/eyecatchup/wysihtml5/blob/master/parser_rules/allow-all-html5.js。

Answer 2

在初始化wysihtml5編輯器時，您可以提供身份函數作爲解析器屬性。下面的腳本是一個完全禁用清理的coffeescript代碼片段。

enableWysiwyg: -> 
    @$el.find('textarea').wysihtml5 
     "style": false 
     "font-styles": false #Font styling, e.g. h1, h2, etc. Default true 
     "emphasis": true #Italics, bold, etc. Default true 
     "lists": false #(Un)ordered lists, e.g. Bullets, Numbers. Default true 
     "html": true #Button which allows you to edit the generated HTML. Default false 
     "link": false #Button to insert a link. Default true 
     "image": false #Button to insert an image. Default true, 
     "color": false #Button to change color of font 
     parser: (html) -> html 

---

JavaScript版本上面的代碼：

$('textarea').wysihtml5({ 
    "style": false, 
    "font-styles": false, 
    "emphasis": true, 
    "lists": false, 
    "html": true, 
    "link": false, 
    "image": false, 
    "color": false, 
    parser: function(html) { 
     return html; 
    } 
});