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