vue3+vite+ts集成codemirror方法二

引言

之前写过一篇关于vue3集成codemirror在线编辑器的方案。需要好几个依赖安装的下载。今天再次整理一篇简洁的操作流程。
代码编辑器codeMirror配置总结

安装

npm install codemirror-editor-vue3 -S
# or
yarn add codemirror-editor-vue3 -S

main.ts配置

import { createApp } from 'vue';
import App from './App.vue';
import Codemirror from "codemirror-editor-vue3";

const app = createApp(App);
app.use(Codemirror).mount('#app');

在vue文件中使用

<template>
  <div class="exercise">
    <codemirror v-model:value="codeSnippets" :options="cmOptions" />
  </div>
</template>

<script>
// 编辑器代码格式
import "codemirror/mode/javascript/javascript.js";
// 自动刷新(防止codemirror需要手动刷新才出数据)
import "codemirror/addon/display/autorefresh";
// 主题
import "codemirror/theme/ayu-mirage.css";
import { reactive, ref } from "vue";

export default {
  setup() {
    const codeSnippets = ref(`var i = 0;
for (; i < 9; i++) {
  console.log(i);
  // more statements
}`);
    const cmOptions = reactive({
      autorefresh: true,
      tabSize: 4,
      mode: "text/javascript",
      theme: "ayu-mirage",
      line: true,
      viewportMargin: Infinity, //处理高度自适应时搭配使用
      highlightDifferences: true,
      autofocus: false,
      indentUnit: 2,
      smartIndent: true,
      // readOnly: true, // 只读
      showCursorWhenSelecting: true,
      firstLineNumber: 1,
    });

    return { codeSnippets, cmOptions };
  },
};
</script>

<style lang="scss">
.CodeMirror {
  height: 100vh;
  direction: ltr;
}
</style>

效果图

merge模式

<template>
  <div class="exercise">
    <codemirror
      :merge="true"
      @change="onChange"
      class="cm-component"
      :options="cmOptions"
    />
  </div>
</template>

<script>
// 编辑器代码格式
import "codemirror/mode/htmlmixed/htmlmixed.js";
// 自动刷新(防止codemirror需要手动刷新才出数据)
import "codemirror/addon/display/autorefresh";

import { reactive, ref } from "vue";

export default {
  setup() {
    const code = ref(`<head>
  <title>codemirror-editor-vue</title>
  <meta data-n-head="ssr" charset="utf-8">
</head>`);
    const orig2 = ref(`<head>
  <title>test title</title>
  <meta data-n-head="ssr" charset="utf-8">
</head>`);
    const onChange = (val, instance) => {
      console.log(val);
      console.log(instance);
    };
    const cmOptions = reactive({
      autorefresh: true,
      mode: "text/javascript",
      theme: "default",
      value: code.value,
      origLeft: null,
      orig: orig2,
      connect: "align",
      mode: "text/html",
      lineNumbers: true,
      collapseIdentical: false,
      highlightDifferences: true,
    });

    return { onChange, orig2, code, cmOptions };
  },
};
</script>

<style lang="scss">
.CodeMirror-merge {
  font-family: monospace;
  height: 300px;
  color: black;
  direction: ltr;
}
</style>

codemirror非全局注册的使用方法

<template>
  <div class="exercise">
    <codemirror v-model:value="codeSnippets" :options="cmOptions" />
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import Codemirror from "codemirror-editor-vue3";
// 编辑器代码格式
import "codemirror/mode/javascript/javascript.js";
// 自动刷新(防止codemirror需要手动刷新才出数据)
import "codemirror/addon/display/autorefresh";
// 主题
import "codemirror/theme/ayu-mirage.css";

const codeSnippets = ref(`var i = 0;
        for (; i < 9; i++) {
        console.log(i);
        // more statements
        }`);
const cmOptions = reactive({
    autorefresh: true,
    tabSize: 4,
    mode: "text/javascript",
    theme: "ayu-mirage",
    line: true,
    viewportMargin: Infinity, //处理高度自适应时搭配使用
    highlightDifferences: true,
    autofocus: false,
    indentUnit: 2,
    smartIndent: true,
    // readOnly: true, // 只读
    showCursorWhenSelecting: true,
    firstLineNumber: 1,
});


</script>

<style lang="less">
.CodeMirror {
  height: 100vh;
  direction: ltr;
}
</style>