비활성화 방법 wysihtml5 HTML 편집기에서 정리하기?

Question

편집기 모드에서 HTML 정리를 비활성화하는 방법은 무엇입니까? 나는 CSS 형식 & 인라인 HTML 코드를 허용 할 필요가있다. 아이디어는 코드를 붙이고 편집기를 편집 할 때 파서 및 HTML 정리 작업을 비활성화하는 것입니다. 감사.

Answer 1

사실, 파서 규칙이 적용됩니다.

편집기 오브젝트를 인스턴스화하거나 고유 한 규칙 오브젝트를 작성하고 편집기의 생성자에게주기 전에 포함 된 var wysihtml5ParserRules에 사용자 정의 규칙을 첨부 할 수 있습니다.

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

를 이제 입력 할 때 /, 다음과 같이

예를 들어, 분산 간단한 예제 규칙에서 허용되는 태그 이외에 H1과 H3 태그를 허용하려면 설정해야 할 것 편집기 모드에있는 동안 <title>test</title>을 편집기에 붙여 넣은 다음 html보기로 전환하면 <title>test</title>이 표시됩니다. 그리고 편집기보기로 다시 전환하면 <title>test</title>이 다시 나타납니다.

---

이것은 일반적인 부분입니다.

이제는 121 개의 사용자 지정 파서 규칙 (처리 할 HTML 태그의 수)을 사용하는 것이 가장 좋은 방법인지 아니면 시간을 들여 파고 더 잘 파지 않는 것이 좋은지 잘 모르겠습니다. 소스 코드에 더 성능있는 솔루션을 찾으십시오 (실제로 파서에게 어쨌든 입력 문자열을 반환하라고 말하는 것은별로 좋지 않습니다.). 또한 CSS를 허용하고 싶다고 말했습니까? 따라서 사용자 정의 구문 분석기 규칙이 확장됩니다.

어쨌든, 시작 지점으로 여기에서 사용자 정의 파서 규칙 집합을 사용하십시오 : https://github.com/eyecatchup/wysihtml5/blob/master/parser_rules/allow-all-html5.js.

Answer 2

wysihtml5 편집기를 초기화 할 때 구문 분석기 특성으로 ID 기능을 제공 할 수 있습니다. 아래 스크립트는 정리를 완전히 비활성화하는 coffeescript 스 니펫입니다. 위의 코드의

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 

---

자바 스크립트 버전 :

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