vue3结合codemirror6原生使用写法

前言：网上零星几篇基本狗屁不通，非程序水平不行，属实文笔太烂，词不达意，干啥弄不明白要么杂乱无章。我的需求很简单，最近网站上要做个ol的学习模块，需要一个html的编辑器，一个预览。不需要别人给我封装对我而言多余的东西。为此琢磨了下网页在线编辑器，codemirror 经过时间的沉淀，已经是非常成熟的开源框架了，为此直接采用。非研究文章，纯使用文章。

图

codemirror创建基础设置的编辑器

codemirror6 进行了全面的重写， 将整个库依据功能 化成了不同的包。所以安装codemirror后 还不能完整的使用它。你需要额外的去加载对应功能的包。

为创建基础设置的编辑器 你需要安装如下包

npm install --save codemirror @codemirror/state @codemirror/view

接着

import { EditorState} from "@codemirror/state";
import { basicSetup } from "codemirror";
import { EditorView } from "@codemirror/view";
let state = EditorState.create({
    extensions: [
      basicSetup,
    ],
    // 编辑器中的内容
    doc: "",
  });
let view = new EditorView({
  state,
  // 编辑器 挂载的dom
  parent: document.querySelector("#code-container"),
});

插件extensions

观察上方代码，看到extensions 选项， 这个是可供注入的 插件字段，basicSetup中 只提供了一个最基本的设置，但是没有语法的解析、颜色主题的更换、包括我们的编辑器常用的 Tab 缩进，这个字段相当于是一个可供我们拓展的字段，就是要什么就加什么，不行就自己写。 主要分两种 ，一种是语法解析器， 这种

语法解析器加载（html）

主要用于对标签的识别提示，以及高亮字符等。
别忘记 npm install @codemirror/lang-html 对应的包

import { EditorState, Compartment } from "@codemirror/state";
import {  html } from "@codemirror/lang-html";
const languageConf = new Compartment();
let state = EditorState.create({
    extensions: [
      basicSetup,
      languageConf.of(html()),
    ],
    doc: "",
});

颜色主题更换

import { EditorState, Compartment } from "@codemirror/state";
import { dracula } from '@uiw/codemirror-theme-dracula';

const languageConf = new Compartment();
let state = EditorState.create({
    extensions: [
      basicSetup,
      dracula ,
    ],
    doc: "",
});

字符缩进

import { indentWithTab } from "@codemirror/commands";
import { EditorView, keymap } from "@codemirror/view";

let state = EditorState.create({
  extensions: [
    basicSetup,
    keymap.of([indentWithTab]),
  ],
  doc: "",
});

预览

新建一个iframe 获取到Dom

// 运行代码. 把编辑器的内容 渲染到iframe的容器上
const runCode = function () {
  frameDom.srcdoc = view.state.doc.toString();
};