Springboot 集成 Ace editor前端编辑器

2020-06-06 本文已影响0人 youyuge

他人博客：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);

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