Vue專案中使用高亮編輯器（Monaco）

安裝使用 monaco-editor-webpack-plugin

雖然作為後台開發，但是前後端都是需要懂一些的～

那麼問題來了，最近在寫前端的過程中有這麼乙個需求，需要對網頁中的json進行高亮顯示，考慮到自己手動通過匹配修改dom會花費很多時間，於是靈（準）機（備）一（偷）動（懶），通過直接在網頁內嵌入**編輯器實現高亮（順便還提供了許多額外的功能，哈哈）

然而配置過程並沒有想象中那麼順利，這裡記錄配置的過程以及一些遇到的坑，方便以後在遇到時可以愉快的繞過去，前端使用vue，版本2.5.17。

下面開始進入正題～

本人期間一共就調研了2款web**編輯器（如果第乙個部署成功就沒有第二個了……）

首先，兩款編輯器在本地都是能夠成功配置執行的，由於只有monaco成功部署了，那麼這裡主要講講為什麼ace部署失敗，以及vue中搭載monaco編輯器的一些編碼配置細節。

想要嘗試vue中使用ace編輯器的小夥伴可以參考這篇文章

ace部署失敗主要原因是不支援webpack打包，ace在本地搭建完成後，會有乙個小型的worker幫助我們對內容進行渲染，webpack打包之後就變成完完全全的靜態資源了，動態渲染的效果也就沒了（按找官網的意思是可以支援的，但是我實踐了很多方法，均以失敗告終），而monaco幫助我們解決了這個問題。

網上有很多封裝好的monaco元件，看的頭疼，個人不推薦大家使用那些元件，可維護性不佳。

npm install monaco-editor -s

等待安裝完畢，現在我們就可以開始正式的配置了

本人傾向於將monaco封裝成元件後在進行使用，在vue專案中新建乙個.vue檔案，我在這裡直接命名為monacoeditor.vue，html模版內容如下：

>
class
="monaco-container"
>
ref=
"container"
class
="monaco-editor"
>
div>
div>
template
>
可以看到標籤非常的簡單～
接著，我們繼續在js**部分進行編寫
import
*as monaco from
'monaco-editor'

monacoeditor接受從父元件傳遞下來的資料，在props中配置如下：

props:},
readonly:},
// 主要配置
editoroptions:}}
}

選擇在頁面渲染時初始化monaco例項

mounted()
)}

這裡的this.$refs.container拿到的上html模版中的標記ref為container的dom節點，不推薦在dom中使用id，可能會導致後期打包出現問題。

至此乙個簡陋的編輯器元件就完成了: )

這裡選擇將其註冊為乙個全域性的元件供專案使用，新建乙個install.js，寫入如下內容：

import monaco from
'path / of / your / monacoeditor.vue'
// 這裡匯入檔名不帶字尾亦可
export
default
}

在main.js中新增如下**：

import componentsinstall from
'path / of / your /install.js'
vue.
use(componentsinstall)

我們在父元件這麼呼叫它

:codes
="content"
:readonly
="false"
>
monaco
>

至此，乙個簡單的monaco編輯器元件嵌入就完成了。

下面針對一些場景對這個元件做一些優化

:codes
="content"
:current
="current"
>
monaco
>

// monacoeditor.vue //.. props: //.. //.. watch:

},

其中setvalue是乙個較為重要的函式，顧名思義，他可以根據傳遞進來的引數值設定編輯器中初始呈現的內容。

mounted())},

其中ondidchangemodelcontent為monaco例項所帶的方法，event是乙個imodelcontentchangedevent物件，他包含了非常非常詳細的變更資訊，包括操作的型別（撤銷、恢復，還是手動輸入引發的文字變更），變更的文字位置，變更的文字內容等。

這裡有個小坑，由於無法通過v-model繫結codes值，所以通過上述**來更新值。

這個外掛程式幫助我們解決了webpack在打包過程中可能會遇到的很多問題，這些問題在這篇文章中有比較詳細的解釋，本篇中不做過多重複的介紹。

npm install monaco-editor-webpack-plugin -s

安裝完成後，在vue.config.js新增如下配置內容（若無此檔案，則自己新建乙個）

const monacowebpackplugin =
require
('monaco-editor-webpack-plugin'
)module.exports =
}

本地除錯完成以後webpack打包部署，沒有問題～來看看最終的效果：

ok～大功告成～：）

Vue專案中使用高亮編輯器（Monaco）

專案中使用富文字編輯器

vue專案中使用百度富文字編輯器ueditor

vue專案中使用jQuery

Vue專案中使用高亮編輯器（Monaco）

專案中使用富文字編輯器

vue專案中使用百度富文字編輯器ueditor

vue專案中使用jQuery

相關推薦