Avant-propos

Dans le processus d'intégration d'Ace, j'ai constaté que les informations trouvées sur Internet sont relativement fragmentées et qu'il existe relativement peu de documents chinois. Cet article les enregistre et les organise principalement pour référence ultérieure

• Intégrer le. éditeur de code Ace dans le projet Vue
• Comparaison chinoise des éléments de configuration Ace
• Pièges?: résoudre le problème de désalignement du curseur de l'éditeur Ace
• Optimisation?: utiliser les builds ace à la demande

Introduction

Ace est un éditeur de code intégrable écrit en JavaScript. Il correspond aux fonctionnalités et aux performances des éditeurs natifs comme Sublime, Vim et TextMate. Il peut être facilement intégré à n’importe quelle page Web et application JavaScript. Ace est maintenu en tant qu'éditeur principal du Cloud9 IDE et est le successeur du projet Mozilla Skywriter (Bespin).

• Site officiel d'Ace
• Démo en ligne?: ace.c9.io/build/kitch…

Fonctionnalités

• Plus de 110 langues Surlignage de la syntaxe (peut importer TextMate/Sublime Text . tmlangage)
• Plus de 20 thèmes (peut importer TextMate/Sublime Text .tmtheme file)
• Indentation et mises à niveau automatiques
• Une ligne de commande facultative
• Gestion de documents volumineux (quatre millions de lignes, cela semble être la limite?!)
• Combinaisons de touches entièrement personnalisables, y compris les modes vim et Emacs
• Recherche et remplacement à l'aide d'expressions régulières
• Mettez en surbrillance les parenthèses correspondantes
• Basculez entre les onglets virtuels et réels
• Affichez les caractères cachés
• Faites glisser et déposez le texte avec la souris
• Retour à la ligne
• Pliage de code
• Curseurs et sélections multiples
• Vérificateur de syntaxe en direct (actuellement JavaScript/CoffeeScript/CSS/XQuery)
• Couper, copier et coller Fonction

Démarrage rapide

• Vous pouvez également utiliser vue2-ace-editor directement et suivez les étapes pour l'intégrer
• Ici, nous enregistrons principalement l'utilisation des ace-builds et emballons vous-même les composants Ace dans le projet

Installation

npm?install?ace-builds?--save-dev復(fù)制代碼

L'effet après l'installation est le suivant?:

Intégrer

Nouveau dossier AceEditor

Dans le fichier AceEditor, créer un nouveau index.vue, le code est le suivant :

<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;,
    },
    // 這里可以接收更多組件傳遞的參數(shù)，做一些自定義效果
  },
  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, //標(biāo)簽大小
      fontSize: 14, //設(shè)置字號(hào)
      wrap: true, // 用戶輸入的sql語(yǔ)句，自動(dòng)換行
      enableSnippets: true, // 啟用代碼段
      showLineNumbers: true, // 顯示行號(hào)
      enableLiveAutocompletion: true, // 啟用實(shí)時(shí)自動(dòng)完成功能 （比如：智能代碼提示）
      enableBasicAutocompletion: true, // 啟用基本自動(dòng)完成功能
      scrollPastEnd: true, // 滾動(dòng)位置
      highlightActiveLine: true, // 高亮當(dāng)前行
    }

    const init = () => {
      if (editor) {
        //實(shí)例銷毀
        editor.destroy()
      }
      //初始化
      editor = ace.edit(editorform.value, options)
      editor.setValue(props.value ? props.value : &#39;&#39;) // 設(shè)置內(nèi)容
      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>

A propos de l'optimisation de webpack-resolver.js

Dans l'environnement webpack , webpack-resolver.js doit être importé. Jetons d'abord un coup d'?il au fichier node_modules/ace-builds/webpack-resolver.js. La plupart des modules qu'il contient ne sont pas utilisés par nous. augmentera considérablement le co?t. La taille du package du projet, nous devons donc optimiser ici : Introduire sur demandeDans le fichier AceEditor, créez un nouveau webpack-resolver.js, le code est le suivant :

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

Dans le répertoire src du projet, créez un nouveau registerAce.js

import ACE from '@/components/AceEditor' // 這里是你創(chuàng)建的AceEditor文件夾的路徑
 
export default {
  install(Vue) {
    Vue.component('ace', ACE)
  },
}

Introduisez le module Ace dans le fichier d'entrée main.js du projet Vue, et Vue.use() pour enregistrer globalement le composant ace

import ace from 'ace-builds'
import RegistAce from './registAce'

Vue.use(ace)
Vue.use(RegistAce)

Utilisez l'as composant (composant global)

<ace v-model="content" @onChange="onChange"> </ace>

Ce qui précède complète l'intégration simple d'Ace dans le projet Vue Pour plus de fonctions, veuillez vous référer au site officiel : Site officiel d'Ace

éléments de configuration

Wiki du site officiel : github. .com/ajaxorg/ace…

Composants principaux d'Ace (éditeur, session, rendu, mouseHandler ) implémentez l'interface optionProvidereditor, session, renderer, mouseHandler) implement optionProvider interface

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

以下是配置選項(xiàng)的列表。除非另有說(shuō)明，否則選項(xiàng)值為布爾值。

editor.setOption也會(huì)修改session/renderer/$mouseHandlerrrreee

Ce qui suit est une liste d'options de configuration. Sauf indication contraire, les valeurs des options sont booléennes. ????editor.setOption modifiera également les options associées à session/renderer/$mouseHandler??

options de l'éditeur

fauxtoujoursfusion Annuler behaviorsEnabledBooleantrue-Enable behaviorswrapBehaviorsEnabledBooleantrue- Activer le retour à la ligneautoScrollEditorIntoViewBooleanfalse -Activer le défilementcopyWithEmptySelectionBooleantrue -Copier les espacesuseSoftTabsBooleanfal se-Utiliser les onglets souplesnavigateWithinSoftTabs Boolean false-soft tag jumpenableMultiselectBooleanfalse-select multiple placesNom de l'optionType de valeur

nom de l'option	type de valeur	valeur par défaut	valeur facultative	fonction
selectionStyle	String	texte	ligne | texte	Sélectionnez le style
highlightActiveLine	Boolean	true	-	Surligner la ligne actuelle
highlightSelectedWord	Boolean	true	-	Surligner le texte sélectionné
readOnly	Boolean	false	-	Qu'il soit en lecture seule
cursorStyle	String	ace	ace slim |
		options de rendu

Valeur par défaut

Valeur facultativeFonctionhScrollBarAlwaysVisibleBooleanfalse-La barre de défilement verticale est toujours visiblevScrollBarAlways VisibleBooleanfalse- La barre de défilement horizontale est toujours visible. -Animation de défilementshowInvisibles Boolean false-Afficher les caractères invisiblesshowPrintMarginBooleantrue-Afficher les marges d'impressionprintMarginColumn Numéro80-Marges de la page Paramètres printMarginBoolean | Numberfalse-Afficher et définir les margesfadeFoldWidgetsBooleanfalse- Fade FoldWidgetsshowFoldWidgets Boolean true-Afficher les widgets pliésshowLineNumbersBooleantrue-Afficher les numéros de ligneshowGutter Booleantrue-Afficher la zone du numéro de lignedisplayIndentGuidesBooleantrue-Guides d'affichagefontSizeNumber | Stringinherit-Définir la taille de la policefontFamilyString hériter--Boolean | Number0-Position du défilementfixedWidthGutterBooleanfalse-Zone de numéro de ligne fixe largeur thèmeString- -Chemin de référence du thème, tel que "ace/theme/textmate"Nom de l'optionType de valeurValeur par défautValeur facultativeRemarques scrollSpeedNumber--vitesse de défilement

	Définir la police		maxLines	Number
-	au nombre de lignes		minLines	Number
-	Au moins nombre de lignes		scrollPastEnd
			mouseHandler options

dragDelay

Number--drag delaydragEnabledBooleantrue - Indique si le glissement est activéfocusTimoutNumber--Focus TimeouttooltipFollowsMouseBooleanfalse - Conseils pour la sourisOptions de session

-Numéro de la ligne de départoverwrite --- ---options d'édition définies par les extensionsActiver la saisie semi-automatique de base

	overwrite	Boolean	-	-
newLineMode	String	auto	auto | unix | Ouvrier	Booléen
-	utiliser des objets d'assistance		utiliserSoftTabs	Boolean
-	utiliser des onglets souples		tabSize	Number
-	Taille de l'étiquette		wrap	Booléen
-	line wrap		foldStyle	String
markbegin | manuel	folding style		mode	Str ing
-	Correspondance des codes motif, tel que "ace/mode/text"
Nom de l'option	Type de valeur	Valeur par défaut	Valeur facultative	Remarques
	activer la complétion automatique de base	Boolean	-	-

enableLiveAutocompletionBooleanBoolean---Résolvez le problème de désalignement du curseurLors de la saisie de contenu dans l'éditeur, un problème de désalignement du curseur se produira. Cela semble normal au début. Plus vous saisissez de contenu, plus vous constaterez de désalignement du curseur. Après le dépannage, vous avez constaté que cela était d? à l'utilisation de Non. -police monowidth, ce qui entra?ne des calculs inexacts. Définissez la police dans la zone d'édition sur pour résoudre le problème??Remarque?: il y a un petit trou ici. Vous devez faire la distinction entre Mac lors de la définition de la police monospace. , WindowsSite Web de référence/code sourceAce site officiel vue2-ace-editor

-	-	Activer la saisie semi-automatique en direct		enableSnippets
-	Activer snippets		enableEmmet	Boolean
-	Activer Emmet		useElasticTabstops	Boolean
-	Utilisez des taquets de tabulation flexibles
Police monospace			Vous pouvez utiliser la police monospace sous Windows	Vous pouvez utiliser la police Consolas sous Windows