Ace コードエディターを Vue プロジェクトに統合する方法の詳細な図による説明-Vue.js-php.cn

まえがき

Ace を統合する過程で、インターネット上にある情報が比較的断片的であり、中国語の資料が比較的少ないことに気づきました。後の参照を容易にするためにそれを記録し、整理します

Ace コードエディターを Vue プロジェクトに統合する

Ace 構成アイテムの中国語の比較

罠に足を踏み入れる: 解決するAce エディターのカーソルの位置ずれの問題

最適化: オンデマンドで ace-builds を使用する

はじめに

Ace は、JavaScript で書かれた埋め込み可能なコードエディターです。 Sublime、Vim、TextMate などのネイティブエディターの機能とパフォーマンスに匹敵します。あらゆる Web ページや JavaScript アプリケーションに簡単に埋め込むことができます。 Ace はCloud9 IDEの主要エディタとして維持されており、Mozilla Skywriter (Bespin) プロジェクトの後継です。

#Ace 公式 Web サイト
ace.c9.io/build/kitch…

機能

110 を超える言語の構文ハイライト(TextMate/Sublime Text.tm 言語ファイルをインポート可能)
.tmtheme ファイルをインポート可能)
オプションのコマンドライン
処理巨大なドキュメント (400 万件)行数が限界のようです!)
vim および Emacs モードを含む、完全にカスタマイズ可能なキーバインド
正規表現を使用した検索と置換
一致する括弧を強調表示
ソフトタブとリアルタブを切り替える
隠し文字を表示する
マウスを使用してテキストをドラッグアンドドロップする
行を折り返す
コードの折りたたみ
複数のカーソルと選択機能
ライブ構文チェッカー (現在は JavaScript/CoffeeScript/CSS/XQuery)
カット、コピー、ペースト機能

クイックスタート

vue2-ace-editorを直接使用し、手順に従って統合することもできます
ここでは主に ace-builds の使用を記録し、プロジェクト内の Ace コンポーネント

インストール

npm install ace-builds --save-dev复制代码

ログイン後にコピー

インストール後の効果は次のとおりです:

Ace コードエディターを Vue プロジェクトに統合する方法の詳細な図による説明

統合

新しいフォルダー AceEditor を作成します

Ace コードエディターを Vue プロジェクトに統合する方法の詳細な図による説明 ##AceEditor ファイルで、新しい Index.vue を作成します。コードは次のとおりです。

ログイン後にコピー

webpack-resolver.jsの最適化について

webpack環境ではwebpack-resolver.jsをインポートする必要がありますので、まずnode_modules/ace-builds/webpack-resolverを見てみましょう。 ..js ファイルに含まれるモジュールのほとんどは、私たちには使用されていません。直接インポートすると、プロジェクトパッケージのサイズが大幅に増加するため、ここで最適化を行う必要があります:

オンデマンドで導入

AceEditor ファイルで、新しい webpack-resolver.js を作成します。コードは次のとおりです。

ace.config.setModuleUrl('ace/mode/mysql', require('file-loader?esModule=false!ace-builds/src-noconflict/mode-mysql.js')) ace.config.setModuleUrl('ace/mode/text', require('file-loader?esModule=false!ace-builds/src-noconflict/mode-text.js')) ace.config.setModuleUrl('ace/mode/json', require('file-loader?esModule=false!ace-builds/src-noconflict/mode-json.js')) ace.config.setModuleUrl('ace/theme/tomorrow', require('file-loader?esModule=false!ace-builds/src-noconflict/theme-tomorrow.js')) ace.config.setModuleUrl('ace/ext/language_tools', require('file-loader?esModule=false!ace-builds/src-noconflict/ext-language_tools.js'))

ログイン後にコピー

Ace コードエディターを Vue プロジェクトに統合する方法の詳細な図による説明

プロジェクトの src ディレクトリで、新しい registerAce.js

import ACE from '@/components/AceEditor' // 这里是你创建的AceEditor文件夹的路径 export default { install(Vue) { Vue.component('ace', ACE) }, }

ログイン後にコピー

## を作成します。 #Vue プロジェクトのエントリファイル main.js に Ace モジュールを導入し、Vue.use() で ace コンポーネントをグローバルに登録します

import ace from 'ace-builds' import RegistAce from './registAce' Vue.use(ace) Vue.use(RegistAce)

ログイン後にコピー

ace コンポーネント (グローバルコンポーネント) を使用します

ログイン後にコピー

上記Ace の簡単な統合は Vue プロジェクトで完了します。その他の機能については、公式 Web サイトを参照してください:

Ace 公式 Web サイト

設定項目

公式 Web サイト wiki:

github.com/ajaxorg/ace…

Core ace コンポーネント (
editor

、

session、renderer,mouseHandler) 実装 optionProvider インターフェイス

