Simple enough to use, powerful enough to feature, and a good enough experience

I have published a series of articles about the convenient front-end plug-ins I used in the development of operation and maintenance system. I have published a total of four articles about three excellent plug-ins, namely bootstrap-Duallistbox, Select2 and Datatables. Today, I will continue this series to let more people know about the good things. Benefit!

This article introduces ace.js, a standalone code editor written in JavaScript. Syntax highlighting for more than 120 languages, more than 20 themes in different styles, real-time syntax checking, custom keybindings, code folding, search and replace, automatic indentation, and more

The project address is ace.c9.io

I mainly use it to replace textarea tags in forms, and to enable the display of modified files on the web, such as the use of ACE for modifying configuration files on the Web in the previous configuration center Kerrigan article

The basic use

The introduction of this project is very simple, just import an ace.js file and instantiate it

// Import js file <script SRC ="/static/js/ace.js"></script>

<pre id="content" style="height:620px"Var editor = ace.edit("content");
Copy the code

Github in addition to source files, ACE also intimate prepared compiled project files, to facilitate the use of users, we just need to compile the file directory copy to our project js directory, compiled warehouse address is: github.com/ajaxorg/ace…

It is recommended to also include the ext-searchbox.js file so that you can search directly in the editor using the CTRL +F shortcut

The basic configuration

Ace has a number of configuration options from which you can build your own personality editor

You can use setTheme to set the theme. Note that the theme file must exist and be the same as ace.js and be named theme-theme.js

editor.setTheme("ace/theme/twilight")
Copy the code

By default, the editor is in plain text mode. You can use setMode to set the corresponding language mode of the editor. For example, if you want it to match markdown, you can do this as follows

editor.session.setMode("ace/mode/markdown")
Copy the code

SetFontSize allows you to set the font size of text in the editor

editor.setFontSize(14);
Copy the code

The length of a TAB character can be set by setTabSize

editor.getSession().setTabSize(4);
Copy the code

You can also use setUseSoftTabs to change tabs to Spaces of the corresponding length

editor.session.setUseSoftTabs(true);
Copy the code

If you don’t want to edit, you can set the editor to read-only mode with setReadOnly

editor.setReadOnly(true)
Copy the code

By default, there is a vertical line in the ACE editor to indicate the printed margin, which can be controlled by setShowPrintMargin

editor.setShowPrintMargin(false);
Copy the code

Editor operations

Ace can easily obtain and write the data in the editor, and even only get the selected content. At the same time, it can also achieve the operation of obtaining the number of lines and jumping to lines

Get all the data in the editor with getValue

editor.getSession().getValue()
Copy the code

If some data is selected in the editor, you can use getSelectionRange to get selected data

editor.session.getTextRange(editor.getSelectionRange())
Copy the code

This is useful in implementing SQL queries. If there are multiple SQL queries in the query box, you can select one OF the SQL queries

You can initialize data to the editor by using setValue

editor.getSession().setValue("ops-coffee.cn")
Copy the code

When you want to insert data into the editor, you can use insert to insert data at the cursor

editor.insert('ops-coffee.cn')
Copy the code

GetLength retrieves the total number of rows of data in the editor

editor.session.getLength()
Copy the code

GoLine jumps to the specified line

editor.gotoLine(37)
Copy the code

GetCursor gets the position of the cursor inside the editor, and outputs a dictionary of rows and columns like this: {row:13,column:37}

editor.selection.getCursor()
Copy the code

Search and replace

Ace also implements powerful search and replace capabilities that can be replaced individually or in full

You can search through find

editor.find('ops-coffee', {  
    backwards: false,  
    wrap: false.caseSensitive: false,  
    wholeWord: false,  
    regExp: false  
});  
Copy the code

Find is followed by two parameters. The first parameter is the content to be searched and the second parameter is the dictionary configured for the search. The following parameters can be configured in the dictionary

  • Backwards: Indicates whether to reverse search. Default: false
  • Wrap: Searches to see if the bottom of a document returns to the top. The default is false
  • CaseSensitive: whether to match case search. The default value is false
  • WholeWord: Whether to match entire word searches, default is false
  • Range: indicates the search range. To search the entire document, set this parameter to empty
  • RegExp: Searches for regular expressions. The default is false
  • “Start” : search the start position
  • SkipCurrent: indicates whether to not search for the current row. The default value is false

FindAll allows you to highlight all of your searches

editor.findAll();
Copy the code

FindNext can find the next found content

editor.findNext();  
Copy the code

FindPrevious Finds the last match

editor.findPrevious();  
Copy the code

Replace allows you to replace the string found by the current find

editor.replace('ops-coffee.cn'); 
Copy the code

With replaceAll, you can replace everything found by find

editor.replaceAll('ops-coffee.cn');
Copy the code

Note that both replace and replaceAll need to be used with find

To monitor changes

Another powerful feature of ACE is the ability to monitor the editor, not only for changes in content, but also for changes in selected content, and even cursor changes

Change allows you to listen for changes in the editor’s content

editor.getSession().on('change'.function(e) {
    console.log('Content has changed')});Copy the code

ChangeSelection listens for changes in the selection

editor.getSession().selection.on('changeSelection'.function(e) {
    console.log('Selection has changed')});Copy the code

Even cursor changes can be monitored through changeCursor

editor.getSession().selection.on('changeCursor'.function(e) {
    console.log('Monitor cursor changes')});Copy the code

Replace the textarea

The textarea in HTML is weak, even the most basic line break cannot be implemented, so I usually use ACE to replace the Textarea in the form. However, by default, Submit cannot automatically obtain the data of the Pre tag for submission. How should I deal with this?

An easy way to do this is to hide the Textarea, create an ACE editor to replace it, and then detect changes in the editor and automatically populate the Textarea, as shown in the following example

<form class="form-horizontal" id="modalForm_Content" method="post" action="">{% csrf_token %}
  <div class="form-group">
    <label class="col-md-2 control-label"> Content </label> <div class="col-md-9">
      <textarea class="form-control" id="form_content" name="content" rows="20"></textarea>
      <pre id="content" style="height:415px"></pre> </div> </div> </form>"content");
var textarea = $('textarea[name="content"]').hide();
editor.getSession().on('change'.function(){
  textarea.val(editor.getSession().getValue());
});
Copy the code

Perfect complement to textarea, simple to use and powerful enough

Related articles recommended reading:

  • You can write a small program without a foundation
  • Write a freehand static page generator using Django