web在线编辑器（vue版）

目录

• 前言
• 一、monaco-editor
• • 1、编辑器源码
  • 2、对比diff
  • 2、体积优化
  • 二、ace-editor？
  • • 1、源码
    • 2、体积优化
    • 3、codemirror
    • • 1、diff
      • 总结

        ---

        前言

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

        ---

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

        一、monaco-editor

        “monaco-editor”: “^0.30.1”

        点击进入api地址

        1、编辑器源码

          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 });

        2、对比diff

        ps：在比较过程中，支持在右侧的进行文件编辑。可通过界面顶部操作栏，查看当前修改个数（实时更改）。

        当前修改处，可通过点击下一个，上一个跳转。当用户选择某行，当前修改处也会发生变化，

        需要注意的是，如果当前选中行，不在修改的范围内，则显示0，点击跳转按钮，将跳转到离当前最近的一个修改，并且标识当前处于第几个修改

                    {{ leftText }}      {{ rightText }}              发现 {{ diffCount }} 处修改        ，当前第 {{            curDiffCount || 0          }} 处