vue3+vite+monaco editor

最近自己写的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，然后再运行就可以了

欢迎大家提出宝贵的意见