โปรแกรมแก้ไขข้อความ Markdown WYSIWYG ในตัว

ในการค้นหาโปรแกรมแก้ไข WYSIWYG ที่ตรงไปตรงมาสำหรับโค้ด Markdown ฉันไม่พบ UI ที่เปรียบเทียบได้กับ CkEditor, TinyMCE, ect

โดยเฉพาะอย่างยิ่งตัวแก้ไข Markdown "WYSIWYG" ที่มักได้รับการแนะนำ (เช่นโพสต์ลักษณะนี้ ) ไม่ใช่ตัวแก้ไขแบบ WYSIWYG ที่บริสุทธิ์ในแง่ที่ว่าผู้ใช้ยังคงเขียน Markdown แบบดิบ ( MarkItUp ) หรือไปที่ขั้นสูงสุดอื่น ๆ ของการแก้ไขในบรรทัดโดยไม่มี การควบคุมมาตรฐาน ( Hallo )

ฉันต้องการบางอย่างระหว่างนั้น

ฉันกำลังมองหาตัวแก้ไข Markdown ที่มีลักษณะและทำหน้าที่เหมือนกล่องข้อความ CkEditor ที่ถูกถอดออกและยอมรับและส่งออก Markdown ควรมีแถบเครื่องมือที่มีชุดตัวเลือกการจัดรูปแบบขั้นต่ำ (B, I, U, รายการ, ect) และพื้นที่ป้อนข้อความควรแสดง Markdown ที่แปลงแล้วไม่ใช่รหัสดิบ ควรมีปุ่ม Source ที่ช่วยให้ผู้ใช้สามารถแก้ไข Raw Markdown ได้ แต่ก็เป็นทางเลือก เช่น:

ฉันได้รับเหตุผลสำหรับ Markdown / wiki, ect - ความปลอดภัยที่มีให้ ฉันไม่รังเกียจที่จะป้อนรหัสดิบเหมือนที่ SE แต่ผู้ใช้ของฉันไม่ใช่คนเก่งและไม่คิดว่าจะสนุก พวกเขาไม่ต้องการเห็น * * * ___ และเว้นวรรคผสมกับข้อความ ใช้ในการแก้ไขสไตล์ "Word" และมีประสิทธิผลมากที่สุดในสภาพแวดล้อมนั้น

ดังนั้น - มีโปรแกรมแก้ไข WYSIWYG สำหรับ Markdown หรือไม่? ฉันกำลังเขียน PHP ดังนั้นสิ่งที่ฉันสามารถเรียกใช้กับคลาสได้ก็จะสมบูรณ์แบบ

อัปเดตวันที่ 23 กันยายน 2558

CKEditor ตอนนี้มีMarkdown addonที่ไม่สิ่งนี้แน่นอน โครงการ addon เป็นโฮสต์บน GitHub

ภาพหน้าจอ:

13 เม.ย. 2015 อัปเดตผู้
ที่อ้างว่าพัฒนา CKEditor กล่าวว่าการปรากฏตัวของCommonMarkเป็นตัวเปลี่ยนเกมและเราอาจเห็นอินเทอร์เฟซมาร์กอัปที่เหมาะสมสำหรับ CKEditor (อ่านความคิดเห็นสำหรับเรื่องราวทั้งหมด)

อัปเดต 6 ก.พ. 2558

ตอนนี้ CKEditor มาพร้อมกับปลั๊กอินที่ส่งออก (และรับเป็นอินพุต) BBCode

การสาธิต: http://ckeditor.com/demo#bbcode

เมื่อวันก่อนฉันค้นคว้าในเรื่องนี้และฉันไม่พบตัวแก้ไข WYSIWYG ที่ดีพร้อมเอาต์พุต Markdown ในความเป็นจริงก่อนอื่นคุณต้องสร้างตัวแก้ไข WYSIWG Markdown คือตัวแก้ไข WYSIWG HTML และมีเพียงไม่กี่ตัวที่ใช้งานได้ในตลาด

