Control CodeMirror : modifier le style des espaces réservés de la zone de texte

Question

J'utilise la version 5.65.7 du plugin CodeMirror dans une zone de texte dans une application Web basée sur Vuejs et tout fonctionne bien sans aucun problème. Je souhaite ajouter un espace réservé à ma zone de texte. J'ai donc ajouté le fichier d'espace réservé correspondant à mon application et je peux voir l'espace réservé dans ma zone de texte.

Je voulais changer la couleur de la police de l'espace réservé et l'aligner au centre, j'ai donc essayé d'apporter quelques modifications au style codemirror mais pour une raison quelconque, cela n'a pas fonctionné du tout. Pouvez-vous me dire comment changer la couleur de la police et l'espace réservé centré d'une zone de texte contrôlée par CodeMirror ?

J'ai regardé une question similaire ici : Placeholder Font Color" et j'ai essayé de faire la même chose mais pour une raison quelconque, cela n'a pas fonctionné.

J'ai créé un exemple de projet basé sur mon application réelle pour démontrer les problèmes dans CodeSandBox.

J'ai essayé de regarder les outils de développement et je l'ai essayé, mais cela n'a pas fonctionné comme prévu. Quelqu'un peut-il me faire savoir ce que je fais de mal et me proposer une solution de contournement ?

Voici les exemples de code également disponibles dans 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

D'une manière ou d'une autre, je ne peux pas utiliser vos codesandbox sans me connecter, Mais vous pouvez essayer d'utiliser des pseudo-classes comme ceci :

textarea::placeholder {
  color: red; 
}

Veuillez vous référer à cette documentation.

Answer 2

Si possible, utilisez Javascript pour y parvenir -

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