Vue codemirrorはオンラインコードコンパイラの効果を実現します

Vue codemirrorはオンラインコードコンパイラの効果を実現します

序文

Web 上でオンライン コード コンパイルの効果を実現したい場合は、 CodeMirrorを再度カプセル化するコンポーネントvue-codemirrorを使用する必要があります。

  • コードの強調表示をサポート
  • モノカイなど62種類のテーマカラー
  • json、sql、javascript、css、xml、html、yaml、markdown、python 編集モードをサポートし、デフォルトは json です。
  • クイック検索をサポート
  • 自動補完プロンプトをサポート
  • 自動マッチング括弧をサポート

環境の準備

npm インストール jshint
npm インストール jsonlint
npm スクリプトローダーをインストールします
npm で vue-codemirror をインストールします

パッケージコンポーネント

プロジェクトのcomponentsvue-codemirror再度カプセル化することができます。

<テンプレート>
  <コードミラー
    ref="myCm"
    v-model="エディター値"
    :options="cmオプション"
    @changes="onCmCodeChanges"
    @blur="onCmBlur"
    @keydown.native="onKeyDown"
    @mousedown.native="onMouseDown"
    @paste.native="貼り付け時"
  >
  </codemirror>
</テンプレート>

<スクリプト>
「vue-codemirror」から { codemirror } をインポートします。
'codemirror/keymap/sublime' をインポートします
「codemirror/mode/javascript/javascript.js」をインポートします。
「codemirror/mode/xml/xml.js」をインポートします。
「codemirror/mode/htmlmixed/htmlmixed.js」をインポートします。
「codemirror/mode/css/css.js」をインポートします。
「codemirror/mode/yaml/yaml.js」をインポートします。
「codemirror/mode/sql/sql.js」をインポートします。
「codemirror/mode/python/python.js」をインポートします。
「codemirror/mode/markdown/markdown.js」をインポートします。
「codemirror/addon/hint/show-hint.css」をインポートします。
「codemirror/addon/hint/show-hint.js」をインポートします。
「codemirror/addon/hint/javascript-hint.js」をインポートします。
「codemirror/addon/hint/xml-hint.js」をインポートします。
「codemirror/addon/hint/css-hint.js」をインポートします。
「codemirror/addon/hint/html-hint.js」をインポートします。
「codemirror/addon/hint/sql-hint.js」をインポートします。
「codemirror/addon/hint/anyword-hint.js」をインポートします。
「codemirror/addon/lint/lint.css」をインポートします。
「codemirror/addon/lint/lint.js」をインポートします。
「codemirror/addon/lint/json-lint」をインポートします。
'codemirror/addon/selection/active-line' をインポートします。
「codemirror/addon/hint/show-hint.js」をインポートします。
「codemirror/addon/hint/anyword-hint.js」をインポートします。
スクリプトローダーのjsonlintが必要です。
「codemirror/addon/lint/javascript-lint.js」をインポートします。
「codemirror/addon/fold/foldcode.js」をインポートします。
「codemirror/addon/fold/foldgutter.js」をインポートします。
「codemirror/addon/fold/foldgutter.css」をインポートします。
「codemirror/addon/fold/brace-fold.js」をインポートします。
「codemirror/addon/fold/xml-fold.js」をインポートします。
「codemirror/addon/fold/comment-fold.js」をインポートします。
「codemirror/addon/fold/markdown-fold.js」をインポートします。
「codemirror/addon/fold/indent-fold.js」をインポートします。
「codemirror/addon/edit/closebrackets.js」をインポートします。
「codemirror/addon/edit/closetag.js」をインポートします。
「codemirror/addon/edit/matchtags.js」をインポートします。
「codemirror/addon/edit/matchbrackets.js」をインポートします。
「codemirror/addon/selection/active-line.js」をインポートします。
「codemirror/addon/search/jump-to-line.js」をインポートします。
「codemirror/addon/dialog/dialog.js」をインポートします。
「codemirror/addon/dialog/dialog.css」をインポートします。
「codemirror/addon/search/searchcursor.js」をインポートします。
「codemirror/addon/search/search.js」をインポートします。
「codemirror/addon/display/autorefresh.js」をインポートします。
「codemirror/addon/selection/mark-selection.js」をインポートします。
「codemirror/addon/search/match-highlighter.js」をインポートします。
エクスポートデフォルト{
  名前: "インデックス",
  コンポーネント: {codemirror},
  プロパティ: ["cmTheme", "cmMode", "cmIndentUnit", "autoFormatJson"],
  データ() {
    戻る {
      エディター値: '{}',
      オプション: {
        : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : :
          「CodeMirror-lint-markers」、
          「CodeMirror-行番号」、
          「CodeMirror-foldgutter」
        ]、
        ハイライト選択一致: {
          最小文字数: 2,
          スタイル: "matchhighlight",
          表示トークン: true
        },
      },
      enableAutoFormatJson: this.autoFormatJson == null ? true : this.autoFormatJson, // json 編集モードで、入力ボックスがフォーカスを失ったときに自動的にフォーマットするかどうか。有効にする場合は true、無効にする場合は false です}
  },
  作成された() {
    試す {
      if (!this.editorValue) {
        this.cmOptions.lint = false;
        戻る;
      }
      this.cmOptions.mode が "application/json" の場合 {
        AutoFormatJsonを有効にする場合
          戻る;
        }
        this.editorValue = this.formatStrInJson(this.editorValue);
      }
    } キャッチ (e) {
      console.log("codemirror の初期化中にエラーが発生しました: " + e);
    }
  },
  メソッド: {
    リセットリント() {
      (!this.$refs.myCm.codemirror.getValue())の場合{
        this.$nextTick(() => {
          this.$refs.myCm.codemirror.setOption("lint", false);
        });
        戻る;
      }
      this.$refs.myCm.codemirror.setOption("lint", false);
      this.$nextTick(() => {
        this.$refs.myCm.codemirror.setOption("lint", true);
      });
    },
    //文字列をJSON形式の文字列としてフォーマットする formatStrInJson(strValue) {
      JSON.stringify() を返す
        JSON.parse(strValue)、
        ヌル、
        this.cmインデント単位
      );
    },
    onCmCodeChanges(cm, 変更) {
      this.editorValue = cm.getValue();
      この関数は、Lint をリセットします。
    },
    // フォーカスを失ったときの処理関数 onCmBlur(cm, event) {
      試す {
        editorValue を cm.getValue() にします。
        if (this.cmOptions.mode === "application/json" && editorValue) {
          AutoFormatJsonを有効にする場合
            戻る;
          }
          エディター値 = this.formatStrInJson(エディター値);
        }
      } キャッチ (e) {
        // 何もしない}
    },
    //キーボードイベント処理関数 onKeyDown(event) {
      const keyCode = event.keyCode || event.which || event.charCode;
      定数キーの組み合わせ =
          イベント.ctrlキー || イベント.altキー || イベント.metaキー;
      if (!キーの組み合わせ && キーコード > 64 && キーコード < 123) {
        this.$refs.myCm.codemirror.showHint({ completeSingle: false });
      }
    },
    //マウスが押されたときのイベント処理関数 onMouseDown(event) {
      this.$refs.myCm.codemirror.closeHint();
    },
    // 貼り付けイベント処理関数 OnPaste(event) {
      this.cmOptions.mode が "application/json" の場合 {
        試す {
          this.editorValue = this.formatStrInJson(this.editorValue);
        } キャッチ (e) {
          // 何もしない}
      }
    },
  }
}
</スクリプト>

