使用monaco-editor浏览器代码编辑器

1.安装依赖

npm i monaco-editor

npm i monaco-editor-webpack-plugin

2.使用示例

<template>

<div id="monacoEditorContainer" style="width: 100%; height: 300px">

</div>

</template>

<script>

import * as monaco from "monaco-editor";

export default {

data() {

return {

standaloneEditorConstructionOptions: {

value: '', // 编辑器的值

language: 'javascript', //语言

theme: 'vs-dark', // 编辑器主题：vs, hc-black, or vs-dark

autoIndent: true, // 自动缩进

readOnly: false, // 是否只读

}

};

},

mounted() {

this.createMonacoEditor();

},

methods: {

createMonacoEditor() {

// 使用 - 创建 monacoEditor 对象

const container = document.querySelector('#monacoEditorContainer')

this.monacoEditor = monaco.editor.create(container, this.standaloneEditorConstructionOptions)

},

},

}

</script>

需要注意的是要在vue.config.js中配置一下

const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin')

　　module.exports = {

　　　　configureWebpack: {

　　　　plugins: [

　　　　　　new MonacoWebpackPlugin()

　　　　]

　　　　}

　　}

这样就可以有提示了

然后在页面中引用控件

　<template>

<codeEdit

ref="html"

width="500px"

height="290px"

language="html" />

<el-button @click="runCode">运行</el-button>

<p>实现结果：</p>

<iframe class="view-panel" id="preview" frameborder="0"></iframe>

</template>

<script>

....

methods:{

runCode() {

var html = this.$refs.html.monacoEditor.getValue();

// var css = this.$refs.css.monacoEditor.getValue();

// var js = this.$refs.js.monacoEditor.getValue();

let code = `

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Editor</title>

</head>

<body>${html}</body>

</html>

`;

console.log(code);

const preview = document.querySelector("#preview");

preview.setAttribute("srcdoc", code);

},

}

....

</script>