tui.editor

GFM Markdown和Wysiwyg編輯 - 富有成效且可擴展的

目錄

• 軟件包
• 為什麼要敬酒UI編輯器？
• 特徵
• 例子
• 瀏覽器支持
• 拉請求步驟
• 貢獻
• 吐司UI家族
• 使用
• 執照

？軟件包

Toast UI編輯器

姓名	描述
@toast-ui/editor	普通的JavaScript組件

Toast UI編輯的包裝紙

姓名	描述
@toast-ui/react-editor	React包裝器組件
@toast-ui/vue-editor	VUE包裝器組件

Toast UI編輯器的插件

姓名	描述
@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

？為什麼要敬酒UI編輯器？

Toast UI編輯器提供降級模式和Wysiwyg模式。取決於您想要的使用類型，例如生產Markdown或僅編輯Markdown 。 Toast UI編輯器對兩種用法都有幫助。它提供了降價模式和Wysiwyg模式，可以切換任何時間點。

生產性降價模式

CONCORMARK + GFM規格

如今， Commonmark是事實上的降價標準。 GFM（GitHub風味降價）是另一個基於CONCORMARK的流行規範 - 由GitHub維護，這是大多數使用的Markdown 。 Toast UI編輯器均遵循CONCORMARK和GFM規格。使用Toast UI編輯器提供的生產工具輕鬆編寫文檔，您可以在支持規格的任何地方輕鬆打開生產的文檔。

• 實時預覽：編輯降價，同時關注渲染的HTML。您的編輯將立即應用。
• 滾動同步：在Markdown和Preview之間進行同步滾動。您無需單獨滾動每個。
• 語法亮點：您可以立即檢查損壞的標記語法。

簡單的Wysiwyg模式

• 表：通過表的上下文菜單，您可以添加或刪除表的列或行，也可以在單元格中排列文本。
• 自定義塊編輯器：可以通過內部編輯器編輯自定義塊區域。
• 複製和粘貼：粘貼瀏覽器，屏幕截圖，Excel，PowerPoint等的任何內容。

UI

• 工具欄：通過工具欄，您可以在您要編輯的文檔中進行樣式或添加元素。

• 黑暗主題：您可以使用深色主題。

使用各種擴展功能 - 插件

CommonMark和GFM很棒，但是我們通常需要更多的抽象。 Toast UI編輯器配備了功能強大的插件，該插件符合Markdown語法。

提供了五個基本插件，如下所示，可以與NPM一起下載和使用。

• chart ：標記為“圖表”的代碼塊將呈現Toast UI圖表。
• code-syntax-highlight ：突出顯示與Prism.js提供的語言相對應的代碼塊區域。
• color-syntax ：使用Toast UI ColorPicker，您可以使用GUI更改編輯文本的顏色。
• table-merged-cell ：您可以合併表標頭和車身區域的列。
• uml ：標記為“ UML”的代碼塊將呈現UML圖。

？特徵

• 查看器：支持一種僅顯示無編輯區域的標記數據的模式。
• 國際化（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編輯器使用NPM工作區，因此您需要基於NPM7設置環境。如果使用顛覆，則必須通過每個軟件包移動直接路徑來安裝依賴項。

發展

您可以通過運行服務器保存代碼後立即看到代碼。不要錯過添加測試案例，然後獲得綠色權利。

運行Snowpack-Dev服務器

Snowpack允許您在不捆綁的情況下運行開發服務器。

$ npm run serve editor

運行webpack-dev-server

如果需要測試舊版瀏覽器，則仍然可以使用WebPack運行開發服務器。

$ npm run serve:ie editor

運行測試

$ npm test editor

拉請求

在上傳PR之前，最後一次運行測試以檢查是否存在任何錯誤。如果沒有錯誤，請提交然後推開！

有關PR步驟的更多信息，請參閱“貢獻”部分中的鏈接。

貢獻

• 行為守則
• 貢獻指南
• 提交約定
• 發行指南

？吐司UI家族

• 吐司UI日曆
• 吐司UI圖表
• 吐司UI網格
• 吐司UI圖像編輯器
• 吐司UI組件

使用

• NHN門！ - 協作服務（項目，Messenger，郵件，日曆，驅動器，Wiki，聯繫人）
• UNOTES-視覺工作室代碼擴展

執照

該軟件在MIT©NHN Cloud下獲得許可。