9

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

4

2 回答 2

17

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

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;
    }
});
于 2013-07-15T14:24:07.643 回答
9

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

您可以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 视图，您将获得&lt;title&gt;test&lt;/title&gt;. 当你切换回编辑器视图时，你会<title>test</title>再次得到。

那是一般的部分。

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

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

于 2013-04-22T11:33:47.747 回答