Explication graphique détaillée de la façon d'intégrer l'éditeur de code Ace dans un projet Vue-Voir.js-php.cn

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复制代码

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

Explication graphique détaillée de la façon dintégrer léditeur de code Ace dans un projet Vue

Intégrer

Nouveau dossier AceEditor

Explication graphique détaillée de la façon dintégrer léditeur de code Ace dans un projet Vue

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;,
    },
    // 这里可以接收更多组件传递的参数，做一些自定义效果
  },
  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>

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 demande Explication graphique détaillée de la façon dintégrer léditeur de code Ace dans un projet Vue Dans le fichier AceEditor, créez un nouveau webpack-resolver.js, le code est le suivant :

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

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

import ACE from &#39;@/components/AceEditor&#39; // 这里是你创建的AceEditor文件夹的路径
 
export default {
  install(Vue) {
    Vue.component(&#39;ace&#39;, 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 &#39;ace-builds&#39;
import RegistAce from &#39;./registAce&#39;

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

以下是配置选项的列表。除非另有说明，否则选项值为布尔值。

editor.setOption也会修改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

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Explication graphique détaillée de la façon d'intégrer l'éditeur de code Ace dans un projet Vue