Control CodeMirror: Ubah suai gaya ruang letak kawasan teks

Question

Saya menggunakan versi 5.65.7 pemalam CodeMirror dalam textarea dalam aplikasi web berasaskan Vuejs dan semuanya berfungsi dengan baik tanpa sebarang masalah. Saya ingin menambah ruang letak pada textarea saya supaya saya telah menambah fail pemegang tempat yang sepadan pada aplikasi saya dan saya boleh melihat ruang letak dalam textarea saya.

Saya ingin menukar warna fon pemegang tempat dan menyelaraskannya ke tengah, jadi saya cuba membuat beberapa pengubahsuaian pada gaya codemirror tetapi atas sebab tertentu ia tidak berfungsi sama sekali. Bolehkah anda memberitahu saya cara menukar warna fon dan pemegang tempat berpusat kawasan teks terkawal CodeMirror?

Saya melihat soalan yang sama di sini: Warna Fon Pemegang Tempat" dan cuba melakukan perkara yang sama tetapi atas sebab tertentu ia tidak berjaya.

Saya mencipta contoh projek berdasarkan aplikasi sebenar saya untuk menunjukkan isu dalam CodeSandBox.

Saya cuba melihat alat dev dan mencubanya tetapi ia tidak berfungsi seperti yang diharapkan. Bolehkah seseorang memberitahu saya apa yang saya lakukan salah dan memberikan beberapa penyelesaian?

Berikut ialah contoh kod yang juga tersedia dalam 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

Entah bagaimana saya tidak boleh menggunakan kotak kod anda tanpa log masuk, Tetapi anda boleh cuba menggunakan kelas pseudo seperti ini:

textarea::placeholder {
  color: red; 
}

Sila rujuk dokumentasi ini.

Answer 2

Jika boleh, gunakan Javascript untuk mencapai ini -

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