百度富文本编辑器(ueditor)自定义上传接口(路径)

只针对 1.4.3 jsp 版本其他版本估计也差不多,刚开始上传图片各种错误,又是配路径又是导jar包啥的,这都不说了,作为一个前端真的不太会玩这些java的东西,刚好同事搞过,把他的搬来用,他的版本很低1.3.6,高了半天上传上去是自定义的一个文件夹,就存在tomcat下面的,而我要的是上传我们的后台接口,又换成我的版本,搜了很久终于找到正确方法;

主要改三个地方:
1、实例化之前复写官方的方法 :

UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;
    UE.Editor.prototype.getActionUrl = function(action) {
        if (action == 'uploadimage' || action == 'uploadscrawl') {
            return 'http://192.168.100.162:8080/laobingmng/common/upload.do';//这就是自定义的上传地址
        } else if (action == 'uploadvideo') {
            return '';
        } else {
            return this._bkGetActionUrl.call(this, action);
        }
    }

2、改config.json,就是那个imageFieldName,跟你接口要的一致即可,其他不用改
这里写图片描述

3、改主框架的上传完成的回到函数,主要是我服务器返回的数据跟他的条件判断对不上,上传图片没添加进去,因为原来的数据结构可能跟你的数据结构不一样,所以你要改一下 ueditor.all.js 里面的代码,我的版本大概在 24518 行,一个叫 callback 的函数

//此处省略数行代码
var link, json, loader,
body = (iframe.contentDocument || iframe.contentWindow.document).body,
result = body.innerText || body.textContent || '';
json = (new Function("return " + result))();
//link = me.options.imageUrlPrefix + json.url;这一行就是官方的代码,我改成了下面一句,具体请参考自己数据格式改写
link = typeof json.data!="undefined"? json.data.url:"http://"+location.hostname+':'+location.port+json.url;
if((json.state == 'SUCCESS' && json.url) || json.code==200) {
    loader = me.document.getElementById(loadingId);
    loader.setAttribute('src', link);
    loader.setAttribute('_src', link);
    loader.setAttribute('title', json.title || '');
    loader.setAttribute('alt', json.original || '');
    loader.removeAttribute('id');
    domUtils.removeClasses(loader, 'loadingclass');
} else {
    showErrorLoader && showErrorLoader(json.state);
}

看下图
这里写图片描述

以上步骤完成后就可以愉快使用编辑器了
附上自己的功能配置

var config = {
        toolbars: [
            ['fullscreen','undo', 'redo','anchor', //锚点
        'bold', //加粗
        'indent', //首行缩进
        'italic', //斜体
        'underline', //下划线
        'strikethrough', //删除线
        'subscript', //下标
        'fontborder', //字符边框
        'superscript', //上标
        'formatmatch', //格式刷
        'pasteplain', //纯文本粘贴模式
        'selectall', //全选
        'horizontal', //分隔线
        'removeformat', //清除格式
        'time', //时间
        'date', //日期
        'unlink', //取消链接
        'insertrow', //前插入行
        'insertcol', //前插入列
        'mergeright', //右合并单元格
        'mergedown', //下合并单元格
        'deleterow', //删除行
        'deletecol', //删除列
        'splittorows', //拆分成行
        'splittocols', //拆分成列
        'splittocells', //完全拆分单元格
        'deletecaption', //删除表格标题
        'inserttitle', //插入标题
        'mergecells', //合并多个单元格
        'deletetable', //删除表格
        ],['cleardoc', //清空文档
        'insertparagraphbeforetable', //"表格前插入行"
        'insertcode', //代码语言
        'fontfamily', //字体
        'fontsize', //字号
        'paragraph', //段落格式
        'simpleupload', //单图上传
        //'insertimage', //多图上传
        'edittable', //表格属性
        'edittd', //单元格属性
        'link', //超链接
        'emotion', //表情
        'spechars', //特殊字符
        'searchreplace', //查询替换
        'map', //Baidu地图
        'insertvideo', //视频
        'justifyleft', //居左对齐
        'justifyright', //居右对齐
        'justifycenter', //居中对齐
        'justifyjustify', //两端对齐
        'forecolor', //字体颜色
        ],['backcolor', //背景色
        'insertorderedlist', //有序列表
        'insertunorderedlist', //无序列表
        'rowspacingtop', //段前距
        'rowspacingbottom', //段后距
        'pagebreak', //分页
        'imagenone', //默认
        'imageleft', //左浮动
        'imageright', //右浮动
        //'attachment', //附件
        'imagecenter', //居中
        'wordimage', //图片转存
        'lineheight', //行间距
        'edittip ', //编辑提示
        'customstyle', //自定义标题
        'autotypeset', //自动排版
        'touppercase', //字母大写
        'tolowercase', //字母小写
        'background', //背景
        'template', //模板
        'scrawl', //涂鸦
        'music', //音乐
        'inserttable', //插入表格
        'print', //打印
        'preview', //预览
        ]
        ],
        autoHeightEnabled: true,
        autoFloatEnabled: true,
        wordCount:false,
        elementPathEnabled:false,
        initialFrameHeight:330,
        initialFrameWidth:750
        }
  • 2
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 9
    评论
