Vue verwendet Monaco, um Codehervorhebung zu erreichen

npm installiere Monaco-Editor
npm installiere Monaco-Editor-Webpack-Plugin

npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm installieren

cnpm installiere Monaco-Editor
cnpm installiere Monaco-Editor-Webpack-Plugin

<Vorlage>
 <div Klasse = "Code-Container" ref = "Container"></div>
</Vorlage>

<Skript>
 * als Monaco aus „Monaco-Editor“ importieren;
 let sqlStr =
 "ADD EXCEPT PERCENT ALL EXEC PLAN ALTER EXECUTE PRECISION AND EXISTS PRIMARY ANY EXIT PRINT AS FETCH PROC ASC FILE PROCEDURE AUTHORIZATION FILLFACTOR PUBLIC BACKUP FOR RAISERROR BEGIN FOREIGN READ BETWEEN FREETEXT READTEXT BREAK FREETEXTTABLE RECONFIGURE BROWSE FROM REFERENCES BULK FULL REPLICATION BY FUNCTION RESTORE CASCADE GOTO RESTRICT CASE GRANT RETURN CHECK GROUP REVOKE CHECKPOINT HAVING RIGHT CLOSE HOLDLOCK ROLLBACK CLUSTERED IDENTITY ROWCOUNT COALESCE IDENTITY_INSERT ROWGUIDCOL COLLATE IDENTITYCOL RULE COLUMN IF SAVE COMMIT IN SCHEMA COMPUTE INDEX SELECT CONSTRAINT INNER SESSION_USER CONTAINS INSERT SET CONTAINSTABLE INTERSECT SETUSER CONTINUE INTO SHUTDOWN CONVERT IS SOME CREATE JOIN STATISTICS CROSS KEY SYSTEM_USER CURRENT KILL TABLE CURRENT_DATE LEFT TEXTSIZE CURRENT_TIME LIKE THEN CURRENT_TIMESTAMP LINENO TO CURRENT_USER LOAD TOP CURSOR NATIONAL TRAN DATABASE NOCHECK TRANSACTION DBCC NONCLUSTERED TRIGGER DEALLOCATE NOT TRUNCATE DECLARE NULL TSEQUAL DEFAULT NULLIF UNION DELETE OF UNIQUE DENY OFF UPDATE DESC OFFSETS UPDATETEXT DISK ON USE DISTINCT OPEN USER DISTRIBUTED OPENDATASOURCE VALUES DOUBLE OPENQUERY VARYING DROP OPENROWSET VIEW DUMMY OPENXML WAITFOR DUMP OPTION WHEN ELSE OR WHERE END ORDER WHILE ERRLVL OUTER WITH ESCAPE OVER WRITETEXT";
 Standard exportieren {
 Name: "CodeEditor",

 Requisiten: {
  Optionen:
  Typ: Objekt,
  Standard() {
   zurückkehren {
   Sprache: "Java", // Shell, SQL, Python
   readOnly: true // kann nicht bearbeitet werden};
  }
  },

  Wert: {
  Typ: Zeichenfolge,
  Standard: ""
  }
 },

 Daten() {
  zurückkehren {
  monacoInstance: null,
  Anbieter: null,
  Hinweise: [
   "WÄHLEN",
   "EINFÜGEN",
   "LÖSCHEN",
   "AKTUALISIEREN",
   "TABELLE ERSTELLEN",
   "Tabelle löschen",
   "ALTER TABLE",
   "ANSICHT ERSTELLEN",
   "DROP-ANSICHT",
   "INDEX ERSTELLEN",
   "INDEX VERRINGERN",
   "VERFAHREN ERSTELLEN",
   „DROP-VERFAHREN“,
   "TRIGGER ERSTELLEN",
   "Abzug fallen lassen",
   "SCHEMA ERSTELLEN",
   "DROP SCHEMA",
   "DOMAIN ERSTELLEN",
   "ALTER DOMAIN",
   "DOMAIN LÖSCHEN",
   "GEWÄHREN",
   "LEUGNEN",
   "WIDERRUFEN",
   "BEGEHEN",
   "ROLLBACK",
   "Transaktion festlegen",
   "ERKLÄREN",
   "ERKLÄREN",
   "OFFEN",
   "BRINGEN",
   "SCHLIESSEN",
   "VORBEREITEN",
   "AUSFÜHREN",
   "BESCHREIBEN",
   "BILDEN",
   "BESTELLEN NACH"
  ]
  };
 },
 erstellt() {
  dies.initHints();
 },
 montiert() {
  dies.init();
 },
 vorZerstören() {
  dies.entsorgen();
 },

 Methoden: {
  entsorgen() {
  wenn (diese.monacoInstance) {
   wenn (this.monacoInstance.getModel()) {
   dies.monacoInstance.getModel().dispose();
   }
   diese.monacoInstance.dispose();
   this.monacoInstance = null;
   wenn (dieser.Anbieter) {
   dieser.Anbieter.entsorgen();
   dieser.Anbieter = null
   }
  }
  },
  initHints() {
  let sqlArr = sqlStr.split(" ");
  this.hints = Array.from(neues Set([...this.hints, ...sqlArr])).sort();
  },
  init() {
  lass das = dies;
  dies.entsorgen();
  let createCompleters = textUntilPosition => {
   //Sonderzeichen filtern let _textUntilPosition = textUntilPosition
   .replace(/[\*\[\]@\$\(\)]/g, "")
   .replace(/(\s+|\.)/g, " ");
   //In Array schneiden let arr = _textUntilPosition.split(" ");
   //Den aktuellen Eingabewert abrufen let activeStr = arr[arr.length - 1];
   //Länge des Eingabewerts abrufen let len ​​​​= activeStr.length;

   //Den vorhandenen Inhalt im Bearbeitungsbereich abrufen let rexp = new RegExp('([^\\w]|^)'+activeStr+'\\w*', "gim");
   lass match = dieser.Wert.match(rexp);
   lass _hints = !match ? [] : match.map(ele => {
   Lassen Sie rexp = neuer RegExp(activeStr, "gim");
   lass Suche = ele.search(rexp);
   returniere ele.substr(Suche)
   })

   // Elemente finden, die dem aktuellen Eingabewert entsprechen let hints = Array.from(new Set([...that.hints, ..._hints])).sort().filter(ele => {
   let rexp = neuer RegExp(ele.substr(0, len), "gim");
   returniere Übereinstimmung && Übereinstimmungslänge === 1 && Element === activeStr || Elementlänge === 1
    ? FALSCH
    : activeStr.match(rexp);
   });
   //Inhaltshinweise hinzufügen let res = hints.map(ele => {
   zurückkehren {
    Bezeichnung: Element,
    Art: that.hints.indexOf(ele) > -1 ? monaco.languages.CompletionItemKind.Keyword : monaco.languages.CompletionItemKind.Text,
    Dokumentation: ele,
    insertText:ele
   };
   });
   Rückgabewert;
  };
  dieser.Anbieter = monaco.languages.registerCompletionItemProvider("sql", {
   provideCompletionItems(Modell, Position) {
   var textUntilPosition = model.getValueInRange({
    startLineNumber: position.lineNumber,
    Startspalte: 1,
    endLineNumber: position.lineNumber,
    endColumn: position.spalte
   });
   var Vorschläge = createCompleters(textUntilPosition);
   zurückkehren {
    Vorschläge: Vorschläge
   };

   returniere createCompleters(textUntilPosition);
   }
  });

  // Initialisiere die Editorinstanz this.monacoInstance = monaco.editor.create(this.$refs["container"], {
   Wert: dieser.Wert,
   Thema: "vs-dark",
   autoIndex: true,
   …diese.Optionen
  });

  // Auf Inhaltsänderungsereignisse des Editors warten this.monacoInstance.onDidChangeModelContent(() => {
   dies.$emit("contentChange", dies.monacoInstance.getValue());
  });
  }
 }
 };
