wangEditor文本編輯器代碼高亮教學(xué)

wangEditor富文本編輯器是一款基于javascript和css開發(fā)的 Web編輯器， 輕量、簡潔、易用、開源免費，對于富文本編輯器來說，也是20%的功能滿足80%的需求，剩下的80%的功能只是為了那20%的需求。我要做的就是這20%的功能，去滿足大家80%的需求。如果你想要大而全富爾美，那么wangEditor滿足不了你（這會讓你付出很多代價）；如果你想用最快的方式滿足你最主要的需求，那就請使用wangEditor。

wangEditor文本編輯器代碼高亮教學(xué)圖1

兼容常見的 PC 瀏覽器：Chrome，Firefox，Safari，Edge，QQ 瀏覽器，IE11。不支持移動端。

代碼高亮

wangEditoor中的"插入代碼"菜單模塊，支持通過引入 highlight js 插件實現(xiàn)代碼高亮的樣式功能.并且提供多種樣式支持. 編輯器默認(rèn)不帶有 highlight，您需要手動安裝高亮插件.

1.獲取highlight實例

import hljs from 'highlight.js'

(cdn引入，highlight 實例 "hljs"會聲明到window下，直接調(diào)用即可)

掛載設(shè)置代碼如下

const E = window.wangEditorconst editor = new E('#div1')

// 掛載highlight插件

editor.highlight = hljs

editor.create()

2.css的引入

npm方式

import 'highlight.js/styles/monokai_sublime.css'

CDN引入

<link href="http://cdn.bootcss.com/highlight.js/8.0/styles/monokai_sublime.min.css" rel="stylesheet"

完成以上所有步驟之后，再次使用wangEditor中的 插入代碼 功能，就能夠有高亮效果了，如圖所示

wangEditor文本編輯器代碼高亮教學(xué)圖2

當(dāng)您在讀取文本數(shù)據(jù)作展示時，展示頁面需要引入highlight插件的樣式

(安裝方式與富文本頁面引入highlight相同，不再贅述)

插入代碼的配置項

1.languageType

languageType字段為插入代碼時，select框的選項值，我們以為您默認(rèn)填寫了大部分語言類型，如您還有更多需求，可以對此字段的數(shù)組進行修改.

wangEditor文本編輯器代碼高亮教學(xué)圖3

2.languageTab

插入代碼后，您可以在灰色的代碼框內(nèi)對代碼文本進行修改. 由于各瀏覽器環(huán)境的不同，我們對tab鍵行為進行統(tǒng)一處理，您可以通過修改languageTab字段對按下tab "鍵入的字符" 進行修改，默認(rèn)為四個全角空格.

wangEditor文本編輯器代碼高亮教學(xué)圖4

配置全屏功能

配置屬性

編輯器創(chuàng)建之前，可以使用 editor.config.showFullScreen = true 來展示全屏功能按鈕，默認(rèn)是true，就是不加這個屬性默認(rèn)展示全屏功能按鈕

注意：工具欄和編輯器區(qū)域分離的時候不支持全屏功能

wangEditor文本編輯器代碼高亮教學(xué)圖5

配置服務(wù)端接口

v4.6.3 開始支持上傳視頻。

【注意】如果上傳視頻遇到問題，請打開瀏覽器開發(fā)者工具，查看 console.error 輸出的錯誤信息。

配置接口

const E = window.wangEditorconst editor = new E('#div1')