Jak wylogować wysihtml5 HTML w edytorze?

Question

Jak wyłączyć czyszczenie HTML w trybie edytora? Potrzebuję umożliwienia wstawienia kodu CSS w formacie css & w kodzie. Chodzi o to, aby wyłączyć funkcję czyszczenia parsera i html podczas wklejania kodu i wprowadzania edytora do edycji. Dzięki.

Answer 1

W rzeczywistości właśnie do tego służą reguły parsera.

Możesz dołączyć własne reguły do ​​dołączonego var wysihtml5ParserRules przed utworzeniem obiektu edytora lub po prostu utworzyć własny obiekt reguł i przekazać konstruktorowi edytora.

Na przykład, aby umożliwić H1 i H3 tag dodatkowo tagów przebywać w rozproszonych prosty przykład do zasad, to że trzeba skonfigurować w następujący sposób:

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

Teraz, po wpisaniu/wklej <title>test</title> do edytora, gdy jesteś w trybie edytora, a następnie przełącz się do widoku html, otrzymasz <title>test</title>. Po przełączeniu się z powrotem do widoku edytora ponownie otrzymasz numer <title>test</title>.

---

To była część ogólna.

Teraz, w Twoim przypadku, nie jestem pewien, czy to najlepszy pomysł na pracę z 121 niestandardowych zasad parsera (liczba znaczników HTML do obsługi), czy nie byłoby lepiej poświęcić czas i kopać do kodu źródłowego, aby znaleźć bardziej wydajne rozwiązanie (nie ma większego sensu, aby powiedzieć parserowi, że rzeczywiście zwraca tylko ciąg wejściowy, prawda?). Co więcej, powiedziałeś, że chcesz także zezwolić na CSS. Tak więc Twoje niestandardowe reguły analizatora składni nawet się rozszerzają.

W każdym razie, jako punkt wyjścia, możesz użyć mojego niestandardowego zestawu reguł dla parsera: https://github.com/eyecatchup/wysihtml5/blob/master/parser_rules/allow-all-html5.js.

Answer 2

Można podać funkcję tożsamości jako atrybut analizatora składni podczas inicjowania edytora wysihtml5. Poniższy skrypt to fragment coffeescript, który całkowicie wyłącza czyszczenie.

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 

---

wersja JavaScript powyższego kodu:

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