最近自己写的monaco编辑器demo
我想要在1里面点击,然后2里面展示js代码,在3里面运行
1.首先是左边的tree,我用的是element ui,el-tree组件,通过axios获取本地的json,
使点击每个label时,展示出js代码
json数据:
[
{
"id": "1",
"label": "测试1",
"js": "function boxClick() { alert('1') }",
"children": [
{
"id": "1-1",
"label": "测试1-1",
"js": "function boxClick() { alert('1-1') }"
}
]
},
{
"id": "2",
"label": "测试2",
"js": "function boxClick() { alert('2') }",
"children": [
{
"id": "2-1",
"label": "测试2-1",
"js": "function boxClick() { alert('2-1') }",
"children": [
{
"id": "2-1-1",
"label": "2-1-1",
"js": "function boxClick() { alert('2-1-1') }"
}
]
},
{
"id": "2-2",
"label": "测试2-2",
"js": "function boxClick() { alert('2-2') }",
"children": [
{
"id": "2-2-1",
"label": "2-2-1",
"js": "function boxClick() { alert('2-2-1') }"
}
]
}
]
}
]
const handleNodeClick = (data)=> {
document.getElementById('codeBox').innerHTML = ''
dataList.contentValue = data.js
initEditor()
}
这里的
document.getElementById('codeBox').innerHTML = ''
是清空monaco使用的
2.引入monaco
首先是安装(这里webpack和vite插件都安装了)
npm install monaco-editor@0.33.0 --save
npm install monaco-editor-webpack-plugin@7.0.1 --save
npm install --save-dev vite-plugin-monaco-editor@1.0.10
然后在vite.config.js里面配置
然后再页面里面引入
import * as monaco from 'monaco-editor'
初始化monaco编辑器,然后initEditor()放在onMounted里面
const initEditor = () => {
// 初始化编辑器,确保dom已经渲染
editor.value = monaco.editor.create(document.getElementById('codeBox'), {
theme: 'vs-dark', //官方自带三种主题vs, hc-black, or vs-dark
value: dataList.contentValue, //编辑器初始显示文字
readOnly: false,
automaticLayout: true,
language: "javascript",
folding: true, //代码折叠
roundedSelection: false, // 右侧不显示编辑器预览框
autoIndent: true // 自动缩进
});
代码提示和获取输入的值:也是写在initEditor()里面的
// 监听值的变化
editor.value.onDidChangeModelContent((val) => {
console.log(val.changes[0].text)
dataList.javascriptVlaue = toRaw(editor.value).getValue()
console.log(toRaw(editor.value).getValue()); //获取输入的值
})
// 创建代码提醒
monaco.languages.registerCompletionItemProvider('javascript', {
provideCompletionItems: function(model, position) {
// find out if we are completing a property in the 'dependencies' object.
var textUntilPosition = model.getValueInRange({
startLineNumber: 1,
startColumn: 1,
endLineNumber: position.lineNumber,
endColumn: position.column
});
var suggestions = [];
var word = model.getWordUntilPosition(position);
var range = {
startLineNumber: position.lineNumber,
endLineNumber: position.lineNumber,
startColumn: word.startColumn,
endColumn: word.endColumn
};
return {suggestions: suggestions};
}
});
3.在3里面展示
我用的是ifream
<iframe
id="ifreamName"
src=""
frameborder="0"
width="640px"
height="500px"
:srcdoc = 'dataList.contentHtml + "<script>" + dataList.contentValue + "</script>"'
>
</iframe>
dataList.contentHtml是默认的html模板,然后后面加上script标签,把获取到的js代码,或者是自己写的代码放入到ifream里面运行。
点击运行的时候,获取Monaco里面的代码,重新加载ifream
const runFn = () => {
dataList.contentValue = toRaw(editor.value).getValue()
document.getElementById('ifreamName').contentWindow.location.reload(true);
}
最后附上gitee链接:https://gitee.com/pyw66/vue3-vite-monaco-editor.git
若克隆下来报Cannot read properties of undefined (reading 'languageWorkers')这个错的话,
安装下cnpm install --save-dev vite-plugin-monaco-editor@1.0.10,然后再运行就可以了
欢迎大家提出宝贵的意见