一、引入Ace editor

本质上Ace editor只是一个js而已。而该js引用了其他js(如扩展、主题等js)，因此将ace editor.js引入项目时最好复制整个文件夹，不能只复制一个ace.js文件。

进入编译后的js发布页：https://github.com/ajaxorg/ace-builds/releases

下载某一版本的zip包后解压，将src-min文件夹(或src，min代表js经过了压缩)复制到src\main\resources\static\jsspringboot的资源文件夹下，并对文件夹进行改名。

引入完成后如图所示：

引入ace后的项目目录

二、前端引入该js

引入位置的声明语句和项目以及使用的模板有关，本项目使用thymeleaf，因此在footer.html末尾处中引入：

三、前端调用editor

templates目录下新建一个ace_editor_test.html用作测试：

xmlns:th="http://www.thymeleaf.org">

.btn2{

color:#fff;

background-color: #373a3c;

border-color: #373a3c;

}

.all-container{

width:100%;

padding-right: 15px;

padding-left: 15px;

margin-right: auto;

margin-left: auto;

}

此处，在HTML页面中为editor首先声明了一个div标签作为editor位置，id为"editor"。(必须指定height和width否则会报错)

引入了footer的同时也引入了其中的ace.js

随后在script脚本中使用var editor = ace.edit("editor");语句初始化editor，会将该editor填充进页面中id="editor"的标签内。

四、后端编写

在MainController.java中：

@RequestMapping("/editor")

public String editor() {

return "/ace_editor_test";

}

五、快速调整编辑器样式

此时访问editor页面已经可以看到一个ace编辑器，但是比较简陋。

为了快速找到编辑器合适的样式，我们可以直接打开一个使用了ace editor的网页如https://www.planttext.com/

然后F12开启控制台，进入console，输入一些js指令来对editor进行调整，页面会实时响应。

设置字体为26并换主题：

editor.setTheme("ace/theme/cobalt");

editor.setFontSize(26);

这样可以轻松实时看到调整样式后的状态，觉得合适之后即可将这些设置语句写入自己的代码中即可。