setOption(optionName, optionValue) setOptions({ optionName : optionValue ... }) getOption(optionName) getOptions()

ログイン後にコピー

以下は設定オプションのリストです。特に明記されていない限り、オプションの値はブール値です。

editor.setOption

は、

session/renderer/$mouseHandlerそれに関連付けられたオプションも変更します

エディターオプション

selectionStyle #text #選択されたスタイル highlightActiveLine Boolean true - 現在の行を強調表示します highlightSelectedWord Boolean true - 選択したテキストをハイライト表示 #readOnly Boolean false - 読み取り専用かどうか cursorStyle String ace ace |スリム |スムーズ |ワイドカーソルスタイル mergeUndoDeltas String | Boolean false always マージアンドゥ behavioursEnabled Boolean true - 動作を有効にする wrapBehavioursEnabled Boolean true - 行の折り返しを有効にする autoScrollEditorIntoView Boolean false - スクロールを有効にする copyWithEmptySelection Boolean true - スペースをコピー useSoftTabs Boolean false - UseSoftTabs navigateWithinSoftTabs false #false #- ##レンダラーオプション #オプション名値の型デフォルト値

オプション名	値の種類	オプションの値	関数
##String	##line \| text









			#ブール値
-	ソフトタブジャンプ	enableMultiselect	ブール値
複数の場所を選択

オプションの値

関数 hScrollBarAlwaysVisible Boolean false - 垂直スクロールバーは常に表示されます #非表示の文字を表示 ##showPrintMargin printMarginColumn printMargin fadeFoldWidgets showFoldWidgets showLineNumbers showGutter #- displayIndentGuides Boolean true - 参照行を表示 fontSize Number | String inherit - フォントサイズの設定 fontFamily String 継承 #maxLines Number - - 最大行数 - #scrollPastEnd Boolean | Number 0 - スクロール位置 fixedWidthGutter Boolean false - 固定行番号領域の幅 theme String - #- オプション名値の種類デフォルト値オプションの値備考 #スクロール速度


vScrollBarAlwaysVisible	Boolean	false	-	水平スクロールバーは常に表示されます
highlightGutterLine	Boolean	true	-	強調表示されたエッジ
animatedScroll	Boolean	false	-	スクロールアニメーション
showInvisibles	ブール値	false	-
Boolean	true	-	印刷マージンの表示
Number	80	-	ページの設定margin
Boolean \| Number	false	-	ページマージンの表示と設定
Boolean	false	-	FadeFoldWidgets
Boolean	true	-	FoldWidgets の表示
Boolean	true	-	行番号を表示
ブール値	true	#表示行番号領域


		フォントの設定
			minLines	Number
-	少なくとも行数


テーマ参照パス (「ace/theme/textmate」など)		##mouseHandler オプション

数値

セッションオプション

- - ドラッグ遅延ドラッグが有効かどうかフォーカスタイムアウト #- マウスチップ

	dragDelay	Number	-
dragEnabled	Boolean	true	-
focusTimout	番号	-	-
ツールチップフォローマウス	ブール値	false

オプション名	値の種類	デフォルト値	オプションの値	備考
firstLineNumber	Number	1	-	開始行番号
上書き	ブール値	-	-	やり直し
newLineMode	String	auto	auto \| unix \| windows	改行モード
useWorker	Boolean	-	-	ヘルパーオブジェクトを使用する
useSoftTabs	ブール値	-	-	ソフトタグを使用する
tabSize	Number	-	-	タグサイズ
ラップ	ブール値	-	-	改行
foldStyle	String	-	markbegin \| markbeginend \| Manual	スタイルを折りたたむ
モード	文字列	-	-	コード一致パターン、「ace/mode/text」など

#拡張機能によって定義されたエディタオプション

オプション名値のタイプデフォルト値オプションの値備考 enableBasicAutocompletion Boolean - - 基本的なオートコンプリートを有効にする enableLiveAutocompletion Boolean - - リアルタイムオートコンプリートを有効にするスニペットを有効にするブール値 - - スニペットを有効にする enableEmmet ブール値 - - Emmet を有効にする ElasticTabstops を使用する Boolean - - Flexible tab stop を使用する #カーソルずれの問題の解決

エディタでコンテンツを入力する際、カーソルがずれる問題が発生します。入力するほど、カーソルの位置がずれます。

トラブルシューティングの結果、

非等幅フォント Ace コードエディターを Vue プロジェクトに統合する方法の詳細な図による説明を使用しているため、計算が不正確であることが判明しました。編集ボックスのフォントを # に設定してください# #等幅フォントで問題を解決できます⚠️注: ここにはまだ小さな穴があります。等幅フォントを設定するときは、Mac と Windows を区別する必要があります