एकीकृत मार्कडाउन WYSIWYG टेक्स्ट एडिटर

Question

मार्कडाउन कोड के लिए एक सीधा WYSIWYG संपादक की तलाश में, मैं CkEditor, TinyMCE, ect के लिए एक तुलनीय यूआई नहीं ढूंढ रहा हूं।

विशेष रूप से, मार्कडाउन "WYSIWYG" संपादकों कि अक्सर सिफारिश की जाती है (जैसे कि इस तरह के पोस्ट ) इस अर्थ में शुद्ध WYSIWYG संपादक नहीं हैं कि उपयोगकर्ता या तो अभी भी कच्चे Markdown ( MarkItUp ) लिखते हैं या लाइन में संपादन किए बिना दूसरे चरम पर जाते हैं मानक नियंत्रण ( हैलो )।

मुझे बीच में कुछ चाहिए।

मैं एक मार्कडाउन संपादक की तलाश कर रहा हूं जो CkEditor टेक्स्ट बॉक्स के नीचे की तरह दिखता है और कार्य करता है, और जो Markdown को स्वीकार और आउटपुट करता है। प्रारूपण विकल्पों के न्यूनतम सेट (बी, आई, यू, सूचियाँ, ect) के साथ एक टूलबार होना चाहिए, और पाठ प्रविष्टि क्षेत्र को परिवर्तित मार्कडाउन दिखाना चाहिए, न कि कच्चा कोड। एक स्रोत बटन होना चाहिए जो उपयोगकर्ताओं को कच्चे मार्कडाउन को संपादित करने की अनुमति देगा, लेकिन यह भी वैकल्पिक है। उदाहरण के लिए:

मुझे मार्कडाउन / विकी का कारण मिलता है, ect - यह सुरक्षा प्रदान करता है। मुझे एसई में कच्चे कोड में प्रवेश करने से कोई आपत्ति नहीं है, लेकिन मेरे उपयोगकर्ता जीक्स नहीं हैं और यह सुखद नहीं है। वे * * * ___ और रिक्त स्थान को अपने पाठ के साथ मिश्रित नहीं देखना चाहते। वे "वर्ड" शैली के संपादन के लिए उपयोग किए जाते हैं, और उस वातावरण में सबसे अधिक उत्पादक होते हैं।

तो - क्या मार्कडाउन के लिए वास्तव में एकीकृत WYSIWYG संपादक है? मैं एक PHP में लिख रहा हूं, इसलिए कुछ ऐसा है जिसे मैं एक वर्ग के साथ आह्वान कर सकता हूं।

---

सितम्बर 23, 2015 अद्यतन

CKEditor में अब एक Markdown addon है जो इस सटीक कार्य को करता है। Addon प्रोजेक्ट को github पर होस्ट किया गया है ।

स्क्रीनशॉट:

---

अप्रैल 13, 2015 अद्यतन
किसी CKEditor विकसित करने के लिए professing का कहना है कि की उपस्थिति CommonMark एक खेल परिवर्तक है, और हम संभवतः एक उचित देख सकते हैं CKEditor के लिए मार्कअप इंटरफेस (पूरी कहानी के लिए टिप्पणियों पढ़ें)।

---

फ़रवरी 6, 2015 अपडेट

CKEditor अब एक प्लगइन के साथ आता है जो आउटपुट (और इनपुट के रूप में स्वीकार करता है) BBCode।

डेमो: http://ckeditor.com/demo#bbcode

Comments

अहोला संपादक, जैसा कि एसओ प्रश्न के इस उत्तर में सुझाया गया है , आप एक HTML5 WYSIWYG संपादक हैं जो वास्तव में वही करता है जो आप बाद में करते हैं। यहां तक ​​कि यह कार्यालय रिबन का संकेत भी है। क्या कोई कारण है कि आपने यह छूट दी है?

— क्रिस

मुझे डर है कि मैं वास्तव में आपकी अंतिम टिप्पणी का कोई मतलब नहीं निकाल सकता। अहोला "एडिट-इन-प्लेस" हैं, जैसा कि सभी WYSIWYG संपादक हैं। अहोल्डा एडिट बॉक्स सिर्फ एक है divऔर टूलबार एक और है div, ये पृष्ठ पर केवल चीजें हो सकती हैं। अहोला समाधान "प्रारूपण विकल्पों (बी, आई, यू, सूचियों, ect) के न्यूनतम सेट" के लिए आपकी आवश्यकताओं को पूरा करता है, और पाठ प्रविष्टि क्षेत्र को परिवर्तित मार्कडाउन दिखाना चाहिए, न कि कच्चे कोड। " कृपया आप अधिक स्पष्ट रूप से समझा सकते हैं कि यह एक समाधान क्यों नहीं है जिस पर आप विचार करेंगे।

