如何在编辑器中禁用 wysihtml5 HTML Clean Up？答案

【问题标题】：How to disabled wysihtml5 HTML Clean Up in Editor?如何在编辑器中禁用 wysihtml5 HTML Clean Up？
【发布时间】：2012-12-03 10:44:19
【问题描述】：

如何在编辑器模式下禁用 HTML 清理？我需要在代码中允许 css 格式和内联 html。这个想法是在粘贴代码并进入编辑器进行编辑时禁用解析器和 html 清理操作。谢谢。

【问题讨论】：

你有没有找到解决这个问题的方法？

标签： wysihtml5

【解决方案1】：

您可以在初始化 wysihtml5 编辑器时提供一个标识函数作为解析器属性。下面的脚本是一个咖啡脚本 sn-p 完全禁用清理。

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;
    }
});

【讨论】：

这在普通的旧 javascript 中看起来如何？
@MarcinHabuszewski 以上咖啡脚本compiles to this.
@Ilja 谢谢你的代码。如果您可以将其包含在 SO 的答案中，那就更好了。

【解决方案2】：

实际上，这就是解析器规则的用途。

您可以在实例化编辑器对象之前将自定义规则附加到包含的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>

现在，当您在编辑器模式下输入/粘贴&lt;title&gt;test&lt;/title&gt; 时，然后切换到 html 视图，您将获得&lt;title&gt;test&lt;/title&gt;。当您切换回编辑器视图时，您将再次获得&lt;title&gt;test&lt;/title&gt;。

这是一般的部分。

现在，在您的情况下，我不确定使用 121 个自定义解析器规则（要处理的 HTML 标记的数量）是否是最好的主意，或者花时间深入研究是否更好找到更高性能解决方案的源代码（告诉解析器实际上只是返回输入字符串并没有多大意义，对吧？）。 此外，您说您也希望允许 CSS。所以你的自定义解析器规则甚至会扩展。

无论如何，作为一个起点，请随意使用我的自定义解析器规则集：https://github.com/eyecatchup/wysihtml5/blob/master/parser_rules/allow-all-html5.js。

【讨论】：