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 チュートリアル
目次1. 公式ドキュメント2. Vue CLIプロジェクトを作成する1. Vue CLIをインストー...
重要な注意: この記事を読む前に、Docker コンテナに関する知識と、一般的な Docker 操作...
パート3: ❤バックエンドデータ受信を見落とす3つの方法❤ (おすすめ集)パート 2: Web フォ...
関連記事: Win7 x64 に解凍版の mysql 5.7.18 winx64 をインストールする...
Zhihu Discovery コラムのタイトル画像は、通常、以下のように表示されます。明らかに、グ...
3ウェイハンドシェイクフェーズクライアントSYNパケットの再試行回数sysctl -w net.ip...
目次URL モジュール1. 解析メソッド2. フォーマット方法3. 解決方法イベントモジュール(イベ...
Tomcatはプロジェクトにアクセスします。通常はIP + ポート + プロジェクト名です。 Ngi...
承認とは、ユーザーに特定の権限を付与することです。たとえば、新しく作成したユーザーに、すべてのデータ...
序文プロセス管理の役割:サーバーの健全性状態を判定する: プロセスの状態 (メモリ、CPU 占有率な...
Vue エコシステムには Vite と呼ばれる新しいビルド ツールがあり、Vue CLI よりも 1...
ブロック要素HTMLタグ分類の詳細* 住所 - 住所* blockquote - ブロック引用* c...
この記事では、React Native ScrollViewのプルダウンリフレッシュ効果の具体的なコ...
目次1. テンプレート2. ジェネリック3. ジェネリック再帰4. デフォルトのジェネリックパラメー...
目次序文導入JavaScript 履歴 API独自のネイティブJSルーティングを実装するHistor...