— क्रिस

मार्कडाउन इन सभी WYSIWYG संपादकों को खुद से बदल देता है। आपको आउटपुट मार्कडाउन की आवश्यकता क्यों होगी?

— पोल

@Pol: क्योंकि HTML के विपरीत, बाद में स्टोर करना और प्रदर्शित करना सुरक्षित है?

— दान अब्रामोव

मुझे यह सवाल नहीं सूझ रहा है। या तो आप HTML उत्पन्न करने के लिए Markdown का उपयोग करते हैं या आप HTML बनाने के लिए WYSIWYG संपादक का उपयोग करते हैं। Markdown उत्पन्न करने के लिए आप WYSIWYG संपादक का उपयोग क्यों करना चाहेंगे? यदि वास्तव में आप क्या चाहते हैं, तो आप हमेशा CKeditor का उपयोग कर सकते हैं और HTML को Markdown में बदल सकते हैं।

— mb21

Answer 1

मैं दूसरे दिन इस विषय पर शोध कर रहा था और मुझे मार्कडाउन आउटपुट के साथ कोई भी अच्छा WYSIWYG संपादक नहीं मिला। वास्तव में, पहले आपको WYSIWG मार्कडाउन संपादक बनाना होगा WYSIWG HTML संपादक और उनमें से कुछ ही हैं जो बाजार में उपयोग करने योग्य हैं।

