Vue3.0+TS整合codemirror

1. 安装codemirror

    npm install vue-codemirror --save

2.版本号

    "codemirror": "^5.65.2",

3. 编写组件

	例：mirrorTextArea.vue（组件名称, 具体名称以各自项目规范为准）

<template>
  <div>
    <textarea ref="editor">textarea>
  div>
template>
<script setup lang="ts">
// 引入全局实例
import _CodeMirror from "codemirror/lib/codemirror.js";
// 核心样式
import "codemirror/lib/codemirror.css";
import "codemirror/theme/monokai.css";
import "codemirror/addon/fold/foldgutter.css";
import "codemirror/addon/display/fullscreen.css";
import "codemirror/addon/dialog/dialog.css";
import "codemirror/addon/search/matchesonscrollbar.css";
import "codemirror/addon/scroll/simplescrollbars.css";
import "codemirror/addon/fold/foldcode.js";
import "codemirror/addon/edit/closetag.js";
import "codemirror/addon/fold/foldgutter.js";
import "codemirror/addon/fold/brace-fold.js";
import "codemirror/addon/fold/xml-fold.js";
import "codemirror/addon/fold/indent-fold.js";
import "codemirror/addon/fold/comment-fold.js";
import "codemirror/addon/edit/closebrackets.js";
import "codemirror/addon/fold/xml-fold.js";
import "codemirror/addon/edit/matchtags.js";
import "codemirror/addon/display/fullscreen.js";
import "codemirror/addon/dialog/dialog.js";
import "codemirror/addon/search/searchcursor.js";
import "codemirror/addon/search/search.js";
import "codemirror/addon/scroll/annotatescrollbar.js";
import "codemirror/addon/search/matchesonscrollbar.js";
import "codemirror/addon/search/jump-to-line.js";
import "codemirror/addon/scroll/simplescrollbars.js";
import "codemirror/mode/htmlmixed/htmlmixed.js";
import "codemirror/mode/javascript/javascript.js";
import "codemirror/mode/xml/xml.js";
import "codemirror/mode/css/css.js";
import { ref, nextTick } from "vue";
import "codemirror/mode/javascript/javascript.js";

let props = defineProps({
  mode: {
    type: String,
    required: false,
    default: 'htmlmixed'
  },
  content: {
    type: String,
    required: false,
    default: ''
  }
})

const editor = ref();

let coder;

nextTick(() => {
  coder = _CodeMirror.fromTextArea(editor.value, {
    mode: props.mode, // 不设置的话，默认使用第一个引用
    // 缩进格式
    tabSize: 2,
    // 显示行号
    lineNumbers: true,
    lineWrapping: true,
    theme: "monokai",
    matchTags: { bothTags: true },
    foldGutter: true,
    autoCloseTags: true,
    autoCloseBrackets: true,
    scrollbarStyle: "simple",
    extraKeys: {
      "Alt-F": "findPersistent",
    },
    gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter", "breakpoints"]
  });
  coder.setValue(props.content);
});

/**
 * 对外提供赋值
 */
const setValue = (val: string) => {
  coder.setValue(val);
};

/**
 * 设置模式
 */
const setMode = (mode: string) => {
  console.info(mode)
  coder.setOption("mode", mode);
}

/**
 * 对外提供取值
 */
const getValue = () => {
  return coder.getValue();
};

defineExpose({
  setValue,
  getValue,
  setMode,
})
script>

4. 使用组件

	引入组件, 具体名称及路径以实际项目路径为准
	
	import mirrorTextArea from "@src/views/mirror/mirrorTextArea.vue";

<template>
	<mirror-text-area
	  ref="mirrorRef"
	  :mode="resourceModalPro.mode"
	  :content="resourceModalPro.content"
	>mirror-text-area>
template>
<script setup lang="ts">
import { onMounted, defineComponent, ref, nextTick } from "vue";
import mirrorTextArea from "@src/views/mirror/mirrorTextArea.vue";
const resourceModalPro: any = ref({mode: "", content: "" });
/**
 * 赋值方法, 取值方法, 根据具体场景调用
 * nextTick(() => {
 *    mirrorRef.value.setValue(resourceModalPro.value.content);
 *    mirrorRef.value.setMode(resourceModalPro.value.mode);
 *    console.info(mirrorRef.value.getValue());
 * });
 */
script>
<style>
.CodeMirror {
  width: 100%;
  height: 600px;
  font-size: 16px;
}
style>