Wie deaktiviert wysihtml5 HTML-Bereinigung im Editor?

Question

Wie kann ich HTML Clean Up im Editor-Modus deaktivieren? Ich bin in der Notwendigkeit, CSS-Format & Inline-HTML-Code zu ermöglichen. Die Idee besteht darin, die Parser- und HTML-Bereinigungsaktion zu deaktivieren, wenn der Code eingefügt und der Editor zur Bearbeitung eingegeben wird. Vielen Dank.

Answer 1

Eigentlich sind dies die Parser-Regeln.

Sie können Ihre benutzerdefinierten Regeln an das mitgelieferte var wysihtml5ParserRules anhängen, bevor Sie das Editor-Objekt instanziieren oder einfach ein eigenes Regelobjekt erstellen und dem Konstruktor des Editors übergeben.

Um zum Beispiel des h1 und h3-Tag zusätzlich zu den Tags in den verteilten einfachen Beispiel Regeln erlaubt zu ermöglichen, sollten Sie bis festlegen müssen, wie folgt:

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

Wenn Sie nun eingeben/Einfügen von <title>test</title> in den Editor, während Sie im Editor-Modus sind, und wechseln Sie dann zur HTML-Ansicht, erhalten Sie <title>test</title>. Und wenn Sie zurück zur Editor-Ansicht wechseln, erhalten Sie wieder <title>test</title>.

---

Das war der allgemeine Teil.

Nun, ich bin mir nicht sicher, ob es die beste Idee ist, mit 121 benutzerdefinierten Parser-Regeln zu arbeiten (die Anzahl der HTML-Tags zu handhaben) oder wenn es nicht besser wäre, die Zeit und dig zu nehmen in den Quellcode, um eine performantere Lösung zu finden (macht es nicht viel Sinn, einem Parser zu sagen, dass er tatsächlich die Eingabezeichenfolge trotzdem zurückgibt, oder?). Außerdem haben Sie gesagt, dass Sie CSS ebenfalls zulassen möchten. So werden Ihre benutzerdefinierten Parser-Regeln sogar erweitert.

Wie auch immer, als Ausgangspunkt können Sie meinen benutzerdefinierten Parser-Regelsatz von hier aus verwenden: https://github.com/eyecatchup/wysihtml5/blob/master/parser_rules/allow-all-html5.js.

Answer 2

Sie können bei der Initialisierung des wysihtml5-Editors eine Identitätsfunktion als Parserattribut angeben. Das folgende Skript ist ein Coffeescript-Snippet, das die Bereinigung vollständig deaktiviert.

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 des obigen Codes:

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