monaco-editor编辑器使用方法（vue3实现）_monaco-editor vue3

monaco-editor编辑器使用方法（vue3实现）

1、首先在vue3项目中安装monaco-editor

yarn add monaco-editor
yarn add  monaco-editor-webpack-plugin
1
2

2、封装编辑器组件：包括运行、复制、重置功能（运行功能下一篇更新）
主要是初始化编辑器，创建dom，配置相关参数。

<template>
  <div class="left-box">
    <div class="left-top">
      <div class="run">
        <div class="btn" v-if="codeType == 'HTML'" @click="runClick">运行</div>
      </div>
      <div class="title-center">
        <div class="title" @click="clickHtml('Vue')" :style="{ color: codeType == 'Vue' ? '#066fdb' : '#fbfbfb' }">Vue代码</div>
        <div class="title" style="margin: 0 10px">|</div>
        <div class="title" @click="clickHtml('HTML')" :style="{ color: codeType == 'HTML' ? '#066fdb' : '#fbfbfb' }">HTML代码</div>
      </div>
      <div class="copy">
        <div class="btn" @click="reset">重置</div>
        <div class="btn" @click="copy">复制</div>
      </div>
    </div>
    <div id="codeEditBox" class="codeEditBox"></div>
  </div>
</template>

<script>
import * as monaco from "monaco-editor";
import { toRaw } from "vue";
import { ref, defineComponent, watch } from "vue";
import $ from "jquery";
export default defineComponent({
  props: {
    code: {
      type: String,
      default: "",
    },
    cardName: {
      type: String,
      default: "",
    },
    codeType: {
      type: String,
      default: "",
    },
  },

  setup(props, { emit }) {
    let changeValue = ref("");
    const editor = ref(null);
    const codeType = ref("Vue");
    const initEditor = () => {
      // 初始化编辑器，确保dom已经渲染
      editor.value = monaco.editor.create(document.getElementById("codeEditBox"), {
        value: props.code, //编辑器初始显示文字
        language: props.cardName == "HTML" ? "html" : "javascript", //语言支持自行查阅demo
        theme: "vs-dark", //官方自带三种主题vs, hc-black, or vs-dark
        selectOnLineNumbers: true, //显示行号
        roundedSelection: false,
        readOnly: false, // 只读
        cursorStyle: "line", //光标样式
        automaticLayout: false, //自动布局
        glyphMargin: true, //字形边缘
        useTabStops: false,
        fontSize: 14, //字体大小
        autoIndent: true, //自动布局
        quickSuggestionsDelay: 100, //代码提示延时
        automaticLayout: true, //自适应,
      });
      // 监听值的变化
      editor.value.onDidChangeModelContent((event) => {
        //拿到变化后的值
        changeValue.value = getVal();
      });
    };
    watch(
      () => props.code,
      (newValue, oldValue) => {
        // 值发生变化时的回调函数
        toRaw(editor.value).setValue(newValue);
      },
      { deep: true, immediate: false }
    );
    watch(
      () => props.codeType,
      (newValue) => {
        if (newValue == "HTML") {
          monaco.editor.setModelLanguage(editor.value.getModel(), "html");
        } else {
          monaco.editor.setModelLanguage(editor.value.getModel(), "javascript");
        }
      },
      { deep: true, immediate: false }
    );
    //复制到电脑剪切板
    const copyToClipboard = (textToCopy) => {
      navigator.clipboard
        .writeText(textToCopy)
        .then(() => {
          console.log("已成功复制到剪贴板");
        })
        .catch((error) => {
          console.error("复制到剪贴板失败:", error);
        });
    };
    const clickHtml = (data) => {
      codeType.value = data;
      emit("clickHtml", data);
    };
    const copy = () => {
      copyToClipboard(getVal());
    };
    const reset = () => {
      toRaw(editor.value).setValue(props.code);
    };

    $(document).ready(function () {
      initEditor();
    });
    const getVal = () => {
      return toRaw(editor.value).getValue(); //获取编辑器中的文本
    };
    //运行
    const runClick = () => {
      emit("customEvent", changeValue.value);
    };

    return {
      editor,
      getVal,
      changeValue,
      copy,
      reset,
      copyToClipboard,
      runClick,
      clickHtml,
      codeType,
    };
  },
});
</script>
<style scoped lang="scss">
.left-box {
  width: 100%;
  height: 100%;
}

.title-center {
  display: flex;
  justify-content: space-between;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.left-top {
  height: 6%;
  width: 100%;
  color: azure;
  background-color: black;
  font-size: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 15px;
  box-sizing: border-box;
}

.copy {
  display: flex;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;

  .btn {
    margin-left: 10px;
  }
}
.run {
  color: #ffffff;
  height: 100%;
  width: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.btn {
  cursor: pointer;
}

#codeEditBox {
  width: 100%;
  height: 94%;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191