vue2.x中monaco-editor的使用說明
更新時間：2022年08月04日 09:23:50 作者：風(fēng)如也
這篇文章主要介紹了vue2.x中monaco-editor的使用說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
vue2中使用monaco-editor
安裝
注意兩個庫的版本指定
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, // 自動布局
? ? ? ? readOnly: false
? ? ? })
? ? ? console.log(this.editor)
? ? ? // 監(jiān)聽內(nèi)容變化
? ? ? this.editor.onDidChangeModelContent(() => {
? ? ? })
? ? ? // 監(jiān)聽失去焦點事件
? ? ? this.editor.onDidBlurEditorText((e) => {
? ? ? ? console.log(e)
? ? ? });
? ? },
? ? // 獲取編輯框內(nèi)容
? ? getCodeContext() {
? ? ? return this.editor.getValue()
? ? },
? ? // 自動格式化代碼
? ? 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)容,不會被新的內(nèi)容替代
直接上代碼
給MonacoEditor加上屬性key
?? ? ?<MonacoEditor ? ? ? ? width="100%" ? ? ? ? height="537" ? ? ? ? :key="randomkey" ? ? ? ? language="html" ? ? ? ? theme="vs-dark" ? ? ? ? :code="code" ? ? ? > ? ? ? </MonacoEditor>
每次重新給code賦值時，就重新獲取一次隨機數(shù)賦值給key
data() {
? ? return {
? ? ? randomkey: 123,
? ? }
? }
methods: {
?? ?// 每次重新給code賦值時，就重新調(diào)用一下下面這個方法
?? ?createRandomkey(){
? ? ? this.randomkey = Math.floor(Math.random()*(10,1000000012313))
? ? },
}編輯器editorOptions上的配置無法生效
<MonacoEditor
? ? ? ? width="100%"
? ? ? ? height="537"
? ? ? ? :key="randomkey"
? ? ? ? language="html"
? ? ? ? theme="vs-dark"
? ? ? ? :code="code"
? ? ? ? :editorOptions="options"
? ? ? ? @mounted="seeOnMounted"
>
// 在data中設(shè)置無法生效
options: {
? ? ?readOnly: true
},可以在@mounted方法中根據(jù)editor進(jìn)行設(shè)置
seeOnMounted(editor) {
? ? ? this.seeEditor = editor
? ? ? this.seeEditor.updateOptions({
? ? ? ? readOnly: true, //是否只讀
? ? ? })
? ? },以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue使用keep-alive如何實現(xiàn)多頁簽并支持強制刷新
這篇文章主要介紹了vue使用keep-alive如何實現(xiàn)多頁簽并支持強制刷新，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要介紹了詳解如何在vue項目中引入elementUI組件,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-02-02
今天小編就為大家分享一篇關(guān)于vue-router實現(xiàn)嵌套路由的講解，小編覺得內(nèi)容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧2019-01-01
Vue監(jiān)控路由與路由參數(shù), 刷新當(dāng)前頁面數(shù)據(jù)的方法匯總
這篇文章主要介紹了Vue監(jiān)控路由與路由參數(shù), 刷新當(dāng)前頁面數(shù)據(jù)的幾種方法,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2023-10-10
這篇文章主要介紹了輕松實現(xiàn)一個簡單的vue公式編輯器組件示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2024-01-01
本篇文章主要介紹了手把手教你使用vue-cli腳手架(圖文解析)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11
這篇文章主要為大家介紹了vue3中的非父子組件傳值，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-12-12
網(wǎng)頁截圖與截屏功能在許多Web應(yīng)用程序中都非常有用,Vue.js作為一個流行的JavaScript框架,提供了許多工具和庫來簡化網(wǎng)頁截圖和截屏的實現(xiàn),本文將介紹如何使用Vue來實現(xiàn)一個網(wǎng)頁截圖和截屏功能的示例,包括使用html2canvas庫和vue-cropper庫,需要的朋友可以參考下2023-10-10
Axios提供了取消請求的功能,可以通過使用CancelToken來實現(xiàn),這篇文章主要給大家介紹了關(guān)于axios取消請求CancelToken的用法,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-10-10
這篇文章主要介紹了Vue中的生命周期詳細(xì)解讀,每個 Vue 組件實例在創(chuàng)建時都需要經(jīng)歷一系列的初始化步驟，比如設(shè)置好數(shù)據(jù)偵聽，編譯模板，掛載實例到 DOM，以及在數(shù)據(jù)改變時更新 DOM,需要的朋友可以參考下2023-08-08