एक मौका है कि आप dataProcessorCKEditor के लिए बनाने में सक्षम होंगे जो एचटीएमएल संपादक को मार्कडाउन संपादक में बदल देगा। हमें BBCode के लिए एक प्लगइन मिला है जो इस तरह काम करता है ( http://nightly-v4.ckeditor.com/3737/samples/bbcode.html देखें )।

आपको बस इस इंटरफ़ेस को लागू करना है http://nightly-v4.ckeditor.com/ckeditor_api/#!/api/CKEDITOR.dataProcessor । यदि आप BBCode प्लगइन के कोड की जांच करते हैं, तो आपको कुछ हैक और ट्रिक्स दिखाई देंगे, क्योंकि दुर्भाग्य से वर्तमान CKEditor का आर्किटेक्चर इस तरह के डेटा प्रोसेसर को बनाने के लिए तैयार (अभी तक) नहीं है। हालाँकि, मेरा मानना ​​है कि यदि आप केवल कुछ स्टाइल विकल्प प्रदान करना चाहते हैं, तो आपको मार्कडाउन समर्थन को जल्दी से लागू करने में सक्षम होना चाहिए।

Answer 2

SimpleMDE , एक नवागंतुक, जवाब हो सकता है। मैं अभी एक महीने से ऐसा ही कुछ खोज रहा हूं। मुझे आश्चर्य है कि यह खोज परिणामों में अधिक नहीं दिखा। मुझे इसे खोजने के लिए लेक्चर / एडिटर पर नोटिस से गुजरना पड़ा ।

Comments

वाह, साझा करने के लिए धन्यवाद कि - यह वही है जो मैं देख रहा था। बहुत बढ़िया!

— जारेड व्हाइट

धन्यवाद HNL, यहाँ भी वही।

— मेल्विन

हालांकि यह WYSIWYG सच नहीं है। यह संपादक विंडो में मार्कडाउन को मिलाता है। इस सवाल में जो मांगा गया है, वह एक संपादक है जो तैयार दृश्य और स्रोत दोनों को अलग-अलग विचारों में दिखाता है (टूलबार पर 'स्रोत' बटन के साथ, फ़िडगेटिंग के लिए)।

— एक कोडर

Answer 3

EDIT सितंबर 23, 2015

CKEditor में अब एक Markdown addon है जो इस सटीक कार्य को करता है। Addon प्रोजेक्ट को github पर होस्ट किया गया है ।

स्क्रीनशॉट:

---

जैसा कि मेरे फ़रवरी 6, 2015 के अपडेट में पोस्ट किया गया है, CKEditor में अब प्लगइन्स शामिल हैं जो BBCode इनपुट और आउटपुट की अनुमति देते हैं।

एक डेमो यहां उपलब्ध है: http://ckeditor.com/demo#bbcode

संपादित करें अप्रैल 13, 2015:
किसी CKEditor विकसित करने के लिए professing का कहना है कि की उपस्थिति CommonMark एक खेल परिवर्तक है, और हम संभवतः एक उचित देख सकते हैं CKEditor के लिए मार्कअप इंटरफेस (पूरी कहानी के लिए टिप्पणियों पढ़ें)।

Comments

"क्या यह सटीक बात है?" ऐड-ऑन ckeditor के सामान्य के अनुसार अभी भी HTML को आउटपुट करता है और इस ऐड-ऑन के साथ मार्कडाउन को नहीं।

— user764754 16

Answer 4

पेन एक नया (2014 तक सक्रिय) WYSIWYG संपादक है जो मार्कडाउन को आउटपुट देता है ।
यह बिल्कुल सही नहीं है - मेरे पास HTML को वहाँ चिपकाने के मुद्दे हैं - लेकिन यह काम करता है।

संपादित करें: क्षमा करें! यह Markdown का उत्पादन नहीं करता है। वालरी स्ट्रैच ने टिप्पणियों में बताया कि मार्कडाउन प्रारूपण के संकेत मैंने देखे थे कि वास्तव में सीएसएस छद्म तत्व नियम थे:

फिर भी, मैं इसे एक विकल्प के रूप में यहाँ छोड़ दूँगा क्योंकि कुछ लोगों ने इस उत्तर को उखाड़ फेंका और यह किसी के लिए उपयोग हो सकता है।

Comments

पेन डेमो एडिट-इन-प्लेस है, न कि ओपी (मुझे) में रुचि थी / इस सेकंड को सही से इंस्टॉल करने का समय नहीं। क्या कोई पारंपरिक टेक्स्ट बॉक्स विकल्प है?

— एक कोडर

@ कैकर: मेरा बुरा! मुझे महसूस नहीं हुआ कि आप एक निश्चित टूलबार चाहते हैं। हालांकि हालो में क्या गलत है ? यह अब एक टूलबार है ..

— दान Abramov

यह अभी भी इस स्क्रीनशॉट में css लेआउट है। मैं मार्कडाउन डेटा लेना चाहता हूं (मेरे स्क्रीनशॉट पर एक नज़र डालें i.imgur.com/fM4jFl2.png )

— Walery Strauch

@WaleryStrauch वाह, मैं वास्तव में मूर्ख था। मुझे महसूस नहीं हुआ कि यह वास्तव में आउटपुट नहीं है। आपका समय बर्बाद करने के लिए क्षमा चाहता हूं! मैं जवाब अपडेट कर दूंगा।

— दान अब्रामोव

.. अब मार्कडाउन के आउटपुट के लिए कम से कम बीटा सपोर्ट है।

— पहला

Answer 5

मैंने एक बहुत ही सरल संपादक को लागू किया, जो <textarea>कि WYSIWYG फैशन में मार्कडाउन को संपादित करने की सामग्री को अनुमति देता है ।

मैंने हेल्लो का इस्तेमाल किया । मुझे नहीं लगता कि इसकी वेब साइट यह स्पष्ट करती है कि यह स्वयं एक मार्कडाउन WYSIWYG संपादक नहीं है, लेकिन डेमो एक को रास्ता बनाता है ।

Hallo WYSIWYG का संपादन HTML के अंदर करने देता है <div>। मैं जावास्क्रिप्ट इस्तेमाल किया किसी भी छिपाने के लिए <textarea>एक विशिष्ट है कि ब्लॉक wysiwygसीएसएस वर्ग, एक और इसकी जगह <div>और की सामग्री को कॉपी करने <textarea>में <div>। के माध्यम से कॉपी करने रन तसलीम जो Markdown से HTML पैदा करता है।

एक और जावास्क्रिप्ट दिनचर्या हर बार जब <div>सामग्री बदलती है तो प्रतिक्रिया करती है । यह सामग्री को वापस (अब छिपा हुआ) में कॉपी करता है <textarea>। HTML से Markdown में बदलने के लिए कंटेंट को मार्कडाउन के माध्यम से चलाया जाता है ।

यदि <textarea>एक <form> में एक फ़ील्ड है , तो उस फॉर्म को जमा करने पर संपादित किए गए मार्कडाउन को सर्वर पर भेजा जाएगा।

इसके लिए प्रेरणा हेलो मार्कडाउन उदाहरण से आती है , विशेष रूप से editor.js फ़ाइल। मैं के लिए एक आधार के रूप में उपयोग किया जाता मेरी अपनी स्क्रिप्ट के साथ hallo.js , showdown.js और टू-markdown.js ।

मेरी स्क्रिप्ट, wysiwyg.js Hallo Markdown उदाहरण से Editor.js का व्युत्पन्न है । नोट करने के लिए कुछ बिंदु:

• मैं एक रेल अनुप्रयोग में इसका उपयोग करता हूं (ऐसा नहीं है कि मायने रखता है)
• यह चलता है readyऔर आगे भी चलता है page:load, क्योंकि रेल टर्बोलिंक्स का उपयोग करती है
• यह ajaxCompleteइसलिए चलता है क्योंकि मैं फॉर्म त्रुटि रिपोर्ट के लिए अजाक्स का उपयोग करता हूं
• अन्य निर्भरताएँ हैं: JQueryUI और Rangy (रेल उपयोगकर्ता जवाहरात jquery-ui-rails और rangy-rails का लाभ उठा सकते हैं )।
• इसके अलावा Font Awesome का इस्तेमाल टूल बार आइकन के लिए किया जाता है। के संस्करण hallo.jsद्वारा इस्तेमाल किया डेमो पुराना हो चुका है (यह के एक पुराने संस्करण का उपयोग करता फ़ॉन्ट बहुत बढ़िया ) - उपयोग GitHub से hallo.js बजाय।

आप केवल सीएसएस जोड़ने की जरूरत है class='wysiwyg'किसी भी करने के लिए <textarea>उस पर WYSIWYG सक्षम करने के लिए। <textarea>Markdown स्वरूपित पाठ conain चाहिए।

मुझे उम्मीद है कि अगर आप हेलो को जब तक एचटीएमएल में काम नहीं करते हैं, तब तक किसी अन्य संपादक का उपयोग करने के लिए wysiwyg.js को आसानी से अनुकूलित किया जा सकता है । चुनने के लिए काफी कुछ हैं लेकिन सभी हल्लो की तरह हल्के नहीं हैं ।<div>

काम का एक ख़ुशबूदार टुकड़ा जो मुझे मिला, वह markdown-html-form है । यह उसी शोडाउन और मार्कडाउन का उपयोग करता है ।

Comments

अरे @starfry, मैंने आपके द्वारा उपयोग किए गए ऊपर वर्णित वर्णन को पुन: पेश करने की कोशिश की wysiwyg.js, लेकिन कोई बड़ी सफलता नहीं मिली। आश्चर्य है कि अगर आपके साथ एक HTML एक गिस्ट में कहीं अटक गया है? आश्रितों की स्थिर संस्करण सूची, आदि? धन्यवाद!

— जेम्सन

@Jameson मैं अपने लिए कुछ नोट्स जोड़ लिया है सार । मुझे आशा है कि वे मदद करेंगे! यदि आपके कोई प्रश्न हैं, तो टिप्पणी करने के लिए स्वतंत्र महसूस करें।

— स्टारफ्री

Answer 6

मैं एक मार्कडाउन संपादक की भी तलाश कर रहा हूं जो इस धागे के शीर्ष पर वर्णित है

क्या आपने "मार्कडाउन टूल" देखा है: http://md-wysiwyg.sourceforge.net/

डेमो: http://md-wysiwyg.sourceforge.net/cgi-bin/cgi_wysiwyg_test.py/

हम जो खोज रहे हैं, वह काफी करीब लगता है, यह आपके WYSIWYG रिच टेक्स्ट और आउटपुट मार्किंग को लेने का एक उचित काम करता है। हालाँकि, यह एन्कोडिंग अपवाद पर विफल रहा जब मैंने एक Google डॉक्स से कुछ समृद्ध पाठ में पेस्ट किया।

Comments

इसके लिए स्रोत कोड HTML को मार्कडाउन नहीं दिखाता है।

— एक कोडर