Vue Monaco Editor 编辑器的添加

monaco-editor  这个是可以查看的网站

为什么每次编辑都会报错,这个问题需要配置一下

哈~我找了大神帮忙看了一眼

配置了一下

plugins: [

          new MonacoWebpackPlugin({

            languages: ['javascript', 'css', 'html', 'typescript', 'json']

          })

        ]

解决了

npm install monaco-editor --save 

话不多说先上图吧

<template>
  <div class="myEditor">
    <!-- <Button @click="RunResult">查看结果</Button>
    //修改颜色
    <span class="theme" style="float: right">
      <Select v-model="theme" style="width: 200px" @on-change="themeChange">
        <Option
          v-for="item in themeOption"
          :value="item.value"
          :key="item.value"
          >{{ item.label }}</Option
        >
      </Select>
      //修改字体大小
      <Slider
        v-model="fontSize"
        :min="12"
        :max="100"
        style="width: 150px"
      ></Slider>
    </span> -->
    <div id="container" ref="container" style="height: 500px"></div>
  </div>
</template>
<script>
import * as monaco from "monaco-editor";
export default {
  props: {
    codes: {
      type: String,
      default: function () {
        return "";
      },
    },
    language: {
      type: String,
      default: function () {
        return "javascript";
      },
    },
    editorOptions: {
      type: Object,
      default: function () {
        return {
          selectOnLineNumbers: true,
          roundedSelection: false,
          cursorStyle: "line", //光标样式
          glyphMargin: true, //字形边缘
          useTabStops: false,
          fontSize: 28, //字体大小
          autoIndent: true, //自动布局
          quickSuggestionsDelay: 500, //代码提示延时
          theme: "vs", // 主题
          value: "", // 默认显示的值
          language: "json",
          folding: true, // 是否折叠
          foldingHighlight: true, // 折叠等高线
          foldingStrategy: "indentation", // 折叠方式  auto | indentation
          showFoldingControls: "always", // 是否一直显示折叠 always | mouseover
          disableLayerHinting: true, // 等宽优化
          emptySelectionClipboard: false, // 空选择剪切板
          selectionClipboard: false, // 选择剪切板
          automaticLayout: true, // 自动布局
          codeLens: false, // 代码镜头
          scrollBeyondLastLine: false, // 滚动完最后一行后再滚动一屏幕
          colorDecorators: true, // 颜色装饰器
          accessibilitySupport: "off", // 辅助功能支持  "auto" | "off" | "on"
          lineNumbers: "on", // 行号 取值： "on" | "off" | "relative" | "interval" | function
          lineNumbersMinChars: 5, // 行号最小字符   number
          enableSplitViewResizing: false,
          readOnly: true, //是否只读  取值 true | false
        };
      },
    },
  },
  data() {
    return {
      themeOption: [
        {
          value: "vs",
          label: "默认",
        },
        {
          value: "hc-black",
          label: "高亮",
        },
        {
          value: "vs-dark",
          label: "深色",
        },
      ],
      theme: "vs",
      fontSize: 14,
      codesCopy: null, //内容备份
    };
  },
  mounted() {
    this.initEditor();
  },
  watch: {
    codes(codes) {
      // this.$store.commit("setPIEEditor", codes);
      this.initEditor();
    },
  },
  methods: {
    initEditor() {
      let self = this;
      self.$refs.container.innerHTML = "";
      self.monacoEditor = monaco.editor.create(self.$refs.container, {
        value: self.codesCopy || self.codes,
        language: self.language,
        theme: self.theme, //vs, hc-black, or vs-dark
        fontSize: self.fontSize,
        editorOptions: self.editorOptions,
      });
      self.$emit("onMounted", self.monacoEditor); //编辑器创建完成回调
      self.monacoEditor.onDidChangeModelContent(function (event) {
        //编辑器内容changge事件
        self.codesCopy = self.monacoEditor.getValue();
        self.$emit("onCodeChange", self.monacoEditor.getValue(), event);
      });
      //编辑器随窗口自适应
      window.addEventListener("resize", function () {
        initEditor();
      });
    },
    RunResult() {
      console.log(this.monacoEditor.getValue());
    },
    themeChange(val) {
      this.initEditor();
    },
    sizeChange(val) {
      this.initEditor();
    },
  },
};
</script>
<style scoped>
#container {
  height: 100%;
  text-align: left;
}
</style>

 
<template>
  <div>
    <MonacoEditor
        ref="MonacoEditor"
        :language="'javascript'"
        :codes="javascriptCodes"
        @onMounted="javascriptOnMounted"
        @onCodeChange="javascriptOnCodeChange"
      ></MonacoEditor>
    </div>
</template>

import MonacoEditor from "./MonacoEditor";
 components: {
    MonacoEditor,
  },
data(){
    return{javascriptCodes: "",}
}
method:{
 javascriptOnMounted(edit) {
      console.log(edit, "javascriptOnMounted");
    },
    javascriptOnCodeChange(value, event) {
      console.log(value, event, "javascriptOnCodeChange");
    },
}