UEditor 前后端分离【vue + java版本】
程序员文章站
2024-03-20 21:13:58
...
前端部分:
1.安装vue-editor-wrap
npm i vue-ueditor-wrap
2.下载处理后的UEditor,下载地址
解压,重命名文件夹为UEditor,放入public文件夹下(如果是旧项目对应static文件夹)
3.引用组件、注册组件
import VueUeditorWrap from 'vue-ueditor-wrap'
export default {
data () {
return {
editor: null,
msg: '',
myConfig: {
autoHeightEnabled: false, // 编辑器不自动被内容撑高
initialFrameHeight: 500, // 初始容器高度
serverUrl: 'http://xxx.com/test/config', // 上传文件接口
UEDITOR_HOME_URL: '/static/UEditor/' // UEditor 资源文件的存放路径
}
}
},
mounted () {
setTimeout(() => {
const editId = document.getElementsByClassName('edui-default')[0].id
this.editor = UE.getEditor(editId) // 初始化UE
UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl
UE.Editor.prototype.getActionUrl = function (action) {
if (action === 'uploadimage') {
return 'http://xxx.com/test/uploadImage'
} else if (action === 'uploadvideo') {
return 'http://xxx.com/test/uploadVideo'
} else {
return this._bkGetActionUrl.call(this, action)
}
}
this.editor.addListener('ready', () => {
this.$emit('getUe', this.msg)
})
}, 200)
},
components: {
VueUeditorWrap
},
destroyed () {
this.editor.destroy()
}
}
4、使用说明
1.根据项目需求修改从组件处修改配置
<vue-ueditor-wrap v-model="msg" :config="myConfig"></vue-ueditor-wrap>
data () {
return {
msg: '<h2><img src="http://img.baidu.com/hi/jx2/j_0003.gif"/>Vue + UEditor + v-model双向绑定</h2>',
myConfig: {
// 编辑器不自动被内容撑高
autoHeightEnabled: false,
// 初始容器高度
initialFrameHeight: 240,
// 初始容器宽度
initialFrameWidth: '100%',
// 上传文件接口(这个地址是我为了方便各位体验文件上传功能搭建的临时接口,请勿在生产环境使用!!!)
serverUrl: 'http://35.201.165.105:8000/controller.php',
// UEditor 资源文件的存放路径,如果你使用的是 vue-cli 生成的项目,通常不需要设置该选项,vue-ueditor-wrap 会自动处理常见的情况,如果需要特殊配置,参考下方的常见问题2
UEDITOR_HOME_URL: '/static/UEditor/'
}
}
}
5、前后端分离,前端部分:
下载[1.4.3.3 Jsp 版本] 解压,修改ueditor.config.js 的serverUrl为:"http://xxx.com/test
/config"
ueditor 编辑页面自定义anction请求地址【记得自定义action请求地址】:
setTimeout(() => {
const editId = document.getElementsByClassName('edui-default')[0].id
this.editor = UE.getEditor(editId) // 初始化UE
UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl
UE.Editor.prototype.getActionUrl = function (action) {
if (action === 'uploadimage') {
return 'http://xxx.com/test/uploadImage'
} else if (action === 'uploadvideo') {
return 'http://xxx.com/test/uploadVideo'
} else {
return this._bkGetActionUrl.call(this, action)
}
}
this.editor.addListener('ready', () => {
this.$emit('getUe', this.msg)
})
}, 200)
ueditor.all.js 17644行 creatInsertStr 方法修改
case 'video':
var ext = url.substr(url.lastIndexOf('.') + 1);
if(ext == 'ogv') ext = 'ogg';
if(ext == 'mp3' || ext == 'ogg' || ext == 'wav' || ext == 'm4a'){
str = '<audio' + (id ? ' id="' + id + '"' : '') + ' class=" audio-js" ' + (align ? ' style="float:' + align + '"': '') +
' controls preload="none" width="' + width + '" height="' + height + '" src="' + url + '">" /></audio>';
}else{
var arr = url.split("_");
str = "<video src='" + arr[0] + "' width='375' height='250' controls poster='" + arr[1] + "'>" +
'您的浏览器版本太低喽!请升级至IE9以上!' +
'</video>';
}
break;
后端部分:
https://blog.csdn.net/xxh_1229/article/details/100885953
上一篇: Vue+Flask 前后端分离