>[Talk is cheap. Show me the code] #### 前言实现一个带有插入标签的代码编辑器功能，如果只是简单的代码编辑器建议使用 [monaco editor](https://www.nixops.me/articles/migrate-to-centos-stream-8.html)，本文参考掘金文章 [# CodeMirror 6+ vue3 实现简单的计算公式，插入标签功能](https://juejin.cn/post/7242483472044638265) ### 直接上代码直接复制即可展示效果 ``` pnpm i @codemirror/state pnpm i @codemirror/lang-javascript pnpm i @codemirror/view pnpm i codemirror ``` 第一步 ``` ``` 第二步 ``` // 此处为 import { PlaceholderWidget } from "./index"; 的index 文件 import { WidgetType, } from "@codemirror/view"; export class PlaceholderWidget extends WidgetType { constructor(name) { super(); this.name = name; } eq(other) { return this.name == other.name; } toDOM() { let elt = document.createElement("span"); elt.style.cssText = ` border: 1px solid blue; border-radius: 4px; padding: 0 3px; background: lightblue;`; elt.textContent = this.name; return elt; } ignoreEvent() { return false; } } ``` 效果图： ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4494a028062a43e8a3a000ea2f0b7087~tplv-k3u1fbpfcp-watermark.image?) ### 重新赋值 ``` editor.dispatch({ changes: { from: 0, to: editor.state.doc.length, insert: "New Test Text", }, }); ``` > >如果有任何关于本文的意见，请在文章下方留言，我会在看到的第一时间回复。 > >