HTML 編輯器 · UIkit 中文文檔

# HTML 編輯器創建可以實時預覽并且帶有語法高亮的富文本編輯器或Markdown編輯器。這個HTML編輯器可以你在輸入HTML或Markdown時，生成實時預覽。它包含一個工具欄，幫助你無需任何代碼就能進行文本的編輯、添加鏈接、圖片、引用和列表等。本編輯器還為HTML代碼和Markdown代碼提供了語法高亮，并且你還能切換全屏模式，讓你可以不受任何干擾專注于內容的撰寫。 * * * ## 用法使用這個組件，你首先必須引入必要的 [CodeMirror](http://codemirror.net/) 和 [marked](https://github.com/chjj/marked) 依賴。要實現它，只需要在項目的header加入適當的腳本代碼就行。注意使用此組件需要額外添加 `htmleditor.css` 文件，在`css/components`文件夾中。此組件需要額外添加 `htmleditor.js` 文件，在`js/components`文件夾中。 ``` <!DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" href="uikit.min.css" /> <script src="jquery.js"></script> <script src="uikit.min.js"></script>  <link rel="stylesheet" href="codemirror/lib/codemirror.css"> <script src="codemirror/lib/codemirror.js"></script> <script src="codemirror/mode/markdown/markdown.js"></script> <script src="codemirror/addon/mode/overlay.js"></script> <script src="codemirror/mode/xml/xml.js"></script> <script src="codemirror/mode/gfm/gfm.js"></script> <script src="marked.js"></script>  <link rel="stylesheet" href="htmleditor.css"> <script src="htmleditor.js"></script> </head> <body> </body> </html> ``` 最后，再為 `<textarea>` 元素添加 `data-uk-htmleditor` 屬性就行了！。 ### Example ![](https://box.kancloud.cn/2016-05-12_57346f3d97c42.jpg) ### Markup ``` <textarea data-uk-htmleditor>...</textarea> ``` * * * ## Markdown 還可以在HTML編輯器中編寫Markdown。只需為data屬性添加 `markdown:true` 選項就行。 ### Example ![](https://box.kancloud.cn/2016-05-12_57346f3db2943.jpg) ### Markup ``` <textarea data-uk-htmleditor="{markdown:true}">...</textarea> ``` * * * ## 選項卡模式也可以在Markdown與預覽模式之間進行切換。只需添加 `data-uk-htmleditor="{mode:'tab'}` 屬性。 ### Example ![](https://box.kancloud.cn/2016-05-12_57346f3dcf0f2.jpg) ### Markup ``` <textarea data-uk-htmleditor="{mode:'tab'}">...</textarea> ``` * * * ## JavaScript 選項這是如何通過屬性設置選項的例子： ``` data-uk-htmleditor="{mode:'split', maxsplitsize:600}" ``` | 選項 | 可用值 | 默認值 | 描述 | | --- | --- | --- | --- | | `mode` | 'split', 'tab' | 'split' | 視圖模式 | | `toolbar` | Array | [ "bold", "italic", "strike", "link", "picture", ... ] | 工具欄上顯示的按鈕列表 | | `maxsplitsize` | integer | 1000 | 觸發由分割模式切換到選項卡模式的響應式行為的最小瀏覽器視口寬度。 | | `lblPreview` | 任意 string | 'Preview' | 預覽模式的標簽字符串（Label string） | | `lblCodeview` | 任意 string | 'Markdown' | 代碼模式的標簽字符串（Label string） | ### 手動初始化 ``` var htmleditor = UIkit.htmleditor(textarea, { /* options */ }); ```