@[TOC](vue + UEditor 上传图片(回显),上传附件 含token)
背景介绍
本来一开始用的是TinyMCE的文本编辑器,但是谁还没遇到个无理的甲方爸爸呢,硬要换成已经不再维护好久的ueditor,后台不愿意改接口,只好硬着头皮上了
安装
参考vue-ueditor-wrap的官网安装就行
我用的vue2
npm i vue-ueditor-wrap@2.x
# 或者
yarn add vue-ueditor-wrap@2.x
下载ueditor,我下载的是ueditor-dev-1.5.0,不多说
下载解压后放在static文件夹下
这是我的页面结构,把富文本编辑器单独变成一个组件,接口以项目实际为准
<template>
<div>
<vue-ueditor-wrap
v-model="content"
:config="editorConfig"
editor-id="editor"
></vue-ueditor-wrap>
<!--@ready="ueditorReady" -->
</div>
</template>
<script>
import VueUeditorWrap from "vue-ueditor-wrap";
export default {
data() {
return {
editorConfig: {
// 编辑器不自动被内容撑高
autoHeightEnabled: true,
serverUrl: "http://xxx.com/api/uploads", // 服务端地址
imageActionUrl:"http://xxx.com/api/uploads",//图片上传地址
fileActionUrl:"http://xxx.com/api/uploads",
imageAllowFiles:[".png",".jpg",".jpeg",",gif"],//图片上传类型限制
imageMaxSize:2048000,//图片限制大小2M以内
fileAllowFiles:[".pdf","doc","docx","zip","rar"],//文件上传类型限制
},
content: "", //网页内容
};
},
components: {
VueUeditorWrap,
},
watch: {
content(val) {
this.$emit("onEditorChange", val);
},
},
};
</script>
<style lang="less" scoped>
</style>
配置ueditor根路径
不清楚的可以看ueditor官网配置
接着把ueditor.all.js重命名为ueditor.all.min.js便于修改
这是我的接口结构,请求时需要头部加token,然后加上参数type区别文件类型,上传文件后,接口返回访问链接
修改图片并回显
首先修改ueditor.all.min.js
大概在8830行的位置
// core/loadconfig.js
(function () {
UE.Editor.prototype.loadServerConfig = function () {
var me = this;
setTimeout(function () {
try {
me.options.imageUrl &&
me.setOpt(
"serverUrl",
me.options.imageUrl.replace(
/^(.*[\/]).+([\.].+)$/,
"$1controller$2"
)
);
var configUrl = me.getActionUrl("serverUrl"),
isJsonp = utils.isCrossDomainUrl(configUrl);
console.log(isJsonp, 'isJsonp',configUrl)
/* 发出ajax请求 */
configUrl &&
UE.ajax.request(configUrl, {
method: 'POST',
dataType: 'json',
data: {
},
onsuccess: function (r