如何在CodeMirror 6中实现输入为空时的占位符功能？

CodeMirror 6没有内置占位符API，不过可以通过视图插件+装饰器的方式手动实现，核心逻辑是当编辑器内容为空时，在起始位置插入模拟占位符的装饰组件。

实现步骤 #

1. 导入CodeMirror核心模块
2. 定义占位符装饰：创建widget装饰，渲染占位符文本并配置样式
3. 编写视图插件：监听编辑器状态变化，判断内容是否为空，动态添加/移除装饰
4. 将插件加入编辑器配置

完整代码示例 #

import { Decoration, DecorationSet, EditorView, ViewPlugin } from "@codemirror/view";
import { EditorState } from "@codemirror/state";

// 创建占位符装饰组件
const placeholderWidget = Decoration.widget({
  widget: () => {
    const placeholderEl = document.createElement("span");
    placeholderEl.className = "cm-placeholder";
    placeholderEl.textContent = "请输入代码或文本...";
    return placeholderEl;
  },
  side: 0 // 占位符固定在文本起始位置
});

// 编写视图插件管理装饰的显示与隐藏
const placeholderPlugin = ViewPlugin.fromClass(class {
  decorations: DecorationSet;

  constructor(view) {
    this.decorations = this.getDecorations(view.state);
  }

  update(update) {
    // 文档内容或视口变化时更新装饰状态
    if (update.docChanged || update.viewportChanged) {
      this.decorations = this.getDecorations(update.state);
    }
  }

  getDecorations(state) {
    // 文档为空时添加占位符，否则清空装饰
    return state.doc.length === 0 
      ? DecorationSet.create(state, [placeholderWidget.range(0)])
      : DecorationSet.empty;
  }
}, {
  decorations: instance => instance.decorations
});

// 初始化编辑器并注册插件
const editor = new EditorView({
  state: EditorState.create({
    extensions: [placeholderPlugin]
  }),
  parent: document.getElementById("editor-container")
});

样式优化（可选） #

添加CSS让占位符更贴近原生输入框效果：

.cm-placeholder {
  color: #999;
  font-style: italic;
  pointer-events: none; /* 关键：避免占位符干扰编辑器聚焦和输入操作 */
}

注意事项 #

• 必须保留pointer-events: none样式，否则点击占位符区域可能无法正常聚焦编辑器
• 占位符文本可根据场景自定义，比如针对代码编辑器设置"输入你的代码..."
• 该插件支持多编辑器实例复用，每个实例会独立判断自身内容状态

内容的提问来源于stack exchange，提问作者Raxon