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

npm インストール jshint
npm インストール jsonlint
npm スクリプトローダーをインストールします
npm で vue-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) {
          // 何もしない}
      }
    },
  }
}
</スクリプト>

<スタイルスコープ>

</スタイル>

<テンプレート>
  <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" スコープ>
</スタイル>