How to disabled wysihtml5 HTML Clean Up in Editor?

Question

How to disable HTML Clean Up while in the editor mode? I'm in a need of allowing css format & inline html in code. The idea is to disable parser and html clean up action when pasting the code and entering the Editor for editing. Thanks.

Answer 1

You can provide an identity function as the parser attribute upon initializing the wysihtml5 editor. The below script is a coffeescript snippet that disables the cleanup completely.

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 version of the above code:

$('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

Actually, this is what the parser rules are for.

You can attach your custom rules to the included var wysihtml5ParserRules before instantiate the editor object or just create your own rules object and give to the editor's constructor.

For example, to allow the h1 and h3 tag in addition to the tags allowed in the distributed simple example rules, you'd need to set up as follows:

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

Now, when you enter/paste <title>test</title> into the editor, while you're in the editor mode, and then switch to html view, you'll get <title>test</title>. And when you switch back to editor view, you'll get <title>test</title> again.

---

That was the general part.

Now, in your case, I'm not sure if it's the best idea to work with 121 custom parser rules (the count of HTML tags to handle) or if it wouldn't be better to take the time and dig into the source code to find a more performant solution (doesn't make much sense to tell a parser to actualy just return the input string anyway, right?). Furthermore, you said you want to allow CSS as well. So your custom parser rules will even extend.

Anyway, as a starting point, feel free to use my custom parser rule set from here: https://github.com/eyecatchup/wysihtml5/blob/master/parser_rules/allow-all-html5.js.