vue3使用monaco editor踩坑记——getValue()导致页面卡住
vue3使用monaco editor,调用getValue()方法卡住!vue3踩坑记!
·
vue3 使用monaco editor踩坑记——getValue()导致页面卡住
最近开始在实验室打工,需要调研代码编辑器,我在网上经过查找决定使用monaco editor,但是在vue3的环境下狠狠地踩坑了!!!每次调用getValue()获取编辑器内容都卡住!
前端框架
使用Vue
,版本为@vue/cli 4.5.14
安装
npm install monaco-editor@0.27.0 --save // 此版本亲测有效
npm install monaco-editor-webpack-plugin --save
使用
可以直接在component中导入使用,不需要在main.js引入
// 某个component页面
<div id="codeEditBox"></div>
// script 标签中
import * as monaco from 'monaco-editor'
import { ref } from 'vue'
import $ from 'jquery'
export default{
setup() {
const editor = ref(null)
const initEditor = () => {
// 初始化编辑器,确保dom已经渲染
editor.value = monaco.editor.create(document.getElementById('codeEditBox'), {
value: '', //编辑器初始显示文字
language:'java', //语言支持自行查阅demo
theme:'vs-dark', //官方自带三种主题vs, hc-black, or vs-dark
selectOnLineNumbers: true,//显示行号
roundedSelection: false,
readOnly: false, // 只读
cursorStyle: 'line', //光标样式
automaticLayout: false, //自动布局
glyphMargin: true, //字形边缘
useTabStops: false,
fontSize: 18, //字体大小
autoIndent:true, //自动布局
quickSuggestionsDelay: 100, //代码提示延时
});
// 监听值的变化
editor.value.onDidChangeModelContent((event) => {
console.log(event)
});
}
$(document).ready(function () {
initEditor()
})
const getVal = () => {
return editor.value.getValue(); //获取编辑器中的文本
}
return {
editor,
getVal
}
},
}
// style 标签中
#codeEditBox {
width:100%;
height:200px;
}
运行
前端确实是顺利运行了,而且没有报错,也可以在代码编辑器中输入,但是每次调用getVal()方法就卡住
const getVal = () => {
return editor.value.getValue(); //获取编辑器中的文本
}
排错 + 解决
一开始我感觉可能是安装的 monaco-editor
和 monaco-editor-webpack-plugin
版本的问题,但是经过不停换版本,发现应该不是这个问题。
最后认为是vue3的问题,网上使用monaco-editor都是在vue2的环境下,最后阅读官网发现确实是这个地方出了问题。
修改
// script 标签中
import { toRaw } from 'vue'
const getVal = () => {
return toRaw(editor.value).getValue(); //获取编辑器中的文本
}
使用Vue3的toRaw(),拿到原始数据,对原始数据进行修改,不会被追踪,不会更新UI界面~
更多推荐
已为社区贡献4条内容
所有评论(0)