tui.editor

GFM Markdown และ WYSIWYG Editor - มีประสิทธิผลและขยายได้

สารบัญ

• แพ็คเกจ
• ทำไมต้องเป็นตัวแก้ไข Toast UI?
• คุณสมบัติ
• ตัวอย่าง
• การสนับสนุนเบราว์เซอร์
• ดึงขั้นตอนการร้องขอ
• การบริจาค
• Toast UI ครอบครัว
• ใช้โดย
• ใบอนุญาต

- แพ็คเกจ

Toast UI Editor

ชื่อ	คำอธิบาย
@toast-ui/editor	ส่วนประกอบจาวาสคริปต์ธรรมดา

เสื้อคลุมของ Toast UI Editor

ชื่อ	คำอธิบาย
@toast-ui/react-editor	ส่วนประกอบ wrapper ตอบสนอง
@toast-ui/vue-editor	ส่วนประกอบ Vue wrapper

ปลั๊กอินของ Toast UI Editor

ชื่อ	คำอธิบาย
@toast-ui/editor-plugin-chart	ปลั๊กอินเพื่อแสดงผล
@toast-ui/editor-plugin-code-syntax-highlight	ปลั๊กอินเพื่อเน้นไวยากรณ์รหัส
@toast-ui/editor-plugin-color-syntax	ปลั๊กอินเพื่อแก้ไขสี
@toast-ui/editor-plugin-table-merged-cell	ปลั๊กอินเพื่อรวมคอลัมน์ตาราง
@toast-ui/editor-plugin-uml	ปลั๊กอินเพื่อแสดงผล UML

- ทำไมต้องเป็นตัวแก้ไข Toast UI?

Toast UI Editor มี โหมด Markdown และ WYSIWYG ขึ้นอยู่กับประเภทของการใช้งานที่คุณต้องการเช่นการผลิต markdown หรืออาจจะแก้ไข markdown ตัวแก้ไข Toast UI จะเป็นประโยชน์สำหรับการใช้งานทั้งสอง มันมี โหมด Markdown และ โหมด WYSIWYG ซึ่งสามารถเปลี่ยนจุดใดก็ได้ในเวลา

โหมด Markdown ที่มีประสิทธิผล

ข้อมูลจำเพาะของ Commonmark + GFM

วันนี้ Commonmark เป็นมาตรฐาน de-facto markdown GFM (markdown ปรุงแต่งปรุงรส GitHub) เป็นข้อกำหนดที่ได้รับความนิยมอีกอย่างหนึ่งตาม Commonmark - ดูแลโดย GitHub ซึ่งเป็น markdown ที่ใช้เป็นส่วนใหญ่ Toast UI Editor เป็นไปตามข้อกำหนดของ Commonmark และ GFM เขียนเอกสารได้อย่างง่ายดายโดยใช้เครื่องมือที่มีประสิทธิผลโดย Toast UI Editor และคุณสามารถเปิดเอกสารที่ผลิตได้อย่างง่ายดายทุกที่ที่รองรับข้อมูลจำเพาะ

• ตัวอย่างสด : แก้ไข markdown ในขณะที่จับตาดู HTML ที่แสดงผล การแก้ไขของคุณจะถูกนำไปใช้ทันที
• Scroll Sync : การเลื่อนแบบซิงโครนัสระหว่าง markdown และ Preview คุณไม่จำเป็นต้องเลื่อนดูแต่ละอันแยกกัน
• ไฮไลต์ไวยากรณ์ : คุณสามารถตรวจสอบไวยากรณ์ Markdown ที่เสียได้ทันที

โหมด Wysiwyg ง่ายๆ

• ตาราง : ผ่านเมนูบริบทของตารางคุณสามารถเพิ่มหรือลบคอลัมน์หรือแถวของตารางและคุณยังสามารถจัดเรียงข้อความในเซลล์ได้
• ตัวแก้ไขบล็อกที่กำหนดเอง : พื้นที่บล็อกที่กำหนดเองสามารถแก้ไขได้ผ่านตัวแก้ไขภายใน
• คัดลอกและวาง : วางอะไรจากเบราว์เซอร์, ภาพหน้าจอ, Excel, PowerPoint ฯลฯ

UI

• แถบเครื่องมือ : ผ่านแถบเครื่องมือคุณสามารถจัดสไตล์หรือเพิ่มองค์ประกอบในเอกสารที่คุณแก้ไข

• ธีมมืด : คุณสามารถใช้ธีมมืด

การใช้ฟังก์ชั่นเพิ่มเติมต่าง ๆ - ปลั๊กอิน

Commonmark และ GFM นั้นยอดเยี่ยม แต่เรามักจะต้องการสิ่งที่เป็นนามธรรมมากขึ้น ตัวแก้ไข Toast UI มาพร้อมกับ ปลั๊กอิน ที่ทรงพลังตามไวยากรณ์ของ Markdown

ปลั๊กอินพื้นฐานห้ารายการ มีดังนี้และสามารถดาวน์โหลดและใช้กับ NPM ได้

• chart : บล็อกรหัสที่ทำเครื่องหมายว่าเป็น 'แผนภูมิ' จะทำให้แผนภูมิ UI Toast UI
• code-syntax-highlight : เน้นพื้นที่บล็อกรหัสที่สอดคล้องกับภาษาที่จัดทำโดย prism.js
• color-syntax : การใช้ Toast UI Colorpicker คุณสามารถเปลี่ยนสีของข้อความการแก้ไขด้วย GUI
• table-merged-cell : คุณสามารถรวมคอลัมน์ของส่วนหัวของตารางและพื้นที่ร่างกาย
• uml : บล็อกรหัสที่ทำเครื่องหมายเป็น 'UML' จะแสดงไดอะแกรม UML

