MarkitUp! - लाइटवेट jQuery संपादक

परिचय

सभी को बधाई!

हाल ही में, मुझे एक परियोजना के संपादक की कार्यक्षमता का थोड़ा विस्तार करना पड़ा। लेकिन जैसा कि यह मेरे मामले में निकला, मुझे कुछ मुश्किलें आईं। इस लेख में मैं पाठकों के साथ साझा करूँगा कि मैं इस स्थिति से कैसे बाहर निकला।

कैसा था

परियोजना में, जिसके संपादक को थोड़ा अद्यतन किया जाना चाहिए था, इसका उपयोग ज्यादातर मामलों में जाने-माने पुराने-टाइमर टिनीसीसीई द्वारा किया गया था। निजी तौर पर, मेरे पास उसके खिलाफ कुछ भी नहीं है। यह एक उत्कृष्ट संपादक है जिसने एक उत्कृष्ट काम किया है और अब विभिन्न साइटों पर अपने कर्तव्यों का प्रबंधन कर रहा है। मैं खुद इसे अपनी परियोजनाओं में मुख्य के रूप में उपयोग करता हूं। लेकिन विषय विषय पर वापस, क्योंकि हम इसके बारे में आगे बात नहीं करेंगे।

मुख्य कार्य: मुझे मौजूदा संपादक को बहुत संशोधित करने की आवश्यकता नहीं है, अर्थात्, पाठ को उन टैगों के साथ फ़्रेम में जोड़ें जो संपादक के वर्तमान संस्करण में नहीं हैं।
बेशक, सबसे पहले मैं वर्तमान संपादक, यानी टिनीएमसीई को अंतिम रूप देने के विचार के साथ आया था। प्रलेखन को बहुत पढ़ने के बाद, मुझे एहसास हुआ कि, सामान्य तौर पर, इसके बारे में कुछ भी जटिल नहीं था। लेकिन नेटवर्क पर वर्णित विधियों में महत्वपूर्ण नुकसान थे।

और यहाँ उनमें से कुछ हैं:

जैसा कि यह निकला, संपादक के शोधन को अंतिम रूप देने की प्रक्रिया के दौरान, आपको संपीड़न के बिना संपादक का उपयोग करने की आवश्यकता है। यही है, आपको स्वयं संपादक की src फ़ाइलों को संपादित करने की आवश्यकता है, और फिर आपको उन्हें कम्प्रेसर के साथ फिर से संपीड़ित करने की आवश्यकता है, उदाहरण के लिए YUI कंप्रेसर , JSMin या Google क्लोजर कंपाइलर ।

मुझे तुरंत इस बारे में विचार आया। यदि आप ऊपर वर्णित विकल्प का चयन करते हैं, तो कम से कम संपादक को भविष्य के संभावित अपडेट के साथ समस्या होगी।

निर्णय

इसलिए, मैंने थोड़ा अलग रास्ता तय किया। चूंकि साइट ने अद्भुत jQuery जावास्क्रिप्ट फ्रेमवर्क का उपयोग किया था, मैंने सोचा, "कुछ अन्य संपादक क्यों नहीं मिले?"

बहुत खोज करने के बाद, मुझे markItUp नामक एक संपादक मिला ! ।
नया संपादक चुनते समय पहली बात मैंने देखी:

1. इसकी सेटिंग्स की आसानी और लचीलापन।
2. क्रॉस-ब्राउज़र संगतता के साथ न्यूनतम समस्याएं।

MarkItUp के साथ करीब से जानना! , मैंने पाया कि यह संपादक अपने हल्केपन के बावजूद काफी लचीला है। यह सब करने के लिए, यह पाठ के साथ काम करने के विभिन्न तरीकों का भी समर्थन करता है।

यहाँ मुख्य उपहार हैं जो आपको रुचि दे सकते हैं:

1. त्वरित और आसान एकीकरण;
2. हॉटकी समर्थन;
3. अजाक्स का उपयोग करके पूर्वावलोकन;
4. आसानी से अनुकूलन खाल।

यह इस तथ्य पर ध्यान देने योग्य है कि संपादक आपको टैग के विभिन्न सेटों के साथ काम करने की अनुमति देता है:
एचटीएमएल, बीबीकोड, विकी सिंटेक्स।

स्थापना

संपादक की स्थापना बहुत आसान है।
सबसे पहले, हम संपादक को खुद से जोड़ते हैं और jQuery।

<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="markitup/jquery.markitup.js"></script> 

अगला, हमें फ़ाइल को संपादक सेटिंग्स से जोड़ना चाहिए, जो निस्संदेह बहुत सुविधाजनक है।

 <script type="text/javascript" src="markitup/sets/default/set.js"></script> 

अन्यथा, आपको खुद को कॉन्फ़िगर करने की आवश्यकता है, जो मैंने मूल रूप से किया था।

 <script type="text/javascript" > mySettings = { ... } //   </script> 

और यहाँ, उदाहरण के लिए, काम करने वाला विन्यास कैसा दिखता है:

 function mySettings() { return { previewParserPath: '', onShiftEnter: {keepDefault:false, replaceWith:'<br />\n'}, onTab: {keepDefault:false, replaceWith:' '}, markupSet: [ {name:'H4', className:'editor-h4', openWith:'<h4>', closeWith:'</h4>' }, {name:'H5', className:'editor-h5', openWith:'<h5>', closeWith:'</h5>' }, {name:'H6', className:'editor-h6', openWith:'<h6>', closeWith:'</h6>' }, {separator:'---------------' }, {name: '', className:'editor-bold', key:'B', openWith:'(!(<strong>|!|<b>)!)', closeWith:'(!(</strong>|!|</b>)!)' }, {name: '', className:'editor-italic', key:'I', openWith:'(!(<em>|!|<i>)!)', closeWith:'(!(</em>|!|</i>)!)' }, {name: '', className:'editor-stroke', key:'S', openWith:'<s>', closeWith:'</s>' }, {name: '', className:'editor-underline', key:'U', openWith:'<u>', closeWith:'</u>' }, {name: '', className:'editor-quote', key:'Q', replaceWith: function(m) { if (m.selectionOuter) return '<blockquote>'+m.selectionOuter+'</blockquote>'; else if (m.selection) return '<blockquote>'+m.selection+'</blockquote>'; else return '<blockquote></blockquote>' } }, {name: '', className:'editor-code', openWith:'<code>', closeWith:'</code>' }, {separator:'---------------' }, {name: '', className:'editor-ul', openWith:' <li>', closeWith:'</li>', multiline: true, openBlockWith:'<ul>\n', closeBlockWith:'\n</ul>' }, {name: '', className:'editor-ol', openWith:' <li>', closeWith:'</li>', multiline: true, openBlockWith:'<ol>\n', closeBlockWith:'\n</ol>' }, {separator:'---------------' }, {name: ' ', className:'editor-image', replaceWith:'<img src="[!['+'  :'+':!:http://]!]" />' }, {name: ' ', className:'editor-video', replaceWith:'<video>[!['+'  :'+':!:http://]!]</video>' }, {name: ' ', className:'editor-link', key:'L', openWith:'<a href="[!['+' url :'+':!:http://]!]"(!( title="[![Title]!]")!)>', closeWith:'</a>', placeHolder:'  ...' }, {separator:'---------------' }, {name: '  ', className:'editor-clean', replaceWith: function(markitup) { return markitup.selection.replace(/<(.*?)>/g, "") } } ] } } 

आपको CSS स्टाइल फ़ाइलों को भी शामिल करना होगा।

 <link rel="stylesheet" type="text/css" href="markitup/skins/markitup/style.css" /> <link rel="stylesheet" type="text/css" href="markitup/sets/default/style.css" /> 

खैर, आखिरकार markItUp को textarea से जोड़ना ।

 <script type="text/javascript" > jQuery(document).ready(function() { jQuery("#markItUp").markItUp(mySettings()); }); </script> ... <textarea id="markItUp"></textarea> 

पिछले कुछ लिंक के लिए:

• सभी दस्तावेज यहां देखे जा सकते हैं।
• संपादक के उदाहरण यहाँ हैं ।

आज के लिए बस इतना ही। आपके ध्यान के लिए धन्यवाद, और मैं आप सभी की सफलता की कामना करता हूं!