CodeMirror steuern: Ändern Sie den Stil von Textbereichsplatzhaltern

Question

Ich verwende Version 5.65.7 des CodeMirror-Plugins in einem Textbereich in einer Vuejs-basierten Webanwendung und alles funktioniert einwandfrei und ohne Probleme. Ich möchte meinem Textbereich einen Platzhalter hinzufügen, damit ich die entsprechende Platzhalterdatei zu meiner Anwendung hinzugefügt habe und den Platzhalter in meinem Textbereich sehen kann.

Ich wollte die Schriftfarbe des Platzhalters ändern und ihn zentriert ausrichten, also habe ich versucht, einige Änderungen am Codemirror-Stil vorzunehmen, aber aus irgendeinem Grund hat es überhaupt nicht funktioniert. Können Sie mir sagen, wie ich die Schriftfarbe und den zentrierten Platzhalter eines von CodeMirror gesteuerten Textbereichs ändern kann?

Ich habe mir hier eine ähnliche Frage angesehen: „Platzhalter-Schriftfarbe“ und habe versucht, dasselbe zu tun, aber aus irgendeinem Grund hat es nicht funktioniert.

Ich habe ein Beispielprojekt basierend auf meiner tatsächlichen Anwendung erstellt, um die Probleme in CodeSandBox zu veranschaulichen.

Ich habe versucht, mir die Entwicklungstools anzusehen und habe es ausprobiert, aber es hat nicht wie erwartet funktioniert. Kann mir jemand sagen, was ich falsch mache, und eine Lösung anbieten?

Hier sind die Codebeispiele, die auch in CodeSandBox verfügbar sind:

<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';