Làm thế nào để vô hiệu hóa wysihtml5 HTML Clean Up in Editor?

Question

Làm thế nào để vô hiệu hóa HTML Clean Up trong khi ở chế độ soạn thảo? Tôi đang cần cho phép định dạng css & html nội tuyến trong mã. Ý tưởng là tắt trình phân tích cú pháp và làm sạch html khi dán mã và nhập Trình chỉnh sửa để chỉnh sửa. Cảm ơn.

Answer 1

Thực ra, đây là những gì mà quy tắc của trình phân tích cú pháp dành cho.

Bạn có thể đính kèm quy tắc tùy chỉnh của mình vào số var wysihtml5ParserRules được bao gồm trước khi khởi tạo đối tượng trình chỉnh sửa hoặc chỉ tạo đối tượng quy tắc của riêng bạn và cung cấp cho hàm tạo của trình soạn thảo.

Ví dụ, để cho phép h1 và h3 thẻ, thêm vào các thẻ cho phép trong các quy tắc ví dụ đơn giản phân tán, bạn cần phải thiết lập như sau:

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

Bây giờ, khi bạn nhập/dán <title>test</title> vào trình chỉnh sửa, trong khi bạn đang ở chế độ trình chỉnh sửa và sau đó chuyển sang chế độ xem html, bạn sẽ nhận được <title>test</title>. Và khi bạn quay lại chế độ xem trình chỉnh sửa, bạn sẽ lại nhận được <title>test</title>.

---

Đó là phần chung.

Bây giờ, trong trường hợp của bạn, tôi không chắc liệu ý tưởng hay nhất là làm việc với 121 quy tắc phân tích cú pháp tùy chỉnh (số lượng thẻ HTML để xử lý) hoặc sẽ không tốt hơn để dành thời gian và đào vào mã nguồn để tìm một giải pháp hiệu suất hơn (không có ý nghĩa nhiều khi nói với một trình phân tích cú pháp để thực tế, chỉ cần trả lại chuỗi đầu vào, đúng không?). Hơn nữa, bạn nói bạn cũng muốn cho phép CSS. Vì vậy, quy tắc phân tích cú pháp tùy chỉnh của bạn thậm chí sẽ mở rộng.

Dù sao, làm điểm xuất phát, vui lòng sử dụng bộ quy tắc phân tích cú pháp tùy chỉnh của tôi tại đây: https://github.com/eyecatchup/wysihtml5/blob/master/parser_rules/allow-all-html5.js.

Answer 2

Bạn có thể cung cấp chức năng nhận dạng làm thuộc tính trình phân tích cú pháp khi khởi tạo trình chỉnh sửa wysihtml5. Kịch bản bên dưới là đoạn trích coffeescript vô hiệu hóa dọn dẹp hoàn toàn.

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 

---

phiên bản JavaScript của đoạn code trên:

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