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復(fù)制代碼

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;,
    },
    // 這里可以接收更多組件傳遞的參數(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>

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' // 這里是你創(chuàng)建的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