Vueはコードのハイライトを実現するためにモナコを使用しています

npm でモナコエディターをインストールします
npm で monaco-editor-webpack-plugin をインストールします

npm をインストール -g cnpm --registry=https://registry.npm.taobao.org
cnpm インストール

cnpm でモナコエディターをインストールします
cnpm で monaco-editor-webpack-plugin をインストールします

<テンプレート>
 <div class="code-container" ref="container"></div>
</テンプレート>

<スクリプト>
 "monaco-editor" から monaco として * をインポートします。
 sqlStr = とします
 「すべてのエグゼクティブプランを変更するパーセントを追加し、プライマリプリントを存在しますIdentityColルール列Schema compute index select constraint inners session_user contains cantable cantable cantable intersect setuser conting into statistics cruse statistics cross system _user current textsize current Sequal Default Nullif Union Delete of Uniquire Deny Update Desc Offsets UpdateText Diskを使用します。
 エクスポートデフォルト{
 名前: "codeEditor",

 小道具: {
  オプション:
  タイプ: オブジェクト、
  デフォルト（） {
   戻る {
   言語: "java", // シェル、SQL、Python
   readOnly: true // 編集できません};
  }
  },

  価値： {
  タイプ: 文字列、
  デフォルト： ""
  }
 },

 データ（） {
  戻る {
  モナコインスタンス: null、
  プロバイダー: null、
  ヒント: [
   「選択」、
   "入れる"、
   "消去"、
   "アップデート"、
   「テーブルの作成」、
   「テーブルを削除」
   「テーブルの変更」
   「ビューの作成」、
   「ドロップビュー」、
   「インデックスを作成」
   「インデックスを削除」
   「プロシージャの作成」、
   「ドロップ手順」、
   「トリガーを作成」
   「ドロップトリガー」
   「スキーマの作成」、
   「スキーマを削除」
   「ドメインの作成」、
   「ドメインの変更」、
   「ドメインを削除」
   "付与"、
   "拒否"、
   "取り消す"、
   "専念"、
   「ロールバック」、
   「トランザクションの設定」
   "宣言する"、
   「説明」、
   "開ける"、
   "フェッチ"、
   "近い"、
   "準備する"、
   "実行する"、
   "説明する"、
   "形状"、
   「順序」
  ]
  };
 },
 作成された() {
  this.initHints();
 },
 マウント() {
  これを初期化します。
 },
 破棄する前に() {
  このメソッドは、次の例のように動作します。
 },

 メソッド: {
  破棄() {
  (this.monacoInstance) の場合 {
   (this.monacoInstance.getModel()) の場合 {
   この.monacoInstance.getModel().dispose();
   }
   このモナコインスタンスを破棄します。
   this.monacoInstance は null です。
   if (this.provider) {
   このプロバイダーは、
   this.provider = null
   }
  }
  },
  initHints() {
  sqlArr = sqlStr.split(" "); とします。
  this.hints = Array.from(new Set([...this.hints, ...sqlArr])).sort();
  },
  初期化() {
  that = this とする;
  これを破棄します。
  createCompleters を textUntilPosition => { にします。
   //特殊文字をフィルタリングする let _textUntilPosition = textUntilPosition
   .replace(/[\*\[\]@\$\(\)]/g, "")
   .replace(/(\s+|\.)/g, " ");
   //配列に分割 let arr = _textUntilPosition.split(" ");
   //現在の入力値を取得します。let activeStr = arr[arr.length - 1];
   //入力値の長さを取得します。let len ​​= activeStr.length;

   //編集領域の既存のコンテンツを取得します。let rexp = new RegExp('([^\\w]|^)'+activeStr+'\\w*', "gim");
   match = that.value.match(rexp) とします。
   _hints = !match ? [] : match.map(ele => { とします。
   rexp = new RegExp(activeStr, "gim"); とします。
   search = ele.search(rexp) とします。
   ele.substr(検索)を返す
   })

   // 現在の入力値に一致する要素を検索します。let hints = Array.from(new Set([...that.hints, ..._hints])).sort().filter(ele => {
   rexp = new RegExp(ele.substr(0, len), "gim"); とします。
   戻り値 match && match.length === 1 && ele === activeStr || ele.length === 1
    ？ 間違い
    : activeStr.match(rexp);
   });
   //コンテンツヒントを追加 let res = hints.map(ele => {
   戻る {
    ラベル: ele,
    種類: that.hints.indexOf(ele) > -1 ? monaco.languages.CompletionItemKind.Keyword : monaco.languages.CompletionItemKind.Text、
    ドキュメント: ele、
    挿入テキスト:ele
   };
   });
   res を返します。
  };
  this.provider = monaco.languages.registerCompletionItemProvider("sql", {
   provideCompletionItems(モデル、位置) {
   var textUntilPosition = model.getValueInRange({
    開始行番号: 位置.行番号、
    開始列: 1,
    終了行番号: 位置.行番号、
    endColumn: 位置.列
   });
   var suggestions = createCompleters(textUntilPosition);
   戻る {
    提案: 提案
   };

   createCompleters(textUntilPosition) を返します。
   }
  });

  // エディターインスタンスを初期化します this.monacoInstance = monaco.editor.create(this.$refs["container"], {
   値: this.value、
   テーマ: 「vs-dark」、
   自動インデックス: true、
   ...このオプション
  });

  // エディターコンテンツの変更イベントをリッスンします this.monacoInstance.onDidChangeModelContent(() => {
   this.$emit("contentChange", this.monacoInstance.getValue());
  });
  }
 }
 };
</スクリプト>

<style lang="scss" スコープ>
 .コードコンテナ{
 幅: 100%;
 高さ: 100%;
 オーバーフロー: 非表示;
 境界線: 1px 実線 #eaeaea;
 .monaco-editor .scroll-decoration {
  ボックスシャドウ: なし;
 }
 }
</スタイル>

<テンプレート>
 <div class="コンテナ">
 <コードエディタ
  :options="オプション"
  :value="コンテンツ"
  @contentChange="コンテンツ変更"
  スタイル="高さ: 400px; 幅: 600px;"
 </コードエディター>
 </div>
</テンプレート>

<スクリプト>
 「@/components/CodeEditor」からCodeEditorをインポートします。
 エクスポートデフォルト{
 名前: "SQLEditor",
 コンポーネント:
  コードエディター
 },
 データ（） {
  戻る {
  コンテンツ： ""、
  オプション:
   言語: "sql",
   テーマ: 'vs'、
   読み取り専用: false
  }
  };
 },
 作成された() {},
 メソッド: {
  // バインディング エディターの値の変更 contentChange(val) {
  this.content = val;
  }
 }
 };
</スクリプト>


<スタイル スコープ lang="scss">
 。容器 {
 テキスト配置: 左;
 パディング: 10px;
 }
</スタイル>