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文件，具体修改见下文

<code><template>

<div>

<div :id="id" type="text/plain"></div>code>

</div>

</template>

<script>

import '/public/static/Ueditor/ueditor.config.js'

import '/public/static/Ueditor/ueditor.all.min.js'

import '/public/static/Ueditor/lang/zh-cn/zh-cn.js'

import '/public/static/Ueditor/ueditor.parse.min.js'

import { getToken } from "@/utils/auth";

export default {

name: 'UEditor',

props: {

/* 编辑器的内容 */

value: {

type: String,

default: "",

},

/* 只读 */

readOnly: {

type: Boolean,

default: false,

},

id: {

type: String,

default: 'editor'

}

},

data () {

return {

editor: null,

defaultMsg:"",

config: {

initialFrameWidth: '100%',

initialFrameHeight: 280,

//上传文件接口

serverUrl: process.env.VUE_APP_BASE_API + "/ueditor/upload",

//serverUrl : '/ueditor/jsp/config.json',

readonly: this.readOnly,

placeholder: "请输入内容",

imageUrlPrefix: process.env.VUE_APP_BASE_FILE_API,//图片访问前缀

},

}

},

mounted() {

this.$nextTick(() => {

this.editor = UE.getEditor(this.id,this.config); // 初始化UE

this.editor.addListener("ready", () => {

this.editor.execCommand('insertHtml', this.value);

// 确保UE加载完成后，放入内容

this.editor.focus()

})

})

},

watch: {

value : function(val) {

if(val==null||val==undefined){

val="";code>

}

this.editor.setContent(val);

}

},

methods: {

// 获取内容方法

getUEContent() {

return this.editor.getContent()

},

// 清空编辑器内容

clearContent() {

return this.editor.execCommand('cleardoc');

},

},

destroyed() {

this.editor.destroy();

},

beforeDestroy() {

// 组件销毁的时候，要销毁 UEditor 实例，下次进入页面才能重新加载出编辑器

if (this.editor !== null && this.editor.destroy) {

this.editor.destroy();

}

},

}

</script>

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

// 百度富文本组件

import Editor from "@/components/Editor"

//全局组件挂载

Vue.component('UEditor', UEditor)

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

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

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

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

<code>

/**

* 百度编辑器图片上传

*

* @author ruoyi

*/

@RestController

@RequestMapping("/ueditor")

public class EditorController

{

@Autowired

private ServerConfig serverConfig;

/**

* 读取配置文件

* @param action

* @param noCache

* @return

* @throws IOException

*/

@GetMapping("/upload")

public String getConfig(String action,String noCache) throws IOException {

Resource resource = new ClassPathResource("UEditorConfig.json");

InputStream in=resource.getInputStream();

if (in != null) {

String text = Utils.read(in);

return text;

}

return null;

}

/**

* editor通用上传请求（单个）

*/

@PostMapping("/upload")

public AjaxResult editorUploadFile(String action, MultipartFile upfile) {

try{

AjaxResult ajax = AjaxResult.success();

// 上传文件路径

String filePath = RuoYiConfig.getUploadPath()+"/ueditor";

// 上传并返回新文件名称

String fileName = FileUploadUtils.upload(filePath, upfile);

//String url = serverConfig.getUrl() + fileName;

ajax.put("state", "SUCCESS");

ajax.put("url", fileName);

ajax.put("original", upfile.getOriginalFilename());

if (action.equals("uploadimage")) {

ajax.put("title", "图片文件");

} else if (action.equals("uploadvideo")) {

ajax.put("title", "视频文件");

} else {

ajax.put("title", "文件");

}

return ajax;

}catch (Exception e){

e.printStackTrace();

return AjaxResult.error("上传失败");

}

}

}

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

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

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

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

<code> var fileForm = new FormData();

fileForm.append("upfile",input.files[0]);

var oReq = new XMLHttpRequest();

var list = window.document.cookie.split(";")

let filterList = list.filter(item =>{

return item.substring(0,11) === "Admin-Token";

})

var token = filterList[0].substr(12);

oReq.open("POST",imageActionUrl,true);

oReq.setRequestHeader("Authorization", "Bearer "+token);

oReq.send(fileForm);

oReq.onreadystatechange = function(responseText) {

if (oReq.readyState == 4 && oReq.status == 200) {

var responseData = eval("("+oReq.responseText+")");

callback(responseData); //回调函数

}

};

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

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

7、项目使用

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

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

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

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