Detailed graphic explanation of how to integrate the Ace code editor in a Vue project-Vue.js-php.cn

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

Copy after login

The effect after installation is as follows:

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

Integration

Create a new folder AceEditor

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

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

Copy after login

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: Detailed graphic explanation of how to integrate the Ace code editor in a Vue project

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

Copy after login

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

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

Copy after login

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

import ace from &#39;ace-builds&#39;
import RegistAce from &#39;./registAce&#39;

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

Copy after login

Use ace components (global components)

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

Copy after login

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

Copy after login

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. Detailed graphic explanation of how to integrate the Ace code editor in a Vue project 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

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!