Detailed graphic explanation of how to integrate the Ace code editor in a Vue project

Preface

In the process of integrating Ace, I found that the information found on the Internet is relatively fragmented, and there are relatively few Chinese materials. This article mainly records and organizes it to facilitate subsequent reference

• Integrating the Ace code editor into the Vue project
• Chinese comparison of Ace configuration items
• Stepping into the trap: Solving the Ace editor cursor misalignment problem
• Optimization: Use ace-builds on demand

Introduction

Ace is an embeddable code editor written in JavaScript. It matches the functionality and performance of native editors like Sublime, Vim, and TextMate. It can be easily embedded into any web page and JavaScript application. Ace is maintained as the primary editor for the Cloud9 IDE and is the successor to the Mozilla Skywriter (Bespin) project.

• Ace official website
• Online demo: ace.c9.io/build/kitch…

Features

• Syntax highlighting for over 110 languages(Can import TextMate/Sublime Text .tmlanguage files)
• More than 20 themes (can import TextMate/Sublime Text .tmtheme files)
• Automatic indentation and upgrade
• An optional command line
• processing Huge documentation (four million lines seems to be the limit!)
• Fully customizable keybindings, including vim and Emacs modes
• Search and replace using regular expressions
• Highlight matching brackets
• Switch between soft tabs and real tabs
• Show hidden characters
• Use mouse to drag and drop text
• Wrap lines
• Code folding
• Multiple cursors and selections
• Live syntax checker (currently JavaScript/CoffeeScript/CSS/XQuery)
• Cut, copy and paste function

Quick start

• You can also use vue2-ace-editor directly and follow the steps to integrate
• Here we mainly record the use of ace-builds and encapsulate the Ace components in the project

Installation

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

The effect after installation is as follows:

Integration

Create a new folder AceEditor

##In the AceEditor file, create a new index.vue, the code is as follows:

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

About the optimization of webpack-resolver.js

In the webpack environment, webpack-resolver.js needs to be imported. Let’s take a look at node_modules/ace-builds/webpack-resolver first. .js file, most of the modules in it are not used by us. If imported directly, it will greatly increase the size of the project package, so we need to do some optimization here:

Introduce on demandIn the AceEditor file , create a new webpack-resolver.js, the code is as follows:

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

In the src directory of the project, create a new registerAce.js

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

Introduce the Ace module into the entry file main.js of the Vue project, Vue.use() globally registers ace components

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

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

Use ace components (global components)

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

Above, the simple integration of Ace is completed in the Vue project. For more functions, please refer to the official website :

Ace official website

Configuration items

Official website wiki:

github.com/ajaxorg/ace…

Core ace components (

editor, session, renderer, mouseHandler) implement optionProvider interface

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

The following are List of configuration options. Unless otherwise stated, option values ​​are Boolean.

editor.setOption will also modify session/renderer/$mouseHandleroptions associated with it

editor options

##selectionStyleStringtextline | textSelected stylehighlightActiveLineBooleantrue-Highlight the current linehighlightSelectedWordBooleantrue-Highlight selected textreadOnlyBooleanfalse-Whether it is read onlycursorStyleStringaceace | slim | smooth | wideCursor stylemergeUndoDeltasString | BooleanfalsealwaysMerge UndobehavioursEnabledBooleantrue-Enable BehaviorwrapBehavioursEnabledBooleantrue-Enable line wrappingautoScrollEditorIntoViewBooleanfalse-Enable scrollingcopyWithEmptySelectionBooleantrue-Copy spacesuseSoftTabsBooleanfalse-Use SoftTabs navigateWithinSoftTabsBooleanfalse-Soft tab jumpenableMultiselectBooleanfalse-Select multiple places

Option name	Value type	Default value	Optional value	Function

renderer options

Option nameValue typeDefault valueOptional valueFunctionhScrollBarAlwaysVisibleBooleanfalse-The vertical scroll bar is always visiblevScrollBarAlwaysVisibleBooleanfalse-The horizontal scroll bar is always visiblehighlightGutterLine Booleantrue-Highlighted EdgeanimatedScrollBoolean false-Scroll animationshowInvisiblesBooleanfalse-Show invisible charactersshowPrintMarginBooleantrue- Display print marginsprintMarginColumnNumber80- Set page marginprintMarginBoolean | Numberfalse-Display and set page MarginfadeFoldWidgetsBooleanfalse-Fade FoldWidgetsshowFoldWidgetsBooleantrue-Show FoldWidgets showLineNumbersBooleantrue-show line numbershowGutter Booleantrue-Display line number area##displayIndentGuidesfontSizefontFamilymaxLinesminLinesscrollPastEndfixedWidthGutterthememouseHandler options

Boolean	true	-	Show reference line
Number | String	inherit	-	Set font size
String	inherit		Set font
Number	-	-	Maximum number of lines
Number	-	-	At least the number of lines
Boolean | Number	0	-	Scroll Position
Boolean	false	-	Fixed line number area width
String	-	-	Theme reference path, such as "ace/theme/textmate"

Option namescrollSpeeddragDelaydragEnabledfocusTimouttooltipFollowsMouse

session options

Value type	Default value	Optional value	Remarks
Number	-	-	Scroll Speed
Number	-	-	Drag Delay
Boolean	true	-	Whether drag is enabled
Number	-	-	Focus Timeout
Boolean	false	-	Mouse Tip

Option name	Value type	Default value	Optional value	Remarks
firstLineNumber	Number	1	-	Starting line number
overwrite	Boolean	-	-	Redo
newLineMode	String	auto	auto | unix | windows	New Line Mode
useWorker	Boolean	-	-	Use helper objects
useSoftTabs	Boolean	-	-	Use soft tags
tabSize	Number	-	-	Tag size
wrap	Boolean	-	-	Line break
foldStyle	String	-	markbegin | markbeginend | manual	Collapse style
mode	String	-	-	Code Match pattern, such as "ace/mode/text"

editor options defined by extensions

Option name	Value type	Default value	Optional value	Remarks
enableBasicAutocompletion	Boolean	-	-	Enable Basic Autocompletion
enableLiveAutocompletion	Boolean	-	-	Enable real-time autocomplete
enableSnippets	Boolean	-	-	Enable snippet
enableEmmet	Boolean	-	-	Enable Emmet
useElasticTabstops	Boolean	-	-	use Flexible tab stops

Solving the problem of cursor misalignment

When inputting content in the editor, the problem of cursor misalignment will occur. It initially looks like Normally, the more content you input, the more the cursor will be misaligned. After troubleshooting, it was found that the calculation was inaccurate because of the use of non-monospaced fonts. Set the font in the edit box to Monowidth font can solve the problem

⚠️Note: There is still a small pit here. When setting the monowidth font, you need to distinguish between Mac and Windows

• Can be done under Mac Use monospace font
• You can use Consolas font under Windows

Reference website/source code

• Ace official website
• vue2-ace-editor

The above is the detailed content of Detailed graphic explanation of how to integrate the Ace code editor in a Vue project. For more information, please follow other related articles on the PHP Chinese website!