Vue 言語と要素コンポーネントを使用して、コード コンテンツの入力を必要とし、ハイライト表示が可能で、異なる言語を切り替え、キーワード補完をサポートし、異なるバージョン間でコードを左右に比較できるオンライン コード エディターを作成する必要があります。これが要件です。 なぜモナコが選ばれたのかについては、vue(要素)のコードハイライトプラグインの包括的な比較をご覧ください。 さあ、始めましょう! まず、monaco-editorコンポーネントとmonaco-editor-webpack-pluginコンポーネントをダウンロードする必要があります。 npm でモナコエディターをインストールします npm で monaco-editor-webpack-plugin をインストールします もちろん、npm のダウンロードは非常に遅いので、Taobao などの国内ミラーに変更してください。案の定、速度は急速に上昇しました。 npm をインストール -g cnpm --registry=https://registry.npm.taobao.org cnpm インストール cnpm でモナコエディターをインストールします cnpm で monaco-editor-webpack-plugin をインストールします ディレクトリ構造はnode_modulesで確認できます。 コアコードは以下のとおりです まず、他のページがインポートして呼び出すコンポーネントを記述します。 コードエディター.vue <テンプレート> <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 { ボックスシャドウ: なし; } } </スタイル> このページで使用するインポートページ インデックス.vue <テンプレート> <div class="コンテナ"> <コードエディタ :options="オプション" :value="コンテンツ" @contentChange="コンテンツ変更" スタイル="高さ: 400px; 幅: 600px;" </コードエディター> </div> </テンプレート> <スクリプト> 「@/components/CodeEditor」からCodeEditorをインポートします。 エクスポートデフォルト{ 名前: "SQLEditor", コンポーネント: コードエディター }, データ() { 戻る { コンテンツ: ""、 オプション: 言語: "sql", テーマ: 'vs'、 読み取り専用: false } }; }, 作成された() {}, メソッド: { // バインディング エディターの値の変更 contentChange(val) { this.content = val; } } }; </スクリプト> <スタイル スコープ lang="scss"> 。容器 { テキスト配置: 左; パディング: 10px; } </スタイル> 効果は以下のとおりです コードは、以下に示すように、自動的に効果を促します。 コードの強調表示効果、コードセグメントの折りたたみ効果、右側のプレビュー効果は次のとおりです。 上記は、Vue がモナコを使用してコードのハイライトを実現する方法の詳細です。Vue のコードのハイライトの詳細については、123WORDPRESS.COM の他の関連記事に注目してください。 以下もご興味があるかもしれません:
|
<<: Linux でのログ サーバーの設定に関するグラフィック チュートリアル
>>: CentOS 6.5 インストール mysql5.7 チュートリアル
この記事では、例を使用して、データベースを削除せずに MySQL 内のすべてのテーブルをすばやく削除...
導入同時接続数を制限するモジュールは http_limit_conn_module です。アドレス:...
問題の説明: phpstorm の SFTP ホストを 192.168.122.1 に設定すると、接...
変更後: innodb_buffer_pool_size=576M ->256M InnoDB...
目次双方向バインディングの原理ngモデルレンダリングカスタム双方向バインディングプロパティコンポーネ...
macにbrewを使ってphp56をインストールしたところ、 opensslがバージョン1.1だった...
この記事では、簡単なポップアップウィンドウ効果を実現するためのjQueryの具体的なコードを参考まで...
多くの場合、Linux システムに Web サービス アプリケーション (Tomcat、Apache...
目次概要インデックスデータ構造バイナリツリー赤黒木BツリーB+ツリーハッシュ索引InnoDB インデ...
この記事の例では、VUEコンポーネントに基づいて都市リストエフェクトを実装するための具体的なコードを...
これまでの仕事では、開発サーバーは一般的にTomcatでした。データソースは、多くの場合、appli...
目次1. beforeCreate & created 2. マウント前とマウント済み3. ...
目次折りたたむ(減らす) for...of の使用whileループの使用折り畳み実装に近い展開する配...
1. プロジェクト構造 2.Tomcat.javaを呼び出す パッケージ com.calltomca...
前回の記事では、Docker Desktop をインストールし、Kubernetes を有効にしまし...