</Skript>

<style lang="scss" scope>
 .code-container {
 Breite: 100 %;
 Höhe: 100%;
 Überlauf: versteckt;
 Rand: 1px durchgezogen #eaeaea;
 .monaco-editor .scroll-decoration {
  Kastenschatten: keiner;
 }
 }
</Stil>

<Vorlage>
 <div Klasse="Container">
 <Code-Editor
  :Optionen="Optionen"
  :Wert="Inhalt"
  @contentChange="Inhaltsänderung"
  Stil="Höhe: 400px; Breite: 600px;"
 ></Codeeditor>
 </div>
</Vorlage>

<Skript>
 CodeEditor aus "@/components/CodeEditor" importieren;
 Standard exportieren {
 Name: "SQLEditor",
 Komponenten:
  CodeEditor
 },
 Daten() {
  zurückkehren {
  Inhalt: "",
  Optionen:
   Sprache: "SQL",
   Thema: 'vs',
   schreibgeschützt: false
  }
  };
 },
 erstellt() {},
 Methoden: {
  // Änderungen im Wert des Bindungseditors contentChange(val) {
  dieser.Inhalt = Wert;
  }
 }
 };
</Skript>


<style scoped lang="scss">
 .container {
 Textausrichtung: links;
 Polsterung: 10px;
 }
</Stil>