<スタイルスコープ>

</スタイル>

このコンポーネントは、デフォルトでjsonコンパイラで構成されています。cmOptions cmOptionsは、コードコンパイラの設定項目が含まれています。追加の機能が必要な場合は、公式ドキュメントの設定も参照してください。次に、表示効果を確認します。

文字列を json 形式で入力したことがわかります。形式が正しくない場合でも、エラー メッセージが表示され、自動的にフォーマットされます。

Python コンパイラ

カプセル化するコンポーネントは、デフォルトでは JSON コンパイラです。他の言語を使用する場合も非常に簡単です。他の言語のモードをインポートするだけです。

<テンプレート>
  <div>
    <el-button type="primary" icon="el-icon-circle-check-outline" @click="handleConfirm" round>
      保存をクリックします</el-button>
    <el-button icon="el-icon-caret-right" type="info" @click="handleRunCode" round>
      オンラインで実行</el-button>
  <コードエディタ
    :cmTheme="cmテーマ"
    :cmMode="cmMode"
  >
  </コードエディター>
  </div>
</テンプレート>

<スクリプト>
'@/components/CodeEditor/index' から codeEditor をインポートします。
import 'codemirror/theme/monokai.css' // monokaiテーマをインポート import 'codemirror/mode/python/python.js' // pythonをインポート
エクスポートデフォルト{
  名前: "インデックス",
  コンポーネント:
    コードエディター
  },
  データ() {
    戻る {
      cmテーマ:「モノカイ」
      cmモード: "python",
    }
  },
  メソッド: {
    ハンドル確認() {},
    ハンドル実行コード() {}
  }
}
</スクリプト>

