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

まえがき

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

クイック スタート

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

インストール

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

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

統合

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

##AceEditor ファイルで、新しい Index.vue を作成します。コードは次のとおりです。

<template>
  <div
    ref="editorform"
   
    style="height: 250px"
  >
  </div>
</template>

<script>
import ace from &#39;ace-builds&#39;
import &#39;./webpack-resolver&#39; // 自定义webpack-resolver，按需引入
import &#39;ace-builds/src-noconflict/mode-json&#39;
import &#39;ace-builds/src-noconflict/mode-mysql&#39;
import &#39;ace-builds/src-noconflict/mode-text&#39;
import &#39;ace-builds/src-noconflict/theme-tomorrow&#39;
import &#39;ace-builds/src-min-noconflict/ext-language_tools&#39;
import { onMounted, onBeforeUnmount, ref, watch } from &#39;@vue/composition-api&#39;

export default {
  name: &#39;AceEditor&#39;,
  emits: [&#39;onChange&#39;],
  props: {
    value: {
      type: String,
      default: &#39;&#39;,
    },
    // 这里可以接收更多组件传递的参数，做一些自定义效果
  },
  setup(props, vm) {
    let editor = null
    const editorform = ref(null)
    let options = {
      theme: &#39;ace/theme/tomorrow&#39;, // 主题
      mode: &#39;ace/mode/mysql&#39;, // 代码匹配模式
      tabSize: 2, //标签大小
      fontSize: 14, //设置字号
      wrap: true, // 用户输入的sql语句，自动换行
      enableSnippets: true, // 启用代码段
      showLineNumbers: true, // 显示行号
      enableLiveAutocompletion: true, // 启用实时自动完成功能 （比如：智能代码提示）
      enableBasicAutocompletion: true, // 启用基本自动完成功能
      scrollPastEnd: true, // 滚动位置
      highlightActiveLine: true, // 高亮当前行
    }

    const init = () => {
      if (editor) {
        //实例销毁
        editor.destroy()
      }
      //初始化
      editor = ace.edit(editorform.value, options)
      editor.setValue(props.value ? props.value : &#39;&#39;) // 设置内容
      editor.on(&#39;change&#39;, () => {
        vm.emit(&#39;onChange&#39;, editor.getValue())
      })
    }
    
    onMounted(() => {
      init()
    })
    
    onBeforeUnmount(() => {
      editor.destroy()
      editor.container.remove()
    })
    return {
      editorform
    }
  },
}
</script>

<style>
@import &#39;~ace-builds/css/ace.css&#39;;
</style>

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'))

プロジェクトの 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 v-model="content" @onChange="onChange"> </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#選択されたスタイルhighlightActiveLineBooleantrue-現在の行を強調表示しますhighlightSelectedWordBooleantrue-選択したテキストをハイライト表示 #readOnlyBooleanfalse-読み取り専用かどうかcursorStyleStringaceace |スリム |スムーズ |ワイドカーソル スタイルmergeUndoDeltasString | BooleanfalsealwaysマージアンドゥbehavioursEnabledBooleantrue-動作を有効にするwrapBehavioursEnabledBooleantrue-行の折り返しを有効にするautoScrollEditorIntoViewBooleanfalse-スクロールを有効にするcopyWithEmptySelectionBooleantrue-スペースをコピーuseSoftTabsBooleanfalse-UseSoftTabs navigateWithinSoftTabs false#false#-##レンダラー オプション#オプション名値の型デフォルト値

オプション名	値の種類	デフォルト値	オプションの値	関数
##String	##line | text
				#ブール値
-	ソフト タブ ジャンプ		enableMultiselect	ブール値
複数の場所を選択

オプションの値

関数hScrollBarAlwaysVisibleBooleanfalse-垂直スクロール バーは常に表示されます#非表示の文字を表示##showPrintMarginprintMarginColumnprintMarginfadeFoldWidgetsshowFoldWidgets showLineNumbersshowGutter#-displayIndentGuidesBooleantrue-参照行を表示fontSizeNumber | Stringinherit-フォント サイズの設定fontFamilyString継承#maxLinesNumber--最大行数-#scrollPastEndBoolean | Number0-スクロール位置fixedWidthGutterBooleanfalse-固定行番号領域の幅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」など

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

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

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

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

非等幅フォント を使用しているため、計算が不正確であることが判明しました。編集ボックスのフォントを # に設定してください# #等幅フォントで問題を解決できます⚠️注: ここにはまだ小さな穴があります。等幅フォントを設定するときは、Mac と Windows を区別する必要があります

#Mac では実行できます

monospace

フォントを使用します

• Windows では Consolas フォントを使用できます
• 参考 Web サイト/ソース コード

Ace 公式ウェブサイト

• vue2-ace-editor

以上がAce コード エディターを Vue プロジェクトに統合する方法の詳細な図による説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。