---

前言

提示：這里可以添加本文要記錄的大概內容：

例如：隨著人工智能的不斷發(fā)展，機器學習這門技術也越來越重要，很多人都開啟了學習機器學習，本文就介紹了機器學習的基礎內容。

---

提示：以下是本篇文章正文內容，下面案例可供參考

一、monaco-editor

1、源碼

<template><div ref="monacoEditor" id="monacoEditor" :style="style"></div>
</template><script setup>
import { nextTick, onMounted, ref, watch, onBeforeUnmount } from "vue";
import * as monaco from "monaco-editor";
const props = defineProps({modelValue: {},style: {},readOnly: {},language: {},content: {},
});const emit = defineEmits(["update:modelValue"]);const monacoEditor = ref();
let editor;const init = () => {/*** @param wordWrap 自動換行，注意大小寫*/editor = monaco.editor.create(monacoEditor.value, {automaticLayout: true,value: props.modelValue,readOnly: props.readOnly,theme: "vs-dark",language: props.language,wordWrap: "on",wrappingIndent: "indent",});// 監(jiān)聽值的變化editor.onDidChangeModelContent(() => {emit("update:modelValue", editor.getValue());});
};
onMounted(() => {init();
});watch(() => props.language,(nv, ov) => {monaco.editor.setModelLanguage(editor.getModel(), nv);}
);function updateValue() {setTimeout(() => {editor.setValue(props.modelValue);}, 200);
}watch(() => props.language,(newValue) => {monaco.editor.setModelLanguage(editor.getModel(), newValue);}
);
defineExpose({ updateValue });
</script><style></style>

<config-editv-model="tempFlow.textareashow":language="tempFlow.language":readOnly="false"style="height: 100%; width: 100%"
></config-edit>

2、體積優(yōu)化

待續(xù)…

二、ace-editor？

1、源碼

代碼如下（示例）：

<template><v-ace-editorv-model:value="modelValue"@init="init"lang="json":theme="theme":options="options":readonly="readonly":style="style"/>
</template><script setup>
import { VAceEditor } from "vue3-ace-editor";
import "ace-builds/webpack-resolver";
import "ace-builds/src-noconflict/mode-json";
import "ace-builds/src-noconflict/theme-chrome";
import "ace-builds/src-noconflict/ext-language_tools";const props = defineProps({modelValue: {},theme: {},options: {},readonly: {},//自定義行內樣式style: {},
})</script><style></style>

<ace-editorv-model:value="tempFlow.textareashow"@init="initFail"lang="json":theme="aceConfig.theme":options="aceConfig.options":readonly="aceConfig.readOnly"class="ace-editor"
/>

2、體積優(yōu)化

待續(xù)…

---

總結

提示：這里對文章進行總結：

記錄web在線編輯器的