<スタイル>
.コードミラー {
  位置: 相対的;
  高さ:100vh;
  オーバーフロー: 非表示;
  上マージン: 10px;
}
</スタイル>
<style lang="scss" スコープ>
</スタイル>

効果は以下のとおりです

これで、vue codemirror のオンライン コード コンパイラの実装に関するこの記事は終了です。vue codemirror オンライン コード コンパイラに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • Vue は、codemirror コード エディターに SQL コード フォーマット機能を実装しました。
  • codemirrorプラグインを使用して、vueプロジェクトにコードエディタ機能を実装します。
  • Vue で codemirror を使用する 2 つの方法
  • Vue で codemirror を使用する際に発生する問題
  • Vue で codemirror を使用する詳細な例
  • Vue Demiを使用して、Vue2とVue3の両方と互換性のあるコンポーネントライブラリを構築します。

<<:  Docker-compose インストール yml ファイルの設定方法

>>:  MySQLは外部SQLスクリプトファイルのコマンドを実行します

推薦する

TSで最も一般的な宣言マージ(インターフェースマージ)

目次1. マージインターフェース1.1 非関数メンバー1.2 関数メンバー序文:今日お話ししたいのは...

Win10環境にMysql5.7.23をインストールする際の問題点と落とし穴

たくさんのチュートリアルを読みましたが、うまくインストールできませんでした。しばらく試行錯誤した後、...

Flexレイアウトを使用してヘッドの固定コンテンツ領域のスクロールを実現する方法

ページ ヘッダーの固定レイアウトは、以前は position:fixed を使用して実装されていまし...

Angularが予期しない例外エラーを処理する方法の詳細な説明

前面に書かれたコードがどれだけ適切に記述されていても、すべての可能性のある例外を完全に処理することは...

Windows 10 での MySQL 5.7.17 のインストールと設定方法のグラフィック チュートリアル

この記事では、最新バージョンの MySQL データベース、つまり MySQL 5.7.17 圧縮バー...

CocosCreator でレイヤー管理に常駐ノードを使用する方法

CocosCreator バージョン: 2.3.4ほとんどのゲームにはレイヤー管理機能があり、例えば...

Apache ストレステストツールのインストールと使用

1. ダウンロードApacheの公式サイトhttp://httpd.apache.org/にアクセス...

Linux カーネル デバイス ドライバー proc ファイル システム ノート

/***************** * proc ファイルシステム***************...

CSS3 画像の境界線を学ぶのに役立つ記事

CSS3 border-image プロパティを使用すると、要素の周囲に画像の境界線を設定できます。...

CentOS6 アップグレード glibc 操作手順

目次背景glibc 2.14をコンパイルするソフトリンクを変更するやっと背景テスト環境には Cent...

Docker に fastdfs イメージをインストールする際の注意事項

1. Docker環境を準備する2. fastdfsイメージを検索する 3. イメージをプルするdo...

Vue2.x および Vue3.x のカスタム命令の使用方法とフック関数の原理を理解する

目次Vue2.x の使用法グローバル登録部分登録使用フック機能フック関数のパラメータVue3.x の...

Mac に Windows サービスを備えた仮想マシンをインストールする方法

1. 仮想マシンをダウンロードする公式ダウンロードウェブサイト: https://www.vmwar...

Vueルーティング相対パスジャンプメソッド

目次Vueルーティング相対パスジャンプ1. 属性の追加2.router.resolveメソッドVue...

Windows での MySQL 8.0.16 のインストールと設定方法のグラフィック チュートリアル

この記事は、参考のためにMySQL 8.0.16のインストールグラフィックチュートリアルを記録してい...