vue2.x中monaco-editor的使用說(shuō)明
更新時(shí)間：2022年08月04日 09:23:50 作者：風(fēng)如也
這篇文章主要介紹了vue2.x中monaco-editor的使用說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
vue2中使用monaco-editor
安裝
注意兩個(gè)庫(kù)的版本指定
npm install monaco-editor@0.30.1 --save-dev npm install monaco-editor-webpack-plugin@6.0.0 --save-dev
配置
vue.config.js中配置
const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin')
module.exports = {
? configureWebpack: {
? ? plugins: [
? ? ? new MonacoWebpackPlugin()
? ? ]
? }
}創(chuàng)建MonacoEditor公共組件
<template> ? <div ref="editorContainer" class="editor"></div> </template>
<script>
import * as monaco from 'monaco-editor';
export default {
? name: 'MonacoEditor',
? data() {
? ? return {
? ? ? code: '',
? ? ? editor: null
? ? }
? },
? mounted() {
? ? this.init()
? },
? methods: {
? ? init() {
? ? ? // 初始化編輯器
? ? ? this.editor = monaco.editor.create(this.$refs.editorContainer, {
? ? ? ? value: this.code,
? ? ? ? language: 'javascript',
? ? ? ? tabSize: 2,
? ? ? ? scrollBeyondLastLine: false,
? ? ? ? automaticLayout: true, // 自動(dòng)布局
? ? ? ? readOnly: false
? ? ? })
? ? ? console.log(this.editor)
? ? ? // 監(jiān)聽(tīng)內(nèi)容變化
? ? ? this.editor.onDidChangeModelContent(() => {
? ? ? })
? ? ? // 監(jiān)聽(tīng)失去焦點(diǎn)事件
? ? ? this.editor.onDidBlurEditorText((e) => {
? ? ? ? console.log(e)
? ? ? });
? ? },
? ? // 獲取編輯框內(nèi)容
? ? getCodeContext() {
? ? ? return this.editor.getValue()
? ? },
? ? // 自動(dòng)格式化代碼
? ? format() {
? ? ? this.editor.trigger('anything', 'editor.action.formatDocument')
? ? ? // 或者
? ? ? // this.editor.getAction(['editor.action.formatDocument']).run()
? ? },
? ? changeEditor() {
? ? ? if (this.editor === null) {
? ? ? ? this.init()
? ? ? }
? ? ? const oldModel = this.editor.getModel()
? ? ? const newModel = monaco.editor.createModel(
? ? ? ? this.code,
? ? ? ? 'javascript'
? ? ? )
? ? ? if (oldModel) {
? ? ? ? oldModel.dispose()
? ? ? }
? ? ? this.editor.setModel(newModel)
? ? }
? }
}
</script><style scoped>
.editor {
? width: 100%;
? min-height: 400px;
}
</style>父組件中使用
<template> ? <div> ? ? <monaco-editor></monaco-editor> ? </div> </template>
<script>
import MonacoEditor from '@/components/MonacoEditor'
export default {
? name: 'Test6',
? components: {
? ? MonacoEditor
? }
}
</script>使用vue-monaco-editor遇到的坑
編輯器重復(fù)加載上次編輯器中的內(nèi)容,不會(huì)被新的內(nèi)容替代
直接上代碼
給MonacoEditor加上屬性key
?? ? ?<MonacoEditor ? ? ? ? width="100%" ? ? ? ? height="537" ? ? ? ? :key="randomkey" ? ? ? ? language="html" ? ? ? ? theme="vs-dark" ? ? ? ? :code="code" ? ? ? > ? ? ? </MonacoEditor>
每次重新給code賦值時(shí)，就重新獲取一次隨機(jī)數(shù)賦值給key
data() {
? ? return {
? ? ? randomkey: 123,
? ? }
? }
methods: {
?? ?// 每次重新給code賦值時(shí)，就重新調(diào)用一下下面這個(gè)方法
?? ?createRandomkey(){
? ? ? this.randomkey = Math.floor(Math.random()*(10,1000000012313))
? ? },
}編輯器editorOptions上的配置無(wú)法生效
<MonacoEditor
? ? ? ? width="100%"
? ? ? ? height="537"
? ? ? ? :key="randomkey"
? ? ? ? language="html"
? ? ? ? theme="vs-dark"
? ? ? ? :code="code"
? ? ? ? :editorOptions="options"
? ? ? ? @mounted="seeOnMounted"
>
// 在data中設(shè)置無(wú)法生效
options: {
? ? ?readOnly: true
},可以在@mounted方法中根據(jù)editor進(jìn)行設(shè)置
seeOnMounted(editor) {
? ? ? this.seeEditor = editor
? ? ? this.seeEditor.updateOptions({
? ? ? ? readOnly: true, //是否只讀
? ? ? })
? ? },以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue.js實(shí)現(xiàn)watch屬性的示例詳解
本文討論了watch函數(shù)是如何利用副作用函數(shù)和options進(jìn)行封裝實(shí)現(xiàn)的，也通過(guò)調(diào)度函數(shù)去控制回調(diào)函數(shù)的立即執(zhí)行和執(zhí)行時(shí)機(jī)，還可以解決競(jìng)態(tài)問(wèn)題，感興趣的可以了解一下2022-04-04
本文通過(guò)實(shí)例代碼給大家介紹了Vue lazyload圖片懶加載的相關(guān)知識(shí)，通過(guò)導(dǎo)入配置等操作src/main.jswenj ,代碼簡(jiǎn)單易懂，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2021-12-12
一步一步實(shí)現(xiàn)Vue的響應(yīng)式(對(duì)象觀(guān)測(cè))
這篇文章主要介紹了一步一步實(shí)現(xiàn)Vue的響應(yīng)式(對(duì)象觀(guān)測(cè))，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
vue+elemen實(shí)現(xiàn)el-tooltip在文本超出區(qū)域后浮現(xiàn)
el-tooltip組件本身就是懸浮提示功能,在對(duì)它進(jìn)行二次封裝時(shí),實(shí)現(xiàn)超出的文本浮現(xiàn),本文就來(lái)介紹一下vue+elemen實(shí)現(xiàn)el-tooltip在文本超出區(qū)域后浮現(xiàn),感興趣的可以了解一下2023-12-12
Vue中請(qǐng)求本地JSON文件并返回?cái)?shù)據(jù)的方法實(shí)例
在前端開(kāi)發(fā)過(guò)程當(dāng)中,當(dāng)后臺(tái)服務(wù)器開(kāi)發(fā)數(shù)據(jù)還沒(méi)完善,沒(méi)法與咱們交接時(shí),咱們習(xí)慣在本地寫(xiě)上一個(gè)json文件做模擬數(shù)據(jù)測(cè)試代碼效果是否有問(wèn)題,下面這篇文章主要給大家介紹了關(guān)于Vue中請(qǐng)求本地JSON文件并返回?cái)?shù)據(jù)的相關(guān)資料,需要的朋友可以參考下2022-08-08
vue 中監(jiān)聽(tīng)生命周期事件的操作方式
vue2 提供了一些生命周期事件的方式,在組件銷(xiāo)毀后觸發(fā)一個(gè)事件,父組件可監(jiān)聽(tīng)到該事件,然后執(zhí)行某些操作,這篇文章主要介紹了vue 中監(jiān)聽(tīng)生命周期事件的操作方式,需要的朋友可以參考下2024-06-06
Vue收集依賴(lài)與觸發(fā)依賴(lài)源碼刨析
vue對(duì)依賴(lài)的管理使用的是發(fā)布訂閱者模式，其中watcher扮演訂閱者，Dep扮演發(fā)布者。所以dep中會(huì)有多個(gè)watcher，一個(gè)訂閱者也可以有多個(gè)發(fā)布者(依賴(lài))?？偣踩齻€(gè)過(guò)程：定義依賴(lài)、收集依賴(lài)、觸發(fā)依賴(lài)。下面開(kāi)始詳細(xì)講解三個(gè)過(guò)程2022-10-10
vue動(dòng)態(tài)綁定v-model屬性名方式
這篇文章主要介紹了vue動(dòng)態(tài)綁定v-model屬性名方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
vue實(shí)現(xiàn)圖片預(yù)覽組件封裝與使用
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)圖片預(yù)覽組件封裝與使用，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-07-07
詳解vue 動(dòng)態(tài)加載并注冊(cè)組件且通過(guò) render動(dòng)態(tài)創(chuàng)建該組件
這篇文章主要介紹了vue 動(dòng)態(tài)加載并注冊(cè)組件且通過(guò) render動(dòng)態(tài)創(chuàng)建該組件,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-05-05