控制 CodeMirror：修改文本区域占位符的样式

Question

我在基于 Vuejs 的 Web 应用程序中的文本区域中使用版本 5.65.7 的 CodeMirror 插件，一切正常，没有任何问题。我想将占位符添加到我的文本区域，因此我已将相应的占位符文件添加到我的应用程序中，并且可以在我的文本区域中看到占位符。

我想更改占位符的字体颜色并将其居中对齐，因此我尝试对 codemirror 样式进行一些修改，但由于某种原因它根本不起作用。您能告诉我如何更改 CodeMirror 控制的文本区域的字体颜色和居中占位符吗？

我在这里查看了一个类似的问题：占位符字体颜色”并尝试执行相同的操作，但由于某种原因它不起作用。

我根据我的实际应用程序创建了一个示例项目来演示 CodeSandBox 中的问题。

我尝试查看开发工具并尝试过，但它没有按预期工作。有人可以让我知道我做错了什么并提供一些解决方法吗？

以下是 CodeSandBox 中也提供的代码示例：

<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() {
    // Make the XML textarea CodeMirror
    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,
    });

    // Set the height for the XML CodeMirror
    this.xmlEditor.setSize(null, "75vh");

    // Make the JSON textarea CodeMirror
    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,
    });

    // Set the height for the JSON CodeMirror
    this.jsonEditor.setSize(null, "75vh");

    // Add the border for all the CodeMirror textarea
    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>

Answer 1

不知何故，我无法在不登录的情况下使用您的codesandbox， 但您可以尝试使用伪类，如下所示：

textarea::placeholder {
  color: red; 
}

请参阅此文档。

Answer 2

如果可能，可以使用 Javascript 来实现此目的 -

let placeholder_el = document.querySelectorAll('pre.CodeMirror-placeholder')[0];
placeholder_el.style['color'] = 'red';
placeholder_el.style['text-align'] =  'center';
placeholder_el.style['line-height'] =  '200px';