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

article/2025/11/9 10:54:25

说起来实现百度富文本编辑器也是比较简单，主要就是读取 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();
}
}
}
}