如何修改CodeMirror控制的textarea占位符样式？

在Vue项目中使用CodeMirror 5.65.7版本，已成功为textarea添加占位符，但修改占位符字体颜色、居中对齐的样式完全不生效。尝试调整样式后仍未解决，开发者工具调试也未达预期。

示例代码 #

<template>
  <div class="container">
    <div class="row">
      <div class="col-md-5 offset-md-1 mt-5 mr-2 mb-2 pt-2">
        <textarea
          id="jsonEvents"
          ref="jsonEvents"
          v-model="jsonEvents"
          class="form-control"
          placeholder="Document in JSON format"
          spellcheck="false"
          data-gramm="false"
        />
      </div>

      <div class="col-md-5 offset-md-1 mt-5 mr-2 mb-2 pt-2">
        <textarea
          id="xmlEvents"
          ref="xmlEvents"
          v-model="xmlEvents"
          class="form-control"
          placeholder="Document in XML format"
          spellcheck="false"
          data-gramm="false"
        />
      </div>
    </div>
  </div>
</template>

<script>
let CodeMirror = null;

if (typeof window !== "undefined" && typeof window.navigator !== "undefined") {
  CodeMirror = require("codemirror");
  require("codemirror/mode/xml/xml.js");
  require("codemirror/mode/javascript/javascript.js");
  require("codemirror/lib/codemirror.css");
  require("codemirror/addon/lint/lint.js");
  require("codemirror/addon/lint/lint.css");
  require("codemirror/addon/lint/javascript-lint.js");
  require("codemirror/addon/hint/javascript-hint.js");
  require("codemirror/addon/display/placeholder.js");
}

export default {
  name: "Converter",
  components: {},
  data() {
    return {
      xmlEvents: "",
      jsonEvents: "",
      xmlEditor: null,
      jsonEditor: null,
    };
  },
  mounted() {
    // 初始化XML编辑器
    this.xmlEditor = CodeMirror.fromTextArea(this.$refs.xmlEvents, {
      mode: "application/xml",
      beautify: { initialBeautify: true, autoBeautify: true },
      lineNumbers: true,
      indentWithTabs: true,
      autofocus: true,
      tabSize: 2,
      gutters: ["CodeMirror-lint-markers"],
      lint: true,
      autoCloseBrackets: true,
      autoCloseTags: true,
      styleActiveLine: true,
      styleActiveSelected: true,
    });

    this.xmlEditor.setSize(null, "75vh");

    // 初始化JSON编辑器
    this.jsonEditor = CodeMirror.fromTextArea(this.$refs.jsonEvents, {
      mode: "applicaton/ld+json",
      beautify: { initialBeautify: true, autoBeautify: true },
      lineNumbers: true,
      indentWithTabs: true,
      autofocus: true,
      tabSize: 2,
      gutters: ["CodeMirror-lint-markers"],
      autoCloseBrackets: true,
      autoCloseTags: true,
      styleActiveLine: true,
      styleActiveSelected: true,
    });

    this.jsonEditor.setSize(null, "75vh");

    // 为编辑器添加边框
    for (const s of document.getElementsByClassName("CodeMirror")) {
      s.style.border = "1px solid black";
    }
  },
};
</script>

<style>
textarea {
  height: 75vh;
  white-space: nowrap;
  resize: both;
  border: 1px solid black;
}

.cm-editor .cm-placeholder {
  color: red !important;
  text-align: center;
  line-height: 200px;
}

.CodeMirror-editor pre.CodeMirror-placeholder {
  color: red !important;
  text-align: center;
  line-height: 200px;
}

.CodeMirror-editor .CodeMirror-placeholder {
  color: red !important;
  text-align: center;
  line-height: 200px;
}
</style>

问题分析 #

1. 选择器版本不匹配：你混用了CodeMirror 6的样式选择器（.cm-editor .cm-placeholder），而当前使用的是CodeMirror 5，两者DOM结构、类名完全不同。CodeMirror 5的占位符元素是嵌套在.CodeMirror .CodeMirror-code下的pre.CodeMirror-placeholder。
2. 层级选择器错误：你写的.CodeMirror-editor pre.CodeMirror-placeholder等规则，和实际DOM层级不匹配，导致样式无法命中目标元素。

解决步骤 #

1. 修正样式选择器：替换<style>中的占位符样式规则为CodeMirror 5的正确写法：

/* 正确的CodeMirror 5占位符样式 */
.CodeMirror .CodeMirror-code pre.CodeMirror-placeholder {
  color: red !important;
  text-align: center;
  /* 匹配编辑器设置的75vh高度，实现垂直居中 */
  line-height: 75vh;
}

2. 修正mode拼写错误：JSON编辑器的mode属性拼写错误，将applicaton/ld+json改为application/ld+json，避免语法高亮功能失效。

完成以上修改后，占位符的颜色和居中样式即可正常生效。

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