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 theCloud9 IDEand 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 usevue2-ace-editordirectly and follow the steps to integrate
• Here we mainly record the use of ace-builds and encapsulate the Ace components in the project

Installation

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:

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:

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

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

Use ace components (global components)

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

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

editor.setOptionwill also modifysession/renderer/$mouseHandleroptions associated with it

editor options

##selectionStyle String text line | text Selected style highlightActiveLine Boolean true - Highlight the current line highlightSelectedWord Boolean true - Highlight selected text readOnly Boolean false - Whether it is read only cursorStyle String ace ace | slim | smooth | wide Cursor style mergeUndoDeltas String | Boolean false always Merge Undo behavioursEnabled Boolean true - Enable Behavior wrapBehavioursEnabled Boolean true - Enable line wrapping autoScrollEditorIntoView Boolean false - Enable scrolling copyWithEmptySelection Boolean true - Copy spaces useSoftTabs Boolean false - Use SoftTabs navigateWithinSoftTabs Boolean false - Soft tab jump enableMultiselect Boolean false - Select multiple places

Option name	Value type	Default value	Optional value	Function

renderer options

Option name Value type Default value Optional value Function hScrollBarAlwaysVisible Boolean false - The vertical scroll bar is always visible vScrollBarAlwaysVisible Boolean false - The horizontal scroll bar is always visible highlightGutterLine Boolean true - Highlighted Edge animatedScroll Boolean false - Scroll animation showInvisibles Boolean false - Show invisible characters showPrintMargin Boolean true - Display print margins printMarginColumn Number 80 - Set page margin printMargin Boolean | Number false - Display and set page Margin fadeFoldWidgets Boolean false - Fade FoldWidgets showFoldWidgets Boolean true - Show FoldWidgets showLineNumbers Boolean true - show line number showGutter Boolean true - Display line number area ##displayIndentGuides fontSize fontFamily maxLines minLines scrollPastEnd fixedWidthGutter theme mouseHandler 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"

session options

Option name scrollSpeed dragDelay dragEnabled focusTimout tooltipFollowsMouse

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 ofnon-monospaced fonts. Set the font in the edit box toMonowidth fontcan 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 Usemonospacefont
• You can useConsolasfont under Windows

Reference website/source code

• Ace official website
• vue2-ace-editor