交互说明
在编辑器中输入{时，会自动弹出选项弹窗，然后可以选值插入。
代码
父组件
<variable-editor
v-model="content"
:variables="variables"
placeholder="请输入模板内容..."
@blur="handleBlur"
/>
data() {
return {
content: "这是一个示例 {user.name}",
variables: [
{
id: "user",
label: "user",
type: "object",
children: [
{ id: "user.name", label: "name", type: "string" },
{ id: "user.age", label: "age", type: "number" },
],
},
{
id: "items",
label: "items",
type: "array<object>",
children: [
{ id: "items.title", label: "title", type: "string" },
{ id: "items.price", label: "price", type: "number" },
],
},
],
};
},
handleBlur(val) {
console.log("编辑器内容已更新:", val);
},子组件
<template>
<div class="variable-editor">
<div ref="editorRef" class="editor-container"></div>
<el-popover
v-if="variables && variables.length > 0"
ref="popover"
placement="left-start"
:value="popoverOpen"
:visible-arrow="false"
trigger="manual"
@after-enter="handleAfterOpen"
>
<div
class="tree-wrap my-variable-popover"
tabindex="-1"
@keydown="handleKeyDown"
@keydown.capture="handleKeyDownCapture"
ref="treeRef"
>
<el-tree
:data="variables"
:props="defaultProps"
default-expand-all
:highlight-current="true"
:current-node-key="selectedKeys[0]"
@current-change="handleCurrentChange"
@node-click="handleVariableInsert"
ref="tree"
node-key="id"
>
<div slot-scope="{ node, data }" class="flex-row-center">
<i v-if="getTypeIcon(data)" :class="getTypeIcon(data)"></i>
<span class="ml-1">{{ node.label }}</span>
</div>
</el-tree>
</div>
<span slot="reference" ref="anchorRef" class="anchor-point"></span>
</el-popover>
</div>
</template>
<script>
import {
EditorView,
ViewPlugin,
placeholder,
Decoration,
keymap,
} from "@codemirror/view";
import { EditorState, RangeSetBuilder, StateEffect } from "@codemirror/state";
import { defaultKeymap, insertNewlineAndIndent } from "@codemirror/commands";
// 扁平化树结构
const flattenTree = (nodes, result = []) => {
for (const node of nodes) {
result.push({ key: node.id, title: node.label });
if (node.children) {
flattenTree(node.children, result);
}
}
return result;
};
export default {
name: "VariableEditor",
props: {
value: {
type: String,
default: "",
},
variables: {
type: Array,
default: () => [],
},
placeholder: {
type: String,
default: "请输入内容...",
},
},
data() {
return {
popoverOpen: false,
selectedKeys: [],
editorView: null,
lastCursorPos: null,
flattenedTree: [],
defaultProps: {
children: "children",
label: "label",
},
// 类型图标映射
typeIcons: {
string: "el-icon-document",
number: "el-icon-tickets",
boolean: "el-icon-switch-button",
object: "el-icon-folder",
"array<object>": "el-icon-collection",
},
};
},
computed: {
currentIndex() {
return this.flattenedTree.findIndex(
(node) => node.key === this.selectedKeys[0]
);
},
},
mounted() {
this.flattenedTree = flattenTree(this.variables);
this.initEditor();
},
beforeDestroy() {
if (this.editorView) {
this.editorView.destroy();
}
},
watch: {
variables: {
handler(newVal) {
this.flattenedTree = flattenTree(newVal);
if (this.editorView) {
// 重新配置编辑器以更新插件
this.editorView.dispatch({
effects: StateEffect.reconfigure.of(this.createExtensions()),
});
}
},
deep: true,
},
value(newVal) {
if (this.editorView && newVal !== this.editorView.state.doc.toString()) {
this.editorView.dispatch({
changes: {
from: 0,
to: this.editorView.state.doc.length,
insert: newVal,
},
});
}
},
popoverOpen(val) {
if (val && this.flattenedTree.length > 0) {
this.selectedKeys = [this.flattenedTree[0].key];
this.$nextTick(() => {
if (this.$refs.tree) {
this.$refs.tree.setCurrentKey(this.selectedKeys[0]);
}
});
}
},
},
methods: {
getTypeIcon(data) {
return this.typeIcons[data.type] || this.typeIcons.string;
},
initEditor() {
if (!this.$refs.editorRef) return;
this.editorView = new EditorView({
doc: this.value,
parent: this.$refs.editorRef,
extensions: this.createExtensions(),
});
// 添加失焦事件
this.$refs.editorRef.addEventListener("blur", this.onEditorBlur);
},
createExtensions() {
return [
placeholder(this.placeholder || "请输入内容..."),
EditorView.editable.of(true),
EditorView.lineWrapping,
keymap.of([
...defaultKeymap,
{ key: "Enter", run: insertNewlineAndIndent },
]),
EditorState.languageData.of(() => {
return [{ autocomplete: () => [] }];
}),
this.createUpdateListener(),
this.createVariablePlugin(),
this.createInterpolationPlugin(this.variables),
];
},
createUpdateListener() {
return EditorView.updateListener.of((update) => {
if (update.docChanged) {
// const content = update.state.doc.toString();
// 不要在每次更改时都触发，而是在失焦时触发
}
});
},
createVariablePlugin() {
const self = this;
return ViewPlugin.fromClass(
class {
constructor(view) {
this.view = view;
}
update(update) {
if (update.docChanged || update.selectionSet) {
const pos = update.state.selection.main.head;
const doc = update.state.doc.toString();
// 只有当光标位置真正变化时才更新
if (self.lastCursorPos !== pos) {
self.lastCursorPos = pos;
// 延迟更新 Popover 位置
setTimeout(() => {
self.$refs.popover &&
self.$refs.popover.$el &&
self.$refs.popover.updatePopper();
}, 10);
}
// 1. 正则查找所有的 {xxx}
const regex = /\{(.*?)\}/g;
let match;
let inInterpolation = false;
while ((match = regex.exec(doc)) !== null) {
const start = match.index;
const end = start + match[0].length;
if (pos > start && pos < end) {
// 光标在插值表达式内
inInterpolation = true;
setTimeout(() => {
const coords = this.view.coordsAtPos(pos);
const editorRect = this.view.dom.getBoundingClientRect();
if (coords) {
self.$refs.anchorRef.style.position = "absolute";
self.$refs.anchorRef.style.left = `${
coords.left - editorRect.left - 10
}px`;
self.$refs.anchorRef.style.top = `${
coords.top - editorRect.top
}px`;
self.$refs.anchorRef.dataset.start = start;
self.$refs.anchorRef.dataset.end = end;
self.popoverOpen = true;
}
}, 0);
break;
}
}
if (!inInterpolation) {
// 检测输入 { 的情况
const prev = update.state.sliceDoc(pos - 1, pos);
if (prev === "{") {
setTimeout(() => {
const coords = this.view.coordsAtPos(pos);
const editorRect = this.view.dom.getBoundingClientRect();
if (coords) {
self.$refs.anchorRef.style.position = "absolute";
self.$refs.anchorRef.style.left = `${
coords.left - editorRect.left - 10
}px`;
self.$refs.anchorRef.style.top = `${
coords.top - editorRect.top
}px`;
self.$refs.anchorRef.dataset.start = pos;
self.$refs.anchorRef.dataset.end = pos;
self.popoverOpen = true;
}
}, 0);
} else {
self.popoverOpen = false;
}
}
}
}
}
);
},
createInterpolationPlugin(variables) {
const self = this;
return ViewPlugin.fromClass(
class {
constructor(view) {
this.decorations = this.buildDecorations(view);
}
update(update) {
if (update.docChanged || update.viewportChanged) {
this.decorations = this.buildDecorations(update.view);
}
}
buildDecorations(view) {
const builder = new RangeSetBuilder();
const doc = view.state.doc;
const text = doc.toString();
const regex = /\{(.*?)\}/g;
let match;
while ((match = regex.exec(text)) !== null) {
const [full, expr] = match;
const start = match.index;
const end = start + full.length;
const isValid = self.validatePath(variables, expr.trim());
const deco = Decoration.mark({
class: isValid
? "cm-decoration-interpolation-valid"
: "cm-decoration-interpolation-invalid",
});
builder.add(start, end, deco);
}
return builder.finish();
}
},
{
decorations: (v) => v.decorations,
}
);
},
validatePath(schema, rawPath) {
const segments = rawPath.replace(/\[(\d+)\]/g, "[$1]").split(".");
// 递归匹配
function match(nodes, index) {
if (index >= segments.length) return true;
const currentKey = segments[index];
for (const node of nodes) {
const { label: title, type, children } = node;
// 匹配数组字段，如 abc[0]
if (/\[\d+\]$/.test(currentKey)) {
const name = currentKey.replace(/\[\d+\]$/, "");
if (title === name && type === "array<object>" && children) {
return match(children, index + 1);
}
}
// 匹配普通字段
if (title === currentKey) {
if ((type === "object" || type === "array<object>") && children) {
return match(children, index + 1);
}
// 如果不是object类型，且已经是最后一个字段
return index === segments.length - 1;
}
}
return false;
}
return match(schema, 0);
},
handleAfterOpen() {
if (this.$refs.treeRef) {
this.$refs.treeRef.focus();
}
},
handleCurrentChange(data) {
if (data) {
this.selectedKeys = [data.id];
}
},
handleVariableInsert(data) {
const key = data.id;
this.selectedKeys = [key];
const view = this.editorView;
if (!view) return;
const state = view.state;
const pos = state.selection.main.head;
const doc = state.doc.toString();
let insertText = `{${key}}`;
let targetFrom = pos;
let targetTo = pos;
let foundInBraces = false;
// 检查光标是否在 {...} 内部
const regex = /\{[^}]*\}/g;
let match;
while ((match = regex.exec(doc)) !== null) {
const [full] = match;
const start = match.index;
const end = start + full.length;
if (pos > start && pos < end) {
targetFrom = start;
targetTo = end;
foundInBraces = true;
break;
}
}
// 如果不在 {...} 中，但光标前是 `{`，只插入 `${key}}`，不要加多一个 `{`
if (!foundInBraces && doc[pos - 1] === "{") {
targetFrom = pos;
insertText = `${key}}`; // 前面已经有 {，只补后半段
}
const transaction = state.update({
changes: {
from: targetFrom,
to: targetTo,
insert: insertText,
},
selection: { anchor: targetFrom + insertText.length },
});
view.dispatch(transaction);
view.focus();
this.popoverOpen = false;
},
onEditorBlur(e) {
const related = e.relatedTarget;
// 如果焦点转移到了 Popover 内部，则不处理 blur
if (related && related.closest(".my-variable-popover")) {
return;
}
const view = this.editorView;
if (view) {
this.$emit("input", view.state.doc.toString());
this.$emit("blur");
}
},
handleKeyDownCapture(e) {
if (!["ArrowUp", "ArrowDown", "Enter"].includes(e.key)) {
e.stopPropagation();
}
},
handleKeyDown(e) {
if (!["ArrowUp", "ArrowDown", "Enter"].includes(e.key)) return;
if (e.key === "ArrowDown") {
let nextKey;
if (this.currentIndex < this.flattenedTree.length - 1) {
nextKey = this.flattenedTree[this.currentIndex + 1].key;
} else {
nextKey = this.flattenedTree[0].key;
}
this.selectedKeys = [nextKey];
this.$refs.tree.setCurrentKey(nextKey);
} else if (e.key === "ArrowUp") {
let prevKey;
if (this.currentIndex > 0) {
prevKey = this.flattenedTree[this.currentIndex - 1].key;
} else {
prevKey = this.flattenedTree[this.flattenedTree.length - 1].key;
}
this.selectedKeys = [prevKey];
this.$refs.tree.setCurrentKey(prevKey);
} else if (e.key === "Enter" && this.selectedKeys[0]) {
// 查找对应的节点数据
const findNodeData = (key, nodes) => {
for (const node of nodes) {
if (node.id === key) return node;
if (node.children) {
const found = findNodeData(key, node.children);
if (found) return found;
}
}
return null;
};
const nodeData = findNodeData(this.selectedKeys[0], this.variables);
if (nodeData) {
this.handleVariableInsert(nodeData);
}
}
},
},
};
</script>
<style scoped>
.variable-editor {
position: relative;
width: 100%;
}
.editor-container {
width: 100%;
border: 1px solid #dcdfe6;
border-radius: 4px;
min-height: 150px;
overflow: hidden;
transition: border-color 0.2s, box-shadow 0.2s;
}
/* CodeMirror 6 编辑器样式 */
:global(.cm-editor) {
height: 150px !important;
min-height: 150px !important;
overflow-y: auto;
}
/* 编辑器获取焦点时的样式 */
:global(.cm-editor.cm-focused) {
outline: none;
}
/* 使用更具体的选择器确保只有一层边框高亮 */
.editor-container:focus-within {
border-color: #409eff !important;
}
.anchor-point {
position: absolute;
z-index: 10;
}
.tree-wrap {
min-width: 200px;
}
.flex-row-center {
display: flex;
align-items: center;
flex-wrap: nowrap;
}
.ml-1 {
margin-left: 4px;
}
/* 添加到全局样式中 */
:global(.cm-decoration-interpolation-valid) {
color: #409eff;
background-color: rgba(64, 158, 255, 0.1);
}
:global(.cm-decoration-interpolation-invalid) {
color: #f56c6c;
background-color: rgba(245, 108, 108, 0.1);
text-decoration: wavy underline #f56c6c;
}
</style>
依赖安装
npm install @codemirror/state @codemirror/view @codemirror/commands