Question

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

Answer 1

初始化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;
    }
});

Answer 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>

现在，当您在编辑器中输入/粘贴<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。

如何在编辑器中禁用wysihtml5 HTML清理？

2 个答案: