本文档按照以下顺序进行讲解,如果需要查询错误如何解决,可直接点击上面锚点进行跳转
集成百度Ueditor--->整合百度Ueditor的添加、修改、回显--->解决项目中遇到的问题
commons-fileupload
commons-fileupload
1.3.2
commons-codec
commons-codec
1.9
com .gitee.qdbp.thirdparty
ueditor
1.4.3.3
一、添加HTML代码
二、引入富文本需要的JS
三、使用js初始化富文本容器
完成第一步你就能在界面上看到富文本的界面了,但是很多功能都不能使用
我们可以通过“ueditor.config.js”中的toolbars来控制富文本的功能
找到Ueditor下的“ueditor.config.js”文件(路径为:ueditor/ueditor.config.js)修改如下:
①、在ueditor.config.js下面添加全局变量
var server_url=window.location.protocol+"//"+window.location.hostname+":"+window.location.port
②、修改serverUrl:为
serverUrl: server_url+"/config"
修改完成如下图
上面主要在做两个事情:1.获取当前服务器的地址;2.设置Ueditor访问后台获取配置的地址路径
一、便捷config接口。
@RequestMapping(value = "/config")
public void config(HttpServletRequest request, HttpServletResponse response) throws IOException {
response.setContentType("application/json");
response.setCharacterEncoding("UTF-8");
response.setHeader("Content-Type", "text/html");
// jar包里的json文件只能通过流读取
ClassPathResource classPathResource = new ClassPathResource("config.json");
StringBuilder builer= new StringBuilder();
InputStream inputStream = classPathResource.getInputStream();
try {
InputStreamReader reader = new InputStreamReader(classPathResource.getInputStream(),"UTF-8");
BufferedReader bfReader = new BufferedReader(reader);
String temContent = null;
while ((temContent = bfReader.readLine()) != null){
builer.append(temContent);
}
String exec = builer.toString().trim();
PrintWriter writer = response.getWriter();
writer.write(exec);
writer.flush();
writer.close();
bfReader.close();
} catch (IOException e) {
e.printStackTrace();
}
}
/* 上传图片配置项 */
"imageActionName": "uploadimage", /* 执行上传图片的action名称 */
"imageFieldName": "file", /* 提交的图片表单名称 */
"imageMaxSize": 2048000, /* 上传大小限制,单位B */
"imageAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* 上传图片格式显示 */
"imageCompressEnable": true, /* 是否压缩图片,默认是true */
"imageCompressBorder": 1600, /* 图片压缩最长边限制 */
"imageInsertAlign": "none", /* 插入的图片浮动方式 */
"imageUrlPrefix": "", /* 图片访问路径前缀 */
"imagePathFormat": "/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */
/* {filename} 会替换成原文件名,配置这项需要注意中文乱码问题 */
/* {rand:6} 会替换成随机数,后面的数字是随机数的位数 */
/* {time} 会替换成时间戳 */
/* {yyyy} 会替换成四位年份 */
/* {yy} 会替换成两位年份 */
/* {mm} 会替换成两位月份 */
/* {dd} 会替换成两位日期 */
/* {hh} 会替换成两位小时 */
/* {ii} 会替换成两位分钟 */
/* {ss} 会替换成两位秒 */
/* 非法字符 \ : * ? " < > | */
/* 具请体看线上文档: fex.baidu.com/ueditor/#use-format_upload_filename */
完成了上面步骤,你就能正常的在富文本中编辑内容了,图标功能正常使用
因为图片上传内部源码是上传到本地,所有我们不能使用默认的我们需要通过js代码来进行判断控制图片上传服务器的地址:
①、在"ueditor.config.js"文件中 搜索“whitList” 然后修改img参数如下图,添加
,'_url','style''
②、 在白名单末尾添加如下参数:
source: ['src', 'type'],
embed: ['type', 'class', 'pluginspage', 'src', 'width', 'height', 'align', 'style', 'wmode', 'play','autoplay','loop', 'menu', 'allowscriptaccess', 'allowfullscreen', 'controls', 'preload'],
iframe: ['src', 'class', 'height', 'width', 'max-width', 'max-height', 'align', 'frameborder', 'allowfullscreen']
修改“ueditor.all.js”文件 修改完成如下图
搜索关键词:“insertvideo”
修改完成之后如下:
execCommand: function (cmd, videoObjs, type){
videoObjs = utils.isArray(videoObjs)?videoObjs:[videoObjs];
var html = [],id = 'tmpVedio', cl;
for(var i=0,vi,len = videoObjs.length;i
关键字":"notFireSelectionchange"
- 修改完成后入下
setContent: function (html, isAppendTo, notFireSelectionchange) {
var me = this;
me.fireEvent('beforesetcontent', html);
// 防止编辑看不到视频
// var root = UE.htmlparser(html);
// me.filterInputRule(root);
// html = root.toHtml();
me.body.innerHTML = (isAppendTo ? me.body.innerHTML : '') + html;
function isCdataDiv(node){
return node.tagName == 'DIV' && node.getAttribute('cdata_tag');
}
---
主要操作是使用video标签用于回显使用
将函数createPreviewVideo修改为如下
function createPreviewVideo(url){
if ( !url )return;
var conUrl = convert_url(url);
conUrl = utils.unhtmlForUrl(conUrl);
// $G("preview").innerHTML = ''+lang.urlError+''+
// '';
$G("preview").innerHTML = '';
}
注意:
图片与视频上传成之后响应信息为
res.put("state", "SUCCESS");
res.put("url", serverConfig.getExternalUrl() + url);
res.put("title", fileName);
res.put("original", fileName);
// 其中url为能直接访问的地址
// state 为必须值
如下图
添加内容为
'
break;
case 'embed':
str = '
搜索关键字:创建插入视频字符窜 || creatInsertStr
switch (type){
case 'image':
str = '