Vue CodeMirror realisiert den Effekt des Online-Code-Compilers

npm installiere jshint
npm installiere jsonlint
npm installiere Skript-Loader
npm installiere vue-codemirror

<Vorlage>
  <Codespiegel
    ref="meinCm"
    v-Modell="Editorwert"
    :Optionen="cmOptionen"
    @changes="beiCmCodeChanges"
    @blur="beiCmBlur"
    @keydown.native="beiTastennachunten"
    @mousedown.native="beiMouseDown"
    @paste.native="BeimEinfügen"
  >
  </codemirror>
</Vorlage>

<Skript>
importiere { Codemirror } von „vue-codemirror“;
importiere 'codemirror/keymap/sublime'
importiere "codemirror/mode/javascript/javascript.js";
importiere "codemirror/mode/xml/xml.js";
importiere "codemirror/mode/htmlmixed/htmlmixed.js";
importiere "codemirror/mode/css/css.js";
importiere "codemirror/mode/yaml/yaml.js";
importiere "codemirror/mode/sql/sql.js";
importiere "codemirror/mode/python/python.js";
importiere "codemirror/mode/markdown/markdown.js";
importiere "codemirror/addon/hint/show-hint.css";
importiere "codemirror/addon/hint/show-hint.js";
importiere "codemirror/addon/hint/javascript-hint.js";
importiere "codemirror/addon/hint/xml-hint.js";
importiere "codemirror/addon/hint/css-hint.js";
importiere "codemirror/addon/hint/html-hint.js";
importiere "codemirror/addon/hint/sql-hint.js";
importiere "codemirror/addon/hint/anyword-hint.js";
importiere "codemirror/addon/lint/lint.css";
importiere "codemirror/addon/lint/lint.js";
importiere "codemirror/addon/lint/json-lint";
importiere 'Codemirror/Addon/Auswahl/Active-Line'
importiere "codemirror/addon/hint/show-hint.js";
importiere "codemirror/addon/hint/anyword-hint.js";
erfordern("script-loader!jsonlint");
importiere "codemirror/addon/lint/javascript-lint.js";
importiere "codemirror/addon/fold/foldcode.js";
importiere "codemirror/addon/fold/foldgutter.js";
importiere "codemirror/addon/fold/foldgutter.css";
importiere "codemirror/addon/fold/brace-fold.js";
importiere "codemirror/addon/fold/xml-fold.js";
importiere "codemirror/addon/fold/comment-fold.js";
importiere "codemirror/addon/fold/markdown-fold.js";
importiere "codemirror/addon/fold/indent-fold.js";
importiere "codemirror/addon/edit/closebrackets.js";
importiere "codemirror/addon/edit/closetag.js";
importiere "codemirror/addon/edit/matchtags.js";
importiere "codemirror/addon/edit/matchbrackets.js";
importiere "codemirror/addon/selection/active-line.js";
importiere "codemirror/addon/search/jump-to-line.js";
importiere "codemirror/addon/dialog/dialog.js";
importiere "codemirror/addon/dialog/dialog.css";
importiere "codemirror/addon/search/searchcursor.js";
importiere "codemirror/addon/search/search.js";
importiere "codemirror/addon/display/autorefresh.js";
importiere "codemirror/addon/selection/mark-selection.js";
importiere "codemirror/addon/search/match-highlighter.js";
Standard exportieren {
  Name: "Index",
  Komponenten: {codemirror},
  Requisiten: ["cmTheme", "cmMode", "cmIndentUnit", "autoFormatJson"],
  Daten() {
    zurückkehren {
      Editorwert: '{}',
      cmOptions: {
        :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::3s::::::333:33333333333333333333ag33333333333333333333333333333 es333333333333333333333333333333 es33 nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht dann dann dann dann aber33333333333333333333 nicht3 nicht3 nicht3 nicht3 nicht3 nicht3 nicht3 nicht3 dann3 dann3 aber3 dann3 nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht dann nichtie dasen aber aber abersossoss aberstens aberstensss aberten aber abers :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::3s::::::333:33333333333333333333ag33333333333333333333333333333 es333333333333333333333333333333 es33 nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht dann dann dann dann aber33333333333333333333 nicht3 nicht3 nicht3 nicht3 nicht3 nicht3 nicht3 nicht3 dann3 dann3 aber3 dann3 nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht dann nichtie dasen aber aber abersossoss aberstens aberstensss aberten aber abers :::::::::::
          "CodeMirror-Lint-Marker",
          "CodeMirror-Zeilennummern",
          "CodeMirror-Foldgutter"
        ],
        HighlightSelectionMatches: {
          minZeichen: 2,
          Stil: "Matchhighlight",
          showToken: wahr
        },
      },
      enableAutoFormatJson: this.autoFormatJson == null ? true : this.autoFormatJson, // Ob im JSON-Bearbeitungsmodus automatisch formatiert werden soll, wenn das Eingabefeld den Fokus verliert, true zum Aktivieren, false zum Deaktivieren}
  },
  erstellt() {
    versuchen {
      wenn (!this.editorValue) {
        this.cmOptions.lint = falsch;
        zurückkehren;
      }
      wenn (this.cmOptions.mode === "application/json") {
        wenn (!this.enableAutoFormatJson) {
          zurückkehren;
        }
        dieser.editorValue = dieser.formatStrInJson(dieser.editorValue);
      }
    } fangen (e) {
      console.log("Fehler beim Initialisieren von Codemirror: " + e);
    }
  },
  Methoden: {
    zurücksetzenLint() {
      wenn (!this.$refs.myCm.codemirror.getValue()) {
        dies.$nextTick(() => {
          dies.$refs.myCm.codemirror.setOption("lint", false);
        });
        zurückkehren;
      }
      dies.$refs.myCm.codemirror.setOption("lint", false);
      dies.$nextTick(() => {
        dies.$refs.myCm.codemirror.setOption("lint", true);
      });
    },
    //String als JSON-Formatstring formatieren formatStrInJson(strValue) {
      JSON.stringify zurückgeben(
        JSON.parse(strValue),
        null,
        diese.cmIndentUnit
      );
    },
    onCmCodeChanges(cm, Änderungen) {
      this.editorValue = cm.getValue();
      dies.resetLint();
    },
    // Handhabungsfunktion bei Fokusverlust onCmBlur(cm, event) {
      versuchen {
        let editorValue = cm.getValue();
        wenn (this.cmOptions.mode === "application/json" && editorValue) {
          wenn (!this.enableAutoFormatJson) {
            zurückkehren;
          }
          dieser.editorValue = dieser.formatStrInJson(editorValue);
        }
      } fangen (e) {
        // Nichts tun}
    },
    //Tastatur-Ereignisverarbeitungsfunktion onKeyDown(event) {
      const keyCode = event.keyCode || Ereignis.welches || Ereignis.charCode;
      const Schlüsselkombination =
          Ereignis.Strg-Taste || Ereignis.Alt-Taste || Ereignis.Meta-Taste;
      if (!Schlüsselkombination && Schlüsselcode > 64 && Schlüsselcode < 123) {
        dies.$refs.myCm.codemirror.showHint({ completeSingle: false });
      }
    },
    //Ereignisverarbeitungsfunktion beim Drücken der Maus onMouseDown(event) {
      dies.$refs.myCm.codemirror.closeHint();
    },
    // Paste-Ereignisverarbeitungsfunktion OnPaste(event) {
      wenn (this.cmOptions.mode === "application/json") {
        versuchen {
          dieser.editorValue = dieser.formatStrInJson(dieser.editorValue);
        } fangen (e) {
          // Nichts tun}
      }
    },
  }
}
</Skript>

<Stilbereich>

</Stil>

<Vorlage>
  <div>
    <el-button type="primary" icon="el-icon-circle-check-outline" @click="handleConfirm" rund>
      Klicken Sie auf Speichern</el-button>
    <el-button icon="el-icon-caret-right" type="info" @click="handleRunCode" rund>
      Online ausführen</el-button>
  <Code-Editor
    :cmTheme="cmTheme"
    :cmMode="cmModus"
  >
  </code-editor>
  </div>
</Vorlage>

<Skript>
importiere CodeEditor aus '@/components/CodeEditor/index'
importiere 'codemirror/theme/monokai.css' // Importiere das Monokai-Design importiere 'codemirror/mode/python/python.js' // Importiere Python
Standard exportieren {
  Name: "Index",
  Komponenten:
    CodeEditor
  },
  Daten() {
    zurückkehren {
      cmThema: "monokai",
      cmMode: "python",
    }
  },
  Methoden: {
    handleBestätigen() {},
    handleRunCode() {}
  }
}
</Skript>

<Stil>
.CodeMirror {
  Position: relativ;
  Höhe: 100vh;
  Überlauf: versteckt;
  Rand oben: 10px;
}
</Stil>
<style lang="scss" scoped>
</Stil>