Java实现百度富文本编辑器UEditor

说起来实现百度富文本编辑器也是比较简单，主要就是读取 config.json

但是里面的坑也比较大下面是我的步骤以及我遇坑的过程

准备引入的jar包这两个包找不到的话可以去官网、也可以加群Java交流群，在群文件自行下载: QQ群：808249297

<!--用于ueditor--><dependency><groupId>com.cns.diy-ueditor</groupId><artifactId>json</artifactId><version>1.0</version></dependency><!--用于ueditor--><dependency><groupId>com.cns.diy-ueditor</groupId><artifactId>ueditor</artifactId><version>1.1.2</version></dependency>

将静态资源复制到资源下面

随后重要的来了！将config.json 粘贴到 resources下面

这里如果不粘到这个下面后面写的controller会读取不到会报错

页面上引入js

<script th:src="@{/ueditor/ueditor.config.js}"></script>
<script th:src="@{/ueditor/ueditor.all.js}"></script>

html里面


<textarea style="width: 100%;height: 280px;" type="text" id="learnContent" name="learnContent" ></textarea>

js里面

var ue = UE.getEditor('learnContent', {zIndex: "0",toolbars: [['fullscreen', 'undo', 'redo', '|','bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc', '|','rowspacingtop', 'rowspacingbottom', 'lineheight', '|','customstyle', 'paragraph', 'fontfamily', 'fontsize', '|','directionalityltr', 'directionalityrtl', 'indent', '|','justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|','link', 'unlink', '|', 'imagenone', 'imageleft', 'imageright', 'imagecenter', '|','simpleupload', 'insertimage', 'attachment','map', '|','horizontal', 'spechars', '|','inserttable', 'deletetable', 'insertparagraphbeforetable', 'insertrow', 'deleterow', 'insertcol','deletecol', 'mergecells', 'mergeright','mergedown', 'splittocells', 'splittorows', 'splittocols', '|', 'preview', 'searchreplace']]});UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;UE.Editor.prototype.getActionUrl = function (action) {if (action == 'uploadimage' || action == 'uploadscrawl' || action == 'uploadvideo') {return '/upload/uploadUEditorImage?pid=' + '[[${id}]]';} else if (action == 'uploadfile') {return '/upload/uploadUEditorFile?pid=' + '[[${id}]]';} else {return this._bkGetActionUrl.call(this, action);}}

要注意的是要注意的是要注意的是

这里一定要打空格否则报错！！！

下面两个是视频或者图片文件的上传接口可以把文件跟图片写在一个接口里面后台拿到去判断该走那个方法就行了

controller里面写

@Controller
@RequestMapping("/ueditor")
public class UeditorController {
@RequestMapping("/getJsonController")
@ResponseBody
public void getConfigInfo(HttpServletRequest request, HttpServletResponse
response) {
org.springframework.core.io.Resource res = new
ClassPathResource("config.json");
InputStream is = null;
response.setHeader("Content-Type", "text/html");
try {
is = new FileInputStream(res.getFile());
StringBuffer sb = new StringBuffer();
byte[] b = new byte[1024];
int length = 0;
while (-1 != (length = is.read(b))) {
sb.append(new String(b, 0, length, "utf-8"));
}
String result = sb.toString().replaceAll("/\\*(.|[\\r\\n])*?\\*/",
"");
JSONObject json = JSON.parseObject(result);
PrintWriter out = response.getWriter();
out.print(json.toString());
} catch (IOException e) {
e.printStackTrace();
} finally {
try {
is.close();
} catch (IOException e) {
e.printStackTrace();
}
}
}
}

在这里面修改成controller的路径

现在就大功告成了

java前沿技术交流群:808249297

Java实现百度富文本编辑器UEditor相关推荐

百度富文本编辑器UEditor安装配置全过程
网站开发时富文本编辑器是必不可少的,他可以让用户自行编辑内容的样式然后上传到后台!下面我们来介绍如何安装使用百度富文本编辑器一.下载并且设置百度富文本编辑器的样式你可以去百度UEditor ...
百度富文本编辑器ueditor在https协议下无法正常插入动态地图
在浏览器https协议下,百度富文本编辑器ueditor有可能会无法正常插入动态地图.所谓"动态地图",就是在插入地图的时候,勾选右上角的"动态地图"选择框: ...
百度富文本编辑器ueditor支持上传mp3格式等音频文件的方法
百度富文本编辑器ueditor算得上比较强大的了,但是有一个比较令人难受的问题,就是不支持本地上传音频文件.ueditor自带的mp3功能是直接在百度音乐里面搜索加进去的,显而易见这个不是我们想要的, ...
TP5.1框架中百度富文本编辑器UEditor的使用
在实际项目开发中最常使用到的工具之一就是富文本编辑器,使用富文本编辑器可以实现所见即所得的效果,且所有富文本编辑器里的内容(包括图片,视频,音乐等文件)全部可以带格式的存入数据库中且只需占用一个字段. ...
Html引入百度富文本编辑器ueditor
在日常工作用,肯定有用到富文本编辑器的时候,富文本编辑器功能强大使用方便,我用的是百度富文本编辑器,首先需要下载好百度编辑器的demo, 然后创建ueditor.html文件,引入百度编辑器,然后在h ...
themyleaf 图片上传_springboot thymeleaf 整合百度富文本编辑器UEditor进行图片上传
项目中需要使用到富文本编辑器,找来找去发现百度UEditor富文本编辑器在国内最为常用因此就尝试引入.编辑器官网是:http://ueditor.baidu.com/website/index.htm ...
html页面引入富文本编辑器,Html引入百度富文本编辑器ueditor
在日常工作用,肯定有用到富文本编辑器的时候,富文本编辑器功能强大使用方便,我用的是百度富文本编辑器,首先需要下载好百度编辑器的demo, 然后创建ueditor.html文件,引入百度编辑器,然后在h ...
Vue 百度富文本编辑器Ueditor Spring Boot 前后台整合示例（附带完整源码）
前端安装vue-ueditor-wrap npm i vue-ueditor-wrap 引入并注册VueUeditorWrap组件,配置组件属性 <script> import VueU ...
百度富文本编辑器ueditor插入html代码
记录工作中遇到的问题需求: 文本编辑器左侧展示模板,点击左侧模板将模板展示到富文本编辑器内. 代码: // 点击模板时添加到编辑器内 $(".templates-con ul li&qu ...
百度富文本编辑器UEditor 图片宽度100%自适应，手机端
有些时候富文本编辑器的图片在手机端显示超出,没有自动100% 修改ueditor.all.js的23774行(左右,不一定)和24533(左右,不一定),不行就搜索增加内容 loader.setAt ...

Java实现百度富文本编辑器UEditor

Java实现百度富文本编辑器UEditor相关推荐

最新文章

热门文章