html ace编辑器,Springboot 集成 Ace editor前端编辑器

一、引入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;

}

Online PlantUML editor

some text~~~

...

var editor = ace.edit("editor");

此处，在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);

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

html ace编辑器,Springboot 集成 Ace editor前端编辑器相关推荐

angularjs html编辑器,AngularJS集成wangeditor富文本编辑器
最近用AngularJS2(ng alain)搭建的项目需求中须要富文本,在网上找了不少,要么过重,要么没有详细的集成步骤.css 下面将我本身如何将wangeditor集成在项目(项目名称myPro ...
解决集成 editor.md编辑器时，报 editormd is not defined的解决办法
这是我在springboot中整合editor.md编辑器之后出现的问题解决办法: jquery的依赖需要放在最前面,因为这个Markdown编辑器是依赖jQuery的
Monaco Editor编辑器教程（二七）：集成多个GitLab编辑器颜色样式主题
前言在开发编辑器时,未来满足开发者的审美需求,有时需要设计多套颜色主题,最基础的是黑色主题和白色主题.如果用户愿意出钱的话,可以加上一些其他花里胡哨的颜色主题,在vscode中是可以搜到.今天就来教 ...
SpringBoot集成Editor.md 流程详细
接上一篇:SpringBoot整合Editor.md实现Markdown编辑器 https://blog.csdn.net/weixin_40816738/article/details/103160 ...
SpringBoot集成UEditor实现文本编辑功能增删查改发布等功能
SpringBoot集成UEditor实现文本编辑功能简介创建实体 DAO层 Controller层业务实现页面弹出框设置页面布局设置 js页面设置设置只显示六条记录点击事件的查看功能 p ...
thymeleaf依赖_玩转SpringBoot集成 Thymeleaf 模版引擎
随着互联网技术的发展,在前后端分离开发模式已经逐渐成为主流的今天,前后端技术的划分也越来越清晰,社会分工进一步细化,职业岗位也更加细分,慢慢开始就有了前端攻城狮和后端攻城狮,技术也进一步细分,出现了以 ...
vue 是否有word编辑控件_GitHub - C84882428/editor-ui: vue集成 tinymce 富文本编辑器,增加导入 word 模板...
editor-ui vue 集成 tinymce 富文本编辑器自定义 tinymce 富文本编辑器, 在原来的编辑器中增加上传 word 模板最终展示效果: 主要代码: 整体思路: 1,在编辑器原 ...
集成wangEditor富文本编辑器
以下是JavaWeb项目集成wangEditor富文本编辑器,wangEditor是一个轻量级的富文本编辑器,优点是:集成速度快,容易上手.缺点是:相对于百度Ue功能较少,不过也基本满足了我们所需的功 ...
Activiti 快速入门教程：SpringBoot 集成 Activiti6 + Activiti Modeler 流程配置可视化
Activiti 快速入门教程:SpringBoot 集成 Activiti6 + Activiti Modeler 流程配置可视化 7大服务与核心表 23张表概览 7大核心服务(重要) 加依赖内部 ...

html ace编辑器,Springboot 集成 Ace editor前端编辑器

Online PlantUML editor

html ace编辑器,Springboot 集成 Ace editor前端编辑器相关推荐

最新文章

热门文章