มีโอกาสที่คุณจะสามารถสร้างdataProcessorCKEditor ซึ่งจะเปลี่ยนโปรแกรมแก้ไข HTML เป็นตัวแก้ไข Markdown เรามีปลั๊กอินสำหรับ BBCode ที่ใช้งานได้เช่นนี้ (ดูhttp://nightly-v4.ckeditor.com/3737/samples/bbcode.html )

ทั้งหมดที่คุณต้องทำคือการใช้อินเตอร์เฟซนี้http://nightly-v4.ckeditor.com/ckeditor_api/#!/api/CKEDITOR.dataProcessor หากคุณตรวจสอบโค้ดของปลั๊กอิน BBCode คุณจะเห็นแฮ็กและเทคนิคบางอย่างเนื่องจากสถาปัตยกรรมของ CKEditor ในปัจจุบันยังไม่พร้อม (ยัง) ที่จะสร้างตัวประมวลผลข้อมูลดังกล่าว อย่างไรก็ตามฉันเชื่อว่าหากคุณต้องการให้มีตัวเลือกการจัดแต่งทรงผมเพียงไม่กี่ตัวคุณควรจะใช้การสนับสนุน Markdown ได้อย่างรวดเร็ว

SimpleMDEมือใหม่อาจเป็นคำตอบ ฉันหาอะไรแบบนี้มาเป็นเดือนแล้ว ฉันแปลกใจที่สิ่งนี้ไม่ปรากฏในผลการค้นหาที่สูงกว่า ฉันต้องผ่านประกาศเกี่ยวกับlepture / editorเพื่อค้นหาสิ่งนี้

แก้ไข 23 กันยายน 2558

CKEditor ตอนนี้มีMarkdown addonที่ไม่สิ่งนี้แน่นอน โครงการ addon เป็นโฮสต์บน GitHub

ภาพหน้าจอ:

ตามที่โพสต์ไว้ในการอัปเดตเมื่อวันที่ 6 กุมภาพันธ์ 2015 ของฉันตอนนี้CKEditorมีปลั๊กอินที่อนุญาตให้ป้อนข้อมูลและเอาต์พุต BBCode

ดูการสาธิตได้ที่นี่: http://ckeditor.com/demo#bbcode

แก้ไข 13 เมษายน 2558: มี
คนที่อ้างว่าพัฒนา CKEditor กล่าวว่าการปรากฏตัวของCommonMarkเป็นตัวเปลี่ยนเกมและเราอาจเห็นอินเทอร์เฟซมาร์กอัปที่เหมาะสมสำหรับ CKEditor (อ่านความคิดเห็นสำหรับเรื่องราวทั้งหมด)

ปากกาเป็นใหม่ (ใช้งานเป็นปี 2014) แก้ไขแบบ WYSIWYG ที่Markdown เอาท์พุท
มันไม่สมบูรณ์ - ฉันมีปัญหากับการวาง HTML ที่นั่น - แต่มันก็ใช้ได้

แก้ไข: ขออภัย! มันไม่แสดงผล Markdown Walery Strauchชี้ให้เห็นในความคิดเห็นว่าสัญญาณการจัดรูปแบบ Markdown ที่ฉันเห็นนั้นเป็นกฎองค์ประกอบหลอก CSS:

ถึงกระนั้นฉันจะปล่อยไว้ที่นี่เป็นตัวเลือกเนื่องจากมีบางคนเพิ่มคะแนนคำตอบนี้และอาจมีประโยชน์กับใครบางคน

ฉันใช้โปรแกรมแก้ไขที่เรียบง่ายมากที่อนุญาตให้แก้ไขเนื้อหาของ<textarea>Markdown ในรูปแบบ WYSIWYG

ผมใช้Hallo ฉันไม่คิดว่าเว็บไซต์ของมันทำให้เห็นได้ชัดว่ามันไม่ใช่ตัวแก้ไข Markdown WYSIWYG แต่การสาธิตสร้างเส้นทางให้เป็นหนึ่งเดียว

Halloอนุญาตให้แก้ไข HTML แบบ WYSIWYG ภายในไฟล์<div>. ฉันใช้จาวาสคริปต์เพื่อซ่อน<textarea>บล็อกใด ๆที่มีwysiwygคลาส CSS เฉพาะแทนที่ด้วย a <div>และคัดลอกเนื้อหาของ<textarea>ไฟล์<div>. การคัดลอกทำงานผ่านShowdownซึ่งสร้าง HTML จาก Markdown

รูทีน Javascript อื่นจะตอบสนองทุกครั้งที่มี<div>การเปลี่ยนแปลงเนื้อหา เป็นชุดเนื้อหากลับเข้ามา <textarea>(ตอนนี้ซ่อนไว้) เนื้อหาถูกรันผ่านto-markdownเพื่อแปลงจาก HTML เป็น Markdown

ถ้า<textarea>เป็นฟิลด์ใน a <form> Markdown ที่แก้ไขแล้วจะถูกส่งไปยังเซิร์ฟเวอร์เมื่อส่งแบบฟอร์มนั้น

แรงบันดาลใจนี้มาจากตัวอย่าง Hallo Markdownโดยเฉพาะไฟล์editor.js ผมใช้ที่เป็นพื้นฐานสำหรับสคริปต์ของตัวเองพร้อมกับhallo.js , showdown.jsและการ markdown.js

สคริปต์ที่ฉันwysiwyg.jsเป็นอนุพันธ์ของeditor.jsจากHallo Markdown ตัวอย่าง บางประเด็นที่ควรทราบ:

• ฉันใช้สิ่งนี้ในแอปพลิเคชัน Rails (ไม่ใช่เรื่องสำคัญ)
• มันทำงานบนreadyและต่อpage:loadไปเพราะ Rails ใช้ Turbolinks
• มันทำงานต่อajaxCompleteเนื่องจากฉันใช้ Ajax สำหรับรายงานข้อผิดพลาดแบบฟอร์ม
• มีการอ้างอิงอื่น ๆ : JQueryUIและRangy (ผู้ใช้ Rails สามารถใช้อัญมณีjquery-ui-railและrangy-rail )
• นอกจากนี้Font Awesomeยังใช้สำหรับไอคอนแถบเครื่องมือ เวอร์ชันที่hallo.jsใช้โดยการสาธิตล้าสมัย (ใช้Font Awesomeเวอร์ชันเก่า) ให้ใช้hallo.js จาก GitHubแทน

คุณต้องเพิ่ม CSS class='wysiwyg'ลงในไฟล์ใดก็ได้<textarea>เพื่อเปิดใช้งาน WYSIWYG <textarea>ควร conain ข้อความ Markdown จัดรูปแบบ

ฉันคาดหวังว่าwysiwyg.jsสามารถปรับให้ใช้โปรแกรมแก้ไขอื่นได้อย่างง่ายดายหากคุณไม่ชอบHalloตราบใดที่มันทำงานบน HTML ในไฟล์<div>. มีค่อนข้างน้อยที่จะเลือกจากการไม่ได้ทั้งหมดจะเป็นน้ำหนักเบา แต่Hallo

ชิ้น smilar ของการทำงานที่ผมพบว่าเป็นmarkdown-HTML รูปแบบ ใช้Showdownและto-markdownเดียวกัน

ฉันกำลังมองหาตัวแก้ไข markdown ที่อธิบายไว้ที่ด้านบนของเธรดนี้

คุณเคยเห็น "markdown tools": http://md-wysiwyg.sourceforge.net/

การสาธิต: http://md-wysiwyg.sourceforge.net/cgi-bin/cgi_wysiwyg_test.py/

ดูเหมือนว่าจะค่อนข้างใกล้เคียงกับสิ่งที่เรากำลังมองหา แต่ก็เป็นงานที่สมเหตุสมผลในการใช้ Rich Text และเอาต์พุต markdown อย่างไรก็ตามมันล้มเหลวในข้อยกเว้นการเข้ารหัสเมื่อฉันวาง Rich Text จาก Google เอกสาร