前言：网上零星几篇基本狗屁不通，非程序水平不行，属实文笔太烂，词不达意，干啥弄不明白要么杂乱无章。我的需求很简单，最近网站上要做个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 对应的包文章来源：https://www.toymoban.com/news/detail-716492.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文章来源地址https://www.toymoban.com/news/detail-716492.html
// 运行代码. 把编辑器的内容 渲染到iframe的容器上
const runCode = function () {
frameDom.srcdoc = view.state.doc.toString();
};
到了这里，关于vue3结合codemirror6原生使用写法的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
