Ace在线代码编辑器使用

旧城等待， 2021-09-02 08:24 689阅读 0赞

这边文章[https://blog.csdn.net/liuxiao723846/article/details/106732401][https_blog.csdn.net_liuxiao723846_article_details_106732401] 介绍了Ace的使用，本文围绕Ace的api深入介绍其具体功能。

官网api使用文档：[https://ace.c9.io/\#nav=howto][https_ace.c9.io_nav_howto]

### 1、基本配置： ###

ace有许多的配置项可供选择，通过这些配置项可以打造自己的个性编辑器

你可以通过`setTheme`来设置主题，需要注意的是主题文件要存在，并且需要与ace.js同级，命名规则为`theme-主题名.js`

editor.setTheme("ace/theme/twilight")

默认情况下编辑器为纯文本模式，你可以通过`setMode`来设置编辑器对应的语言模式，例如你想让其匹配markdown，就可以像下边这样配置，同样需要语言模式的文件存在，文件与ace.js同级，命名规则为`mode-语言模式.js`

editor.session.setMode("ace/mode/markdown")

通过`setFontSize`可以设置编辑器内文本字体的大小

editor.setFontSize(14);

通过`setTabSize`可以设置制表符的长度

editor.getSession().setTabSize(4);

同时可以通过`setUseSoftTabs`将制表符变成对应长度的空格

editor.session.setUseSoftTabs(true);

如果你不想编辑，可以通过`setReadOnly`可以将编辑器设置为只读模式

editor.setReadOnly(true)

默认情况下ace编辑器中会有一道竖线标识打印的边距，可以通过`setShowPrintMargin`来控制其是否显示

editor.setShowPrintMargin(false);

### 2、编辑操作 ###

ace可以方便的对编辑器内的数据进行获取和写入，甚至可以只获取选中的内容，同时也能实现获取行数，跳转到行等操作

通过`getValue`可以获取到编辑器中的全部数据

editor.getSession().getValue()

如果编辑器内有部分数据被选中，则可以通过`getSelectionRange`来获取选中的部分内容

editor.session.getTextRange(editor.getSelectionRange())

这在特性我实现SQL查询的功能中有用到，如果查询框内有多条SQL，可以选择其中一条SQL进行查询

![f3ce06c943bbb00e8e9613d9e3dac6d4.png][]

通过`setValue`可以给编辑器初始化数据

editor.getSession().setValue("ops-coffee.cn")

当你想往编辑器插入数据时，可以通过`insert`在光标处插入数据

editor.insert('ops-coffee.cn')

通过`getLength`可以获取到编辑器内数据的总行数

editor.session.getLength()

`goLine`则可以跳转到指定的行

editor.gotoLine(37)

通过`getCursor`可以获取到编辑器内光标的位置，输出结果为一个标识行和列的字典，像这样：`{row:13,column:37}`

editor.selection.getCursor()

### 3、搜索与替换 ###

ace还实现了强大的搜索和替换功能，可以单个替换也可以全部替换

通过`find`可以进行搜索

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

find后边跟了两个参数， 第一个为要搜索的内容，第二个为搜索配置的字典， 字典内可以配置如下一些参数

*  backwards: 是否反向搜索，默认为false
 *  wrap: 搜索到文档底部是否回到顶端，默认为false
 *  caseSensitive: 是否匹配大小写搜索，默认为false
 *  wholeWord: 是否匹配整个单词搜素，默认为false
 *  range: 搜索范围，要搜素整个文档则设置为空
 *  regExp: 搜索内容是否是正则表达式，默认为false
 *  start: 搜索起始位置
 *  skipCurrent: 是否不搜索当前行，默认为false

通过`findAll`可以高亮显示全部搜索到的内容

editor.findAll();

`findNext`则可以查找下一个搜索到的内容

editor.findNext();

`findPrevious`查找上一个匹配的内容

editor.findPrevious();

通过`replace`可以对**当前**`find`查找到的字符串进行替换

editor.replace('ops-coffee.cn');

而通过`replaceAll`则可以对`find`查找到的所有内容替换

editor.replaceAll('ops-coffee.cn');

需要注意的是，无论是`replace`还是`replaceAll`都需要配合`find`一起使用

### 4、监听变化 ###

ace另一个强大的地方是实现了对编辑器的监听，除了可以监听内容的变化外，还能监听选中内容的变化，甚至是光标的变化

通过`change`可以监听到编辑器内容的变化

editor.getSession().on('change', function(e) {
        console.log('内容有变化')
    });

`changeSelection`则可以监听到选择内容的变化

editor.getSession().selection.on('changeSelection', function(e) {
        console.log('选择内容有变化')
    });

连光标的变化都可以通过`changeCursor`监听到

editor.getSession().selection.on('changeCursor', function(e) {
        console.log('监听光标的变化')
    });

### 替换textarea ###

html中的textarea比较鸡肋，连最基本的换行都无法实现，所以我通常都会用ace来代替form表单中的textarea，但默认情况下submit无法自动获取pre标签的数据做提交，这该如何处理呢？

一种简单的方式就是将textarea隐藏，同时创建一个ace编辑器来取代他，然后检测编辑器内数据的变化自动给填充到textarea内，完整的例子就像下边这样

<form class="form-horizontal" id="modalForm_Content" method="post" action="">{% csrf_token %}
      <div class="form-group">
        <label class="col-md-2 control-label"> 内容</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>
    
    // 加载ace editor
    var editor = ace.edit("content");
    var textarea = $('textarea[name="content"]').hide();
    editor.getSession().on('change', function(){
      textarea.val(editor.getSession().getValue());
    });

非常完美的弥补了textarea的不足，简单好用且足够强大

[https_blog.csdn.net_liuxiao723846_article_details_106732401]: https://blog.csdn.net/liuxiao723846/article/details/106732401
[https_ace.c9.io_nav_howto]: https://ace.c9.io/#nav=howto
[f3ce06c943bbb00e8e9613d9e3dac6d4.png]: /images/20210511/a0d032c1b2884dffba1fb27f58c37882.png