百度富文本编辑器UEditor是一款基于JavaScript的所见即所得富文本编辑器,可以轻松地将其集成到Java Web项目中,为用户提供更好的编辑体验。下面简单介绍一下在Java Web项目中使用百度富文本编辑器UEditor的方法。 1.下载UEditor 首先,需要从百度UEditor官网上下载UEditor的源代码。下载地址为:http://ueditor.baidu.com/website/download.html 2.将UEditor集成到Java Web项目中 下载完成后,将UEditor的源代码解压缩,并将解压后的文件夹复制到Java Web项目的WebContent目录下的任意一个子目录中(比如说WebContent/ueditor)。然后,将UEditor中的jsp目录下的所有文件复制到Java Web项目的WebContent目录下的任意一个子目录中(比如说WebContent/jsp)。 3.配置UEditor 在Java Web项目的WebContent目录下新建一个名为config.json的文件,该文件的内容如下: { "imageActionName": "uploadimage", "imageFieldName": "upfile", "imageMaxSize": 2048000, "imageAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], "imageCompressEnable": true, "imageCompressBorder": 1600, "imageInsertAlign": "none", "imageUrlPrefix": "", "imagePathFormat": "/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", "scrawlActionName": "uploadscrawl", "scrawlFieldName": "upfile", "scrawlPathFormat": "/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", "scrawlMaxSize": 2048000, "scrawlUrlPrefix": "", "scrawlInsertAlign": "none", "snapscreenActionName": "uploadimage", "snapscreenPathFormat": "/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", "snapscreenUrlPrefix": "", "snapscreenInsertAlign": "none", "catcherLocalDomain": ["127.0.0.1", "localhost", "img.baidu.com"], "catcherActionName": "catchimage", "catcherFieldName": "source", "catcherPathFormat": "/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", "catcherUrlPrefix": "", "catcherMaxSize": 2048000, "catcherAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], "videoActionName": "uploadvideo", "videoFieldName": "upfile", "videoPathFormat": "/ueditor/jsp/upload/video/{yyyy}{mm}{dd}/{time}{rand:6}", "videoUrlPrefix": "", "videoMaxSize": 102400000, "videoAllowFiles": [ ".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg", ".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid" ], "fileActionName": "uploadfile", "fileFieldName": "upfile", "filePathFormat": "/ueditor/jsp/upload/file/{yyyy}{mm}{dd}/{time}{rand:6}", "fileUrlPrefix": "", "fileMaxSize": 51200000, "fileAllowFiles": [ ".png", ".jpg", ".jpeg", ".gif", ".bmp", ".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg", ".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid", ".rar", ".zip", ".tar", ".gz", ".7z", ".bz2", ".cab", ".iso", ".doc", ".docx", ".xls", ".xlsx", ".ppt", ".pptx", ".pdf", ".txt", ".md", ".xml" ], "imageManagerActionName": "listimage", "imageManagerListPath": "/ueditor/jsp/upload/image/", "imageManagerListSize": 20, "imageManagerUrlPrefix": "", "imageManagerInsertAlign": "none", "imageManagerAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], "fileManagerActionName": "listfile", "fileManagerListPath": "/ueditor/jsp/upload/file/", "fileManagerUrlPrefix": "", "fileManagerListSize": 20, "fileManagerAllowFiles": [ ".png", ".jpg", ".jpeg", ".gif", ".bmp", ".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg", ".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid", ".rar", ".zip", ".tar", ".gz", ".7z", ".bz2", ".cab", ".iso", ".doc", ".docx", ".xls", ".xlsx", ".ppt", ".pptx", ".pdf", ".txt", ".md", ".xml" ] } 该文件是UEditor的配置文件,主要配置了上传文件的相关设置。 4.在JSP页面中使用UEditor 在需要使用UEditor的JSP页面中,添加如下代码: <!-- 加载ueditor编辑器js文件 --> <script type="text/javascript" src="${pageContext.request.contextPath}/ueditor/ueditor.config.js"></script> <script type="text/javascript" src="${pageContext.request.contextPath}/ueditor/ueditor.all.min.js"></script> <!-- 创建编辑器 --> <script type="text/javascript"> var editor = UE.getEditor('editor'); </script> 其中,ueditor.config.js和ueditor.all.min.js是UEditor的核心文件,需要在页面中引入。editor是页面中一个div元素的id,表示要将该div元素转化为UEditor编辑器。 至此,就完成了在Java Web项目中使用百度富文本编辑器UEditor的集成。
评论 9
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值