vue引入monaco-editor在线编辑器

最新推荐文章于 2024-09-08 03:09:32 发布

summer鸿

最新推荐文章于 2024-09-08 03:09:32 发布

阅读量635

点赞数

文章标签： vue.js 编辑器 javascript

本文链接：https://blog.csdn.net/summer721066/article/details/129375912

版权

文章介绍了在Vue项目中集成monaco-editor的步骤，包括通过npm安装，设置HTML结构，初始化编辑器，以及处理在Vue中遇到的脚本错误。为解决错误，需在src/main.js中导入并配置不同语言的worker。最后提到了修正script标签结束标签的正确方式。

摘要由CSDN通过智能技术生成

1. npm i monaco-editor

2. 在代码引用

<div class="monaco-editor" id="monaco-editor"></div>

const value = ref(`
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>圆</title>
</head>
<body>
  <div id="vszContainer"></div>
  <script src="/index.js" type="text/javascript"><\/script>
  <script>
    ......
  <\/script>
</body>
</html>
`);
const options = ref({
  colorDecorators: true,
  lineHeight: 24,
  tabSize: 2,
});

const initMonaco = () => {
  const editorDom = document.getElementById("monaco-editor");
  editor.value = monaco.editor.create(editorDom, {
    value: value.value,
    language: "html",
    theme: "vs-dark",
    options: options.value,
  });
};

3. 启动在vue中报如下的错

vue中在src/main.js下引入下面代码就可以解决。

import editorWorker from "monaco-editor/esm/vs/editor/editor.worker?worker";
import jsonWorker from "monaco-editor/esm/vs/language/json/json.worker?worker";
import cssWorker from "monaco-editor/esm/vs/language/css/css.worker?worker";
import htmlWorker from "monaco-editor/esm/vs/language/html/html.worker?worker";
import tsWorker from "monaco-editor/esm/vs/language/typescript/ts.worker?worker";
self.MonacoEnvironment = {
  getWorker(_, label) {
    if (label === "json") {
      return new jsonWorker();
    }
    if (label === "css" || label === "scss" || label === "less") {
      return new cssWorker();
    }
    if (label === "html" || label === "handlebars" || label === "razor") {
      return new htmlWorker();
    }
    if (label === "typescript" || label === "javascript") {
      return new tsWorker();
    }
    return new editorWorker();
  },
};

4. 报错 script Invalid end tag. script标签如下引用就可以呢