他人博客：https://www.jianshu.com/p/8a4a5e273538
官方源代码项目页：https://github.com/ajaxorg/ace
编译后的js发布页：https://github.com/ajaxorg/ace-builds/
一、引入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末尾处中引入：
<script src="../../js/ace_editor/ace.js" th:src="@{/js/ace_editor/ace.js}"></script>
三、前端调用editor
templates目录下新建一个ace_editor_test.html用作测试：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org">
<head th:replace="~{fragments/header :: header}">
<style>
.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;
}
</style>
</head>
<body>
<div class="all-container" >
<div class="container blog-content-container">
<div class="row h-100 align-items-center justify-content-center">
<h2>Online PlantUML editor</h2>
</div>
<div class="row h-100 justify-content-center align-items-center">
<div id="editor" style="height: 500px; width: 800px">some text~~~</div>
</div>
<div th:replace="~{fragments/footer ::footer}">...</div>
</div><!-- /container -->
<script>
var editor = ace.edit("editor");
</script>
</div>
</body>
</html>
- 此处，在HTML页面中为editor首先声明了一个div标签作为editor位置，id为"editor"。（必须指定height和width否则会报错）
- 引入了
footer的同时也引入了其中的ace.js - 随后在script脚本中使用
var editor = ace.edit("editor");语句初始化editor，会将该editor填充进页面中id="editor"的标签内。 - <script>标签中能对editor做更多设置操作，比如设置主题，字体大小
editor.setFontSize(16);等等。可参考本文第一个博客链接。
四、后端编写
在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);
这样可以轻松实时看到调整样式后的状态，觉得合适之后即可将这些设置语句写入自己的代码中即可。
网友评论