2012-12-03 16 views
9

संपादक मोड में HTML क्लीन अप को अक्षम कैसे करें? मुझे कोड में सीएसएस प्रारूप & इनलाइन एचटीएमएल की अनुमति देने की आवश्यकता है। विचार कोड को चिपकाते समय और संपादन के लिए संपादक में प्रवेश करते समय पार्सर और एचटीएमएल को क्रिया को साफ करना है। धन्यवाद।संपादक में wysihtml5 एचटीएमएल क्लीन अप कैसे अक्षम करें?

+0

आप कभी भी इस समस्या का समाधान मिला? – Wallter

उत्तर

9

दरअसल, पार्सर नियम यही हैं।

आप संपादक ऑब्जेक्ट को तुरंत शुरू करने से पहले अपने कस्टम नियमों को शामिल 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 व्यू पर स्विच करें, तो आपको &lt;title&gt;test&lt;/title&gt; मिल जाएगा। और जब आप एडिटर व्यू पर वापस जाते हैं, तो आपको फिर से <title>test</title> मिल जाएगा।


यह सामान्य हिस्सा था।

अब, आपके मामले में, मुझे यकीन नहीं है कि 121 कस्टम पार्सर नियमों (हैंडल करने के लिए एचटीएमएल टैग की गिनती) के साथ काम करना सबसे अच्छा विचार है या यदि समय और खुदाई करना बेहतर नहीं होगा एक अधिक प्रदर्शन समाधान खोजने के लिए स्रोत कोड में (वास्तव में एक पार्सर को बताने के लिए ज्यादा समझ नहीं आता है, वैसे भी इनपुट स्ट्रिंग को वापस लौटाएं, है ना?)। इसके अलावा, आपने कहा कि आप सीएसएस को भी अनुमति देना चाहते हैं। तो आपके कस्टम पार्सर नियम भी विस्तारित होंगे।

वैसे भी, एक शुरुआती बिंदु के रूप में, यहां से मेरे कस्टम पार्सर नियम सेट का उपयोग करने के लिए स्वतंत्र महसूस करें: https://github.com/eyecatchup/wysihtml5/blob/master/parser_rules/allow-all-html5.js

+0

हां यह सही जवाब है, धन्यवाद! – duy

15

आप wysihtml5 संपादक को प्रारंभ करने पर पार्सर विशेषता के रूप में एक पहचान फ़ंक्शन प्रदान कर सकते हैं। नीचे दी गई स्क्रिप्ट एक कॉफ़ीस्क्रिप्ट स्निपेट है जो क्लीनअप को पूरी तरह से अक्षम करता है।

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; 
    } 
}); 
+0

और यह सादे पुराने जावास्क्रिप्ट में कैसे दिखता है? – jahu

+1

@MarcinHabuszewski उपरोक्त कॉफ़ीस्क्रिप्ट [इस पर संकलित] (https://gist.github.com/smabbott/26b3295608db37340b4b)। – smabbott

+0

@Ilja कोड के लिए धन्यवाद। यदि आप इसे SO पर उत्तर में शामिल कर सकते हैं तो यह बेहतर होगा। – jahu

संबंधित मुद्दे