- คุณสมบัติ

• Viewer: รองรับโหมดเพื่อแสดงข้อมูล markdown โดยไม่มีพื้นที่แก้ไข
• ความเป็นสากล (I18N): สนับสนุนภาษาอังกฤษ, ดัตช์, เกาหลี, ญี่ปุ่น, จีน, สเปน, เยอรมัน, รัสเซีย, ฝรั่งเศส, ยูเครน, ตุรกี, ฟินแลนด์, เช็ก, อาหรับ, โปแลนด์, กาลิเซีย, สวีเดน, อิตาลี, นอร์เวย์, โครเอเชีย + ภาษา
• วิดเจ็ต: คุณสมบัตินี้ช่วยให้คุณกำหนดค่ากฎที่แทนที่การจับคู่สตริงกับ RegExp เฉพาะด้วยโหนดวิดเจ็ต
• บล็อกที่กำหนดเอง: โหนดที่ไม่รองรับโดย Markdown สามารถกำหนดได้ผ่านบล็อกที่กำหนดเอง คุณสามารถแสดงโหนดสิ่งที่คุณต้องการผ่านการเขียนตรรกะการแยกวิเคราะห์ด้วยบล็อกที่กำหนดเอง

- ตัวอย่าง

• ขั้นพื้นฐาน
• ผู้ชม
• ใช้ปลั๊กอินทั้งหมด
• การสร้างปลั๊กอินของผู้ใช้
• ปรับแต่งปุ่ม toobar
• ความเป็นสากล (I18N)

นี่คือตัวอย่างเพิ่มเติมและเล่นกับโปรแกรมแก้ไข Toast UI!

- การสนับสนุนเบราว์เซอร์

โครเมี่ยม	Internet Explorer	ขอบ	ซาฟารี	Firefox
ใช่	11+	ใช่	ใช่	ใช่

- ดึงขั้นตอนการร้องขอ

ผลิตภัณฑ์ Toast UI เป็นโอเพ่นซอร์สดังนั้นคุณสามารถสร้างคำขอดึง (PR) หลังจากที่คุณแก้ไขปัญหา เรียกใช้สคริปต์ NPM และพัฒนาตัวเองด้วยกระบวนการต่อไปนี้

การตั้งค่า

แยกสาขา main ในที่เก็บส่วนตัวของคุณ โคลนกับคอมพิวเตอร์ท้องถิ่น ติดตั้งโมดูลโหนด ก่อนเริ่มการพัฒนาคุณควรตรวจสอบว่ามีข้อผิดพลาดหรือไม่

$ git clone https://github.com/{your-personal-repo}/tui.editor.git
$ npm install
$ npm run build toastmark
$ npm run test editor

Toast UI Editor ใช้ NPM Workspace ดังนั้นคุณต้องตั้งค่าสภาพแวดล้อมตาม NPM7 หากใช้การโค่นล้มการพึ่งพาจะต้องติดตั้งโดยการเคลื่อนย้ายเส้นทางโดยตรงต่อแพ็คเกจ

พัฒนา

คุณสามารถดูรหัสของคุณได้ทันทีที่คุณบันทึกรหัสโดยเรียกใช้เซิร์ฟเวอร์ อย่าพลาดการเพิ่มกรณีทดสอบแล้วทำสิทธิสีเขียว

เรียกใช้ Snowpack-Dev-Server

Snowpack ช่วยให้คุณเรียกใช้เซิร์ฟเวอร์การพัฒนาโดยไม่ต้องรวมกัน

$ npm run serve editor

เรียกใช้ webpack-dev-server

หากจำเป็นต้องมีการทดสอบเบราว์เซอร์แบบดั้งเดิมเซิร์ฟเวอร์การพัฒนายังสามารถทำงานได้โดยใช้ webpack

$ npm run serve:ie editor

รันทดสอบ

$ npm test editor

ดึงคำขอ

ก่อนที่จะอัปโหลด PR ของคุณให้รันทดสอบหนึ่งครั้งเพื่อตรวจสอบว่ามีข้อผิดพลาดใด ๆ หากไม่มีข้อผิดพลาดให้กดแล้วผลักมัน!

สำหรับข้อมูลเพิ่มเติมเกี่ยวกับขั้นตอนของ PR โปรดดูลิงก์ในส่วนที่มีส่วนร่วม

การบริจาค

• จรรยาบรรณ
• แนวทางที่มีส่วนร่วม
• ประชุมอนุสัญญา
• แนวทางการออก

- Toast UI ครอบครัว

• ปฏิทิน UI Toast
• แผนภูมิ UI Toast
• กริด toast ui
• Toast UI image image image
• ขนมปังปิ้ง UI

ใช้โดย

• NHN DOORAY! - บริการการทำงานร่วมกัน (โครงการ, Messenger, Mail, Calendar, Drive, Wiki, ผู้ติดต่อ)
• UNOTES - ส่วนขยายรหัส Visual Studio

ใบอนุญาต

ซอฟต์แวร์นี้ได้รับอนุญาตภายใต้ MIT © NHN Cloud