codemirror editor vue3ダウンロード - codemirror editor vue3ソースコードダウンロード

codemirror editor vue3

その他のリソース

v2.8.0

ダウンロード

導入

简体中文

Vue3のCodemirrorコンポーネント。このコンポーネントはCodemirror 5に基づいて開発されており、Vue3のみがサポートされています。

公式にサポートされているモードに加えて、ログ出力プレゼンテーションモードが追加されますが、すべてのシナリオに必ずしも適しているわけではありません。

完全なドキュメントとその他のケースについては、CodeMirror-Editor-Vue3ドキュメントを確認してください。

インストール

npm install codemirror-editor-vue3 codemirror@^5 -S

yarn add codemirror-editor-vue3 codemirror@ " >=5.64.0 <6 "

pnpm i codemirror-editor-vue3 codemirror@^5 -S

プロジェクトにTypeScriptサポートが必要な場合は、「@Types/CodeMirror」依存関係をインストールする必要があります。

npm install @types/codemirror -D

グローバルコンポーネントを登録します

グローバル登録コンポーネントを推奨しないでください。これにより、適切に取得できないテンプレート上のプロンプトのタイプが生じます。

main.js:

 import { createApp } from "vue" ;
import App from "./App.vue" ;
import { InstallCodeMirror } from "codemirror-editor-vue3" ;

const app = createApp ( App ) ;
app . use ( InstallCodeMirror ) ;
app . mount ( "#app" ) ;

グローバル登録コンポーネント名はcodemirrorです。たとえば、コンポーネント名をカスタマイズできます。

 app . use ( InstallCodeMirror , { componentName : "customName" } ) ;

コンポーネントで使用します

< template >
  < Codemirror
    v-model:value = " code "
    :options = " cmOptions "
    border
    placeholder = " test placeholder "
    :height = " 200 "
    @change = " change "
  />
</ template >

< script >
import Codemirror from " codemirror-editor-vue3 " ;

// placeholder
import " codemirror/addon/display/placeholder.js " ;

// language
import " codemirror/mode/javascript/javascript.js " ;
// placeholder
import " codemirror/addon/display/placeholder.js " ;
// theme
import " codemirror/theme/dracula.css " ;

import { ref } from " vue " ;
export default {
  components : { Codemirror },
  setup () {
    const code = ref ( `
var i = 0;
for (; i < 9; i++) {
  console.log(i);
  // more statements
} ` );

    return {
      code,
      cmOptions : {
        mode : " text/javascript " , // Language mode
        theme : " dracula " , // Theme
      },
    };
  },
};
</ script >

言語の強調表示

次のリンクをクリックして、対応する言語ケースを表示できます

JavaScript
JSON
CSS
HTML
apl
Yaml

より多くのケースが徐々に追加されており、より多くの言語モードを実現するためにドキュメントを参照することもできます。

コンポーネントの小道具

名前	説明	タイプ	デフォルト
値（Vモデル）	編集者コンテンツ	`string`	""
オプション	codemirror5の構成オプション	EditorConfiguration	default_options
プレースホルダー	編集者プレースホルダーコンテンツCodeMirror関連ファイルを紹介します	`string`	""
国境	エディターの境界線を表示するかどうか	`boolean`	`false`
幅	幅	`string`	`100%`
身長	身長	`string`	`100%`
オリジナルスタイル	オリジナルのスタイルを使用して、このコンポーネントのスタイルの2番目の変更を無効にします（ただし、幅、高さ、境界線には影響しません）	`boolean`	`false`
KeepCursorinend	常に最後の行にマウスの位置を保持します	`boolean`	`false`
マージ	マージモードは、diffパターンとしても使用できます	`boolean`	`false`

イベント

コンポーネントイベント

次の3つは、このコンポーネントによってカプセル化されたイベントのみです。 CodeMirrorイベントをもっと参照してください

イベント名	説明	パラメージ
`change`	値またはインスタンスの変更	`(value: string, cm: Editor) => void`
`input`	入力	`(value: string) => void`
`ready`	Codemirrorコンポーネントがマウントされています	`(cm: Editor) => void;`

Codemirrorイベント

次のイベントは、codemirror5の公式イベントです。詳細については、公式ドキュメントを参照してくださいCodeMirrorイベントを参照してください。このコンポーネントを使用して、コンポーネントを介してイベントを直接バインドできます。

< Codemirror
  v-model : value = " code "
  : options = " { mode: ' text/x-vue ' , theme: ' default ' } "
  border
  placeholder="test-placeholder"
  : height = " 200 "
  @ change = " onChange "
  @ blur = " onBlur "
  @ focus = " onFocus "
  @ scroll = " onScroll "
/>