😒 👆🏽 👨🏿 बिल्ड: markitUp, फैंसीबॉक्स, एलफाइंडर - WYSIWYG संपादकों के लिए एक महान प्रतिस्थापन 🛅 👧🏿 🏭

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

दरअसल, उपयोगकर्ता को वर्ड से कॉपी-पेस्ट करने के बजाय डब्ल्यूएन मार्कअप की मूल बातें 3-4 घंटे में समझाना आसान है। सब कुछ मार्कटअप में बहुत अच्छा है, लेकिन इसमें सर्वर पर फाइलें अपलोड करने और उनसे लिंक डालने की क्षमता का अभाव है।

आज मैंने अद्भुत jquery प्लगइन्स के सहजीवन के लिए समय समर्पित करने का निर्णय लिया: markitUp, फैंसीबॉक्स, elFinder। मैंने अपने काम का नतीजा साझा करने का फैसला किया।

आपको आवश्यकता होगी : फैंसीबॉक्स , मार्कटअप , एलफिंडर । Jquery और jquery ui भी काम में आ सकते हैं, हालाँकि मैं उन्हें CDN से लोड कर रहा हूँ।
उदाहरण संपादक के साथ पृष्ठ का HTML कोड।

<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> </head> <body> <form> <textarea id="post-content"></textarea> <button></button> </form> <div id="markitup-elfinder"></div> <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/smoothness/jquery-ui.css"/> <link rel="stylesheet" type="text/css" href="js/markitup/skins/simple/style.css"/> <link rel="stylesheet" type="text/css" href="js/markitup/sets/markdown/style.css"/> <link rel="stylesheet" type="text/css" href="js/elfinder/css/elfinder.min.css"/> <link rel="stylesheet" type="text/css" href="js/fancybox/jquery.fancybox.css"/> <script src="http://www.google.com/jsapi"></script> <script>google.load("jquery", "1");</script> <script>google.load("jqueryui", "1");</script> <script src="js/markitup/jquery.markitup.js"></script> <script src="js/markitup/sets/markdown/set.js"></script> <script src="js/elfinder/js/elfinder.min.js"></script> <script src="js/elfinder/js/i18n/elfinder.ru.js"></script> <script src="js/fancybox/jquery.fancybox.pack.js"></script> <script src="js/script.js"></script> </body> </html>

और script.js फ़ाइल की सामग्री:

 function markitupElfinder(){ $('#markitup-elfinder').elfinder({ lang: 'ru', url : '/admin/dash/fm/', //        getFileCallback:function(file){ $.markItUp({ replaceWith:'![]('+file.url+' "[![:]!]")'}); $.fancybox.close(); } }).elfinder('instance'); $.fancybox({ content: $('#markitup-elfinder') }); } $(document).ready(function(){ $("#post-content").markItUp(mySettings); });

js/markitup/sets/markdown/set.js {name:'Picture', key:'P', replaceWith:'![[![Alternative text]!]]([![Url:!:http://]!] "[![Title]!]")'} और इसे {name:'Picture', key:'P', call: 'markitupElfinder'} साथ बदलें {name:'Picture', key:'P', call: 'markitupElfinder'} ।
Set.js में ढूंढना और बदलना मार्किटअप विन्यास को संपादित करने के लिए सबसे सुरुचिपूर्ण दृष्टिकोण नहीं है, लेकिन यह एक उदाहरण के लिए करेगा।

खैर, कुछ तस्वीरें जो मेरे सामने आईं:
खुद संपादक

प्रबंधक फ़ाइल विंडो:

चिपकाने पर, एक पॉपअप img टैग के लिए शीर्षक संपत्ति के लिए कहता है:

काम का परिणाम:

संग्रह में काम कर रहे उदाहरण
लाइव उदाहरण (धन्यवाद KarNed )

बिल्ड: markitUp, फैंसीबॉक्स, एलफाइंडर - WYSIWYG संपादकों के लिए एक महान प्रतिस्थापन

More articles: