若依项目(前端后分离版)整合百度(Ueditor)富文本编辑器

1、Ueditor 资源下载

ueditor 官网：http://ueditor.baidu.com

ueditor API 文档：http://ueditor.baidu.com/doc

ueditor github 地址：http://github.com/fex-team/ueditor

2、资源下载之后的文件解压，改个名字，改为UEditor，复制放入项目public文件夹下

3、方便使用，形成组件，放入components文件夹下

ueditor.vue 代码，如果需要在headers中配置Authorization，在config中配置无效，需修改js文件，具体修改见下文

1. <template>
2. <div>
3. <div :id="id" type="text/plain"></div>
4. </div>
5. </template>
6. <script>
7. import '/public/static/Ueditor/ueditor.config.js'
8. import '/public/static/Ueditor/ueditor.all.min.js'
9. import '/public/static/Ueditor/lang/zh-cn/zh-cn.js'
10. import '/public/static/Ueditor/ueditor.parse.min.js'
12. import { getToken } from "@/utils/auth";
14. export default {
15. name: 'UEditor',
16. props: {
17. /* 编辑器的内容 */
18. value: {
19. type: String,
20. default: "",
21. },
22. /* 只读 */
23. readOnly: {
24. type: Boolean,
25. default: false,
26. },
27. id: {
28. type: String,
29. default: 'editor'
30. }
31. },
32. data () {
33. return {
34. editor: null,
35. defaultMsg:"",
36. config: {
37. initialFrameWidth: '100%',
38. initialFrameHeight: 280,
39. //上传文件接口
40. serverUrl: process.env.VUE_APP_BASE_API + "/ueditor/upload",
41. //serverUrl : '/ueditor/jsp/config.json',
42. readonly: this.readOnly,
43. placeholder: "请输入内容",
44. imageUrlPrefix: process.env.VUE_APP_BASE_FILE_API,//图片访问前缀
45. },
46. }
47. },
48. mounted() {
49. this.$nextTick(() => {
50. this.editor = UE.getEditor(this.id,this.config); // 初始化UE
51. this.editor.addListener("ready", () => {
52. this.editor.execCommand('insertHtml', this.value);
53. // 确保UE加载完成后，放入内容
54. this.editor.focus()
55. })
56. })
58. },
59. watch: {
60. value : function(val) {
61. if(val==null||val==undefined){
62. val="";
63. }
64. this.editor.setContent(val);
65. }
66. },
67. methods: {
68. // 获取内容方法
69. getUEContent() {
70. return this.editor.getContent()
71. },
72. // 清空编辑器内容
73. clearContent() {
74. return this.editor.execCommand('cleardoc');
75. },
76. },
77. destroyed() {
78. this.editor.destroy();
79. },
80. beforeDestroy() {
81. // 组件销毁的时候，要销毁 UEditor 实例，下次进入页面才能重新加载出编辑器
82. if (this.editor !== null && this.editor.destroy) {
83. this.editor.destroy();
84. }
85. },
86. }
87. </script>

4、在main.js中引入组件，可全局使用

1. // 百度富文本组件
2. import Editor from "@/components/Editor"
3. //全局组件挂载
4. Vue.component('UEditor', UEditor)

5、实现图片上传，配置后端接口

(1)Java端建个EditorController，配置图片上传接口，路径与serverUrl保持一致；

(2)将UEditorConfig.json文件放在项目的resources文件夹下，内容从 UEditor/jsp/config.json 下复制

(3)EditorController代码，文件文件和获取配置写成两个接口，获取配置使用get请求，上传使用post请求

3. /**
4. * 百度编辑器图片上传
5. *
6. * @author ruoyi
7. */
8. @RestController
9. @RequestMapping("/ueditor")
10. public class EditorController
11. {
12. @Autowired
13. private ServerConfig serverConfig;
15. /**
16. * 读取配置文件
17. * @param action
18. * @param noCache
19. * @return
20. * @throws IOException
21. */
22. @GetMapping("/upload")
23. public String getConfig(String action,String noCache) throws IOException {
24. Resource resource = new ClassPathResource("UEditorConfig.json");
25. InputStream in=resource.getInputStream();
26. if (in != null) {
27. String text = Utils.read(in);
28. return text;
29. }
30. return null;
31. }
33. /**
34. * editor通用上传请求（单个）
35. */
36. @PostMapping("/upload")
37. public AjaxResult editorUploadFile(String action, MultipartFile upfile) {
38. try{
39. AjaxResult ajax = AjaxResult.success();
40. // 上传文件路径
41. String filePath = RuoYiConfig.getUploadPath()+"/ueditor";
42. // 上传并返回新文件名称
43. String fileName = FileUploadUtils.upload(filePath, upfile);
44. //String url = serverConfig.getUrl() + fileName;
45. ajax.put("state", "SUCCESS");
46. ajax.put("url", fileName);
47. ajax.put("original", upfile.getOriginalFilename());
48. if (action.equals("uploadimage")) {
49. ajax.put("title", "图片文件");
50. } else if (action.equals("uploadvideo")) {
51. ajax.put("title", "视频文件");
52. } else {
53. ajax.put("title", "文件");
54. }
55. return ajax;
56. }catch (Exception e){
57. e.printStackTrace();
58. return AjaxResult.error("上传失败");
59. }
61. }
63. }

(4)配置授权认证，不配置，则访问授权报错

第一种不鉴权，在java端SecurityConfig 文件中开放/ueditor 接口，方便快捷；

第二种增加授权，在前端，修改ueditor.all.js 文件，get请求时需加上Authorization权鉴信息

post请求上传图片并回显，需修改请求代码以及返回消息解析代码

1. var fileForm = new FormData();
2. fileForm.append("upfile",input.files[0]);
4. var oReq = new XMLHttpRequest();
5. var list = window.document.cookie.split(";")
6. let filterList = list.filter(item =>{
7. return item.substring(0,11) === "Admin-Token";
8. })
9. var token = filterList[0].substr(12);
11. oReq.open("POST",imageActionUrl,true);
12. oReq.setRequestHeader("Authorization", "Bearer "+token);
13. oReq.send(fileForm);
14. oReq.onreadystatechange = function(responseText) {
15. if (oReq.readyState == 4 && oReq.status == 200) {
16. var responseData = eval("("+oReq.responseText+")");
17. callback(responseData); //回调函数
18. }
19. };

修改后，删除ueditor.all.min.js，复制ueditor.all.js并重命名为ueditor.all.min.js；

6、图片回显，若前后端部署在同一个服务器，可以不用配置imageUrlPrefix路径UEditorConfig.json保持不动，上传接口返回全路径；若不在同一服务器，可删除UEditorConfig.json中imageUrlPrefix，同时在ueditor.vue中配置访问前缀，且在上传接口返回路径使用半路径

7、项目使用

配置id，每次引用，配置不同id值；

<UEditor v-model="form.content" :id="ueidtorName" ref="ue"/>

获取编辑器内容，并赋值；

this.form.content = this.$refs.ue.getUEContent();