preface

Developers are generally installed in the computer above the IDE to complete the daily development tasks, because the project business needs, users want to write JS script online, pure string, very “cost accounts”. You need an online JS compiler that is lightweight, easy to use, syntax highlighting, line wrapping, and syntax prompt D.

Brace

  • lightweight
  • Automatic prompt
  • Syntax highlighting
  • Word wrap
  • The serial number
  • Code highlighting
  • Automatic indentation
  • Replace the topic
  • Search and replace supports regular expressions
  • Code folding,

Let’s be honest: the reason this article was written was because of the poor use of Monaco. Now I’m replacing Monaco with brace while writing the documentation. Why change it? Because Monaco is too heavy. Our scenarios are simple and not deep. Seriously delays packaging speed and increases package size! But there is no denying that Monaco was one in a million.

Method of use

  • website
[the official documentation] (https://ace.c9.io/#nav=howto) [online demo] (https://ace.c9.io/build/kitchen-sink.html) [github](https://github.com/ajaxorg/ace-builds/blob/master/editor.html)Copy the code
  • The installation
yarn add brace | npm install brace
Copy the code
  • The introduction of
var ace = require('brace') require('brace/mode/javascript') require('brace/theme/monokai') Require ('brace/ext/language_tools') // It's important for the auto-completion prompt to require itCopy the code
  • Initialize the
init(script) { let self = this var editor = ace.edit('javascript-editor') Editor.getsession ().setMode('ace/mode/javascript') // Language editor.setoptions ({// Default :false wrap: True, / / wrapping autoScrollEditorIntoView: false, / / automatic rolling editor view enableLiveAutocompletion: True, / / intelligent completion enableBasicAutocompletion: }) if (script) {editor.setValue(script)} else editor.setValue(this.code) Editor.getsession ().on('change', function() {self.$emit('update:code', editor.getValue())})}Copy the code
  • html
<template>
  <div id="javascript-editor"></div>
</template>
Copy the code
  • css
I set the width, height and some styles for this editorCopy the code
  • Running effect

  • api
require("lib/ace"); # # is introduced into the editor. The setTheme (" ace/theme/solarized_dark "); ## set the template; Introduce the theme-solarized_dark.js template file editor.getSession().setMode("ace/mode/javascript"); ## Set the program language pattern editor.setValue("the new text here"); ## Set content editor.getValue(); # # value editor. Session. GetTextRange (editor) getSelectionRange ()); Editor. insert("Something cool"); # # at the cursor insert editor. Selection. GetCursor (); ## Get the row or column where the cursor is located editor.gotoline (lineNumber); ## Jump to the line editor.session.getLength(); Editor.getsession ().settabSize (4); ## Set the default TAB size editor.getSession().setusesofttabs (true); Document.getelementbyid ('editor').style.fontsize ='12px'; Editor.getsession ().setUseWrapMode(true); Set # # code folding editor. SetHighlightActiveLine (false); # # set the highlight editor. SetShowPrintMargin (false); Editor.setreadonly (true); Set the editor to read onlyCopy the code
  • The event
editor.getSession().on('change', function(e) { // e.type, etc }); // Change event editor.getSession().select.on ('changeSelection', function(e) {}); On ('changeCursor', function(e) {}); // Select the event editor.getSession().select. on('changeCursor', function(e) {}); // Cursor movement eventCopy the code

Fonnie Sauce summary

It basically meets my needs. The next article will be the packaging speed comparison and performance analysis (mainly with Monaca). The next article will be the tutorial of Using Monaco and the comparison with BRACE