web在线编辑器（vue版）

---

前言

提示：这里可以添加本文要记录的大概内容：

例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。

---

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

一、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",});// 监听值的变化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、体积优化

待续…

二、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、体积优化

待续…

---

总结

提示：这里对文章进行总结：

记录web在线编辑器的