Detaillierte grafische Erklärung zur Integration des Ace-Code-Editors in ein Vue-Projekt

Vorwort

Bei der Integration von Ace habe ich festgestellt, dass die im Internet gefundenen Informationen relativ fragmentiert sind und es relativ wenige chinesische Materialien gibt, die hauptsächlich zum späteren Nachschlagen aufgezeichnet und organisiert werden

• Integrieren Sie die Ace-Code-Editor im Vue-Projekt
• Chinesischer Vergleich von Ace-Konfigurationselementen
• Fallstricke: Lösen des Problems der Cursor-Fehlausrichtung des Ace-Editors
• Optimierung: Ace-Builds bei Bedarf verwenden

Einführung

Ace ist ein geschriebener einbettbarer Code-Editor in JavaScript. Es entspricht der Funktionalität und Leistung nativer Editoren wie Sublime, Vim und TextMate. Es kann problemlos in jede Webseite und JavaScript-Anwendung eingebettet werden. Ace wird als Haupteditor für die Cloud9 IDE gepflegt und ist der Nachfolger des Mozilla Skywriter (Bespin)-Projekts. Offizielle Website von Ace tmSprachdatei)

• Über 20 Themen (kann TextMate/Sublime Text .tmtheme-Datei importieren)
• Automatische Einrückung und Aktualisierungen Eine optionale Befehlszeile

Verwaltung großer Dokumente (vier Millionen Zeilen scheinen die Grenze zu sein!)

Vollständig anpassbare Tastenkombinationen, einschließlich VIM- und Emacs-Modi.

• Suchen und Ersetzen mit regulären Ausdrücken. Übereinstimmende Klammern hervorheben Codefaltung
Mehrere Cursor und Auswahlmöglichkeiten
• Live-Syntaxprüfung (derzeit JavaScript/CoffeeScript/CSS/XQuery)
Funktion zum Ausschneiden, Kopieren und Einfügen
• Schnellstart
• Sie können auch
vue2-ace- verwenden Editor
• direkt und befolgen Sie die Schritte zur Integration
• Hier erfassen wir hauptsächlich die Verwendung von Ace-Builds und verpacken die Ace-Komponenten selbst im Projekt
• Installation

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

Der Effekt nach der Installation ist wie folgt:

Integrieren

Neuer Ordner AceEditor

Erstellen Sie in der AceEditor-Datei eine neue index.vue. Der Code lautet wie folgt:

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

Über die Optimierung von webpack-resolver.js

• Im Webpack Schauen wir uns zunächst die Datei „node_modules/ace-builds/webpack-resolver.js“ an, die von uns nicht direkt verwendet wird. Dies erhöht die Kosten erheblich, daher müssen wir hier eine Optimierung vornehmen: Bei Bedarf einführen
• Erstellen Sie in der AceEditor-Datei eine neue webpack-resolver.js. Der Code lautet wie folgt:

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

Erstellen Sie im src-Verzeichnis des Projekts ein neues registerAce.js

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

Fügen Sie das Ace-Modul in die Eintragsdatei main.js des Vue-Projekts ein und Vue.use(), um die Ace-Komponente global zu registrieren

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

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

Verwenden Sie Ace-Komponente (globale Komponente)

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

Das Obige vervollständigt die einfache Integration von Ace in das Vue-Projekt. Weitere Funktionen finden Sie auf der offiziellen Website: Offizielle Ace-Website

Konfigurationselemente

Offizielles Website-Wiki: github.com/ajaxorg/ace…

Ass-Kernkomponenten (editor, session, renderer, mouseHandler) OptionProvider-Schnittstelle implementieren

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

Das Folgende ist eine Liste der Konfigurationsoptionen. Sofern nicht anders angegeben, sind Optionswerte boolesche Werte.

editor.setOption ändert auch die mit session/renderer/$mouseHandler verknüpften Optionen

Editoroptionen

highlightActiveLinehighlightSelectedWordreadOnlycursorStyleStringaceace | falschimmerverschmelzen Rückgängig machen behaviorsEnabledBooleantrue-Enable behaviourswrapBehavioursEnabledBooleantrue-Zeilenumbruch aktivierenautoScrollEditorIntoViewBooleanfalse -Scrollen aktivierencopyWithEmptySelectionBooleantrue -Kopieren. LeerzeichenuseSoftTabsBoolean false-Soft Tabs verwendennavigateWithinSoftTabs Boolean false-Soft Tag JumpenableMultiselectBooleanfalse-Mehrere Orte auswählenOptionsnameWerttypStandardwert

Optionsname	Werttyp	Standardwert	optionaler Wert	Funktion
selectionStyle	String	Text	Zeile |. Stil auswählen
Boolean	true	-	Aktuelle Zeile hervorheben
Boolean	true	-	Ausgewählten Text hervorheben
Boolean	false	-	Ob es schreibgeschützt ist
	Renderer-Optionen

Optionaler Wert

FunctionhScrollBarAlwaysVisibleBooleanfalse-Vertikale Bildlaufleiste ist immer sichtbarv ScrollBarAlways VisibleBooleanfalse- Die horizontale Bildlaufleiste ist immer sichtbar. highlightGutterLine.Boolean Unsichtbare anzeigenshowPrintMarginprintMarginColumn printMarginfadeFoldWidgetsFoldWidgets anzeigen showLineNumbersshowGutter displayIndentGuidesfontSizefontFamilySchriftart einstellenmaxLinesNumber-- auf die Anzahl der ZeilenminLinesNumber. - -scrollPastEndfixedWidthGutterThemamouseHandler-OptionenOptionaler Wert-

		-	Scroll-Animation
Boolean	false	-	Unsichtbare Zeichen anzeigen
Boolean	true	-	Druckränder anzeigen
Nummer	80	-	Seitenränder der Einstellungen
Boolean |. Number	false	-	Ränder anzeigen und festlegen
Boolean	false	-	FoldWidgets ausblenden
Boolean	true	-	Gefaltete Widgets anzeigen
Boolean	true	-	Zeilennummern anzeigen
Boolean	true	-	Zeile Zeilennummernbereich anzeigen
Boolean	true	-	Hilfslinien anzeigen
Number |. String	inherit	-	Schriftgröße festlegen
String	inherit
			Mindestens Zeilenanzahl
Boolean |. Number	0	-	Scrollposition
Boolean	false	-	Feste Zeilennummernbereichsbreite
String	-	-	Theme-Referenzpfad, z. B. „ace/theme/textmate“
		Optionsname	Werttyp	Standardwert
Bemerkungen			ScrollSpeed	Number

-

Scrollgeschwindigkeit dragEnabled

DragDelay

Number

-

-

Drag Delay

Boolean

true

-

Ob das Ziehen aktiviert ist.

Maus-Tipps

Sitzungsoptionen

WrapString--Code-Übereinstimmung Muster, wie zum Beispiel „ace/mode/text“OptionsnameWerttypStandardwertOptionaler WertBemerkungenBasicAutocompletion aktivieren Boolean-

Optionsname	Werttyp	Standardwert	Optionaler Wert	Bemerkungen
firstLineNumber	Number	1	-	Startzeilennummer
overwrite	Boolean	-	-	overwrite
newLineMode	String	auto	auto |. Windows	Neuer Zeilenmodus
useWorker	Boolean	-	-	Hilfsobjekte verwenden
SoftTabs verwenden	Boolean	-	-	Soft-Tabs verwenden
tabSize	Number	-	Etikettengröße
Boolescher Wert ??
Durch Erweiterungen definierte Editoroptionen

-

Grundlegende Autovervollständigung aktivierenLiveAutocompletion aktivierenBoolean--Live-Autovervollständigung aktivieren. enableSnippetsBoolean--Enable SnippetsEmmet aktivierenBoolean--Emmet aktivierenElasticTabstops verwendenBoolean-- Verwenden Sie flexible TabstoppsNon zurückzuführen ist -Monobreite-SchriftartSie können die Schriftart monospace unter Windows verwendenSie können die Schriftart Consolas unter Windows verwenden

Lösen Sie das Problem der Cursor-Fehlausrichtung	Beim Eingeben von Inhalten im Editor tritt zunächst das Problem der Cursorfehlausrichtung auf. Je mehr Inhalte Sie eingeben, desto mehr werden Sie feststellen, dass die Cursorfehlausrichtung auf die Verwendung von	, was zu ungenauen Berechnungen führt. Stellen Sie die Schriftart im Bearbeitungsfeld auf „Monospace-Schriftart“ ein, um das Problem zu lösen. Hinweis: Beim Festlegen der Monospace-Schriftart müssen Sie zwischen Mac unterscheiden. , Windows
Referenzwebsite/Quellcode		Ace offizielle Website		vue2-ace-editor

Das obige ist der detaillierte Inhalt vonDetaillierte grafische Erklärung zur Integration des Ace-Code-Editors in ein Vue-Projekt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!