如何Springboot中引入Ace源码编辑器插件

东皇太医

已于 2022-09-08 10:16:04 修改

阅读量434

点赞数

文章标签：编辑器 javascript 前端

于 2022-09-01 17:05:25 首次发布

本文链接：https://blog.csdn.net/weixin_43837034/article/details/126646684

版权

下载ace编译后的压缩包，下载路径https://github.com/ajaxorg/ace-builds/releases
下载某一版本的zip包后解压，将src-min文件夹复制到项目的resources资源目录，修改目录名为ace，如下图所示：
前端引入js

<script src="../../../plugins/ace/ace.js" type="text/javascript" charset="utf-8"></script>

调用插件和效果展示

<div id="editor" style="height: 500px; width: 800px">some text~~~</div>
<script>
	var editor = ace.edit("editor");
	editor.setFontSize(16);
</script>

在这里插入图片描述
5. 注意：
1、在HTML页面中为editor首先声明了一个div标签作为editor位置，id为"editor"，（必须指定height和width否则会报错），随后在script脚本中使用var editor = ace.edit(“editor”);语句初始化editor，会将该editor填充进页面中id="editor"的标签内。
2、通过editor 对象我们可以对编辑器的主体样式等一系列特性进行设置，具体如何设置可以参考：
http://t.zoukankan.com/Im-Victor-p-14458956.html

用法补充[待续]
（1）设置和取出内容
editor.setValue(“the new text here”);//设置内容，内会默认被选中
editor.setValue(“text2”, -1); // 设置内容,光标移到内容开始
editor.session.setValue(“the new text here”); // 设置内容，内容不会被选中
editor.getValue(); // 获取内容