主体配置：ueditor.config.js
/**
* 配置项主体。注意，此处所有涉及到路径的配置别遗漏URL变量。
*/
window.UEDITOR_CONFIG = {
//为编辑器实例添加一个路径，这个不能被注释
//这个路径在javaweb项目中是正确的，URL会根据config文件路径自动获取路径，
//然后拼接出来ueditor的资源文件路径，出来是（http://localhost:8081/js/themes/default/css/ueditor.css）
UEDITOR_HOME_URL: URL
//在vue项目中，这个路径是不能访问到资源文件的，所以路径需要修改
UEDITOR_HOME_URL: '/plugin/UEditor/'（vue2版本，静态文件在public中存放，ueditor在项目中的路径：项目/public/plugin/UEditor）
//UEDITOR_HOME_URL: '/static/plugin/UEditor/'（vue1版本，静态文件在static中存放，ueditor在项目中的路径：项目/static/plugin/UEditor）
// 服务器统一请求接口路径
//上传待定
, serverUrl: "http:www.aa.com/conf" //这块填写后端部署好的UE统一请求接口
样式粘贴：ueditor.all.js
//百度编辑器为了防止xss攻击，会过滤粘贴过去的内容的格式，如果要保留粘贴样式，需要关闭xss攻击
1 、修改allowDivTransToP属性为false
UE.plugins[‘defaultfilter‘] = function () {
var me = this;
me.setOpt({
‘allowDivTransToP‘:false,
‘disabledTableInTable‘:true
});
2、修改过滤规则，将 case style 与script 注释掉
root.traversal(function (node) {
if (node.type == ‘element‘) {
if (!dtd.$cdata[node.tagName] && me.options.autoClearEmptyNode && dtd.$inline[node.tagName] && !dtd.$empty[node.tagName] && (!node.attrs || utils.isEmptyObject(node.attrs))) {
if (!node.firstChild()) node.parentNode.removeChild(node);
else if (node.tagName == ‘span‘ && (!node.attrs || utils.isEmptyObject(node.attrs))) {
node.parentNode.removeChild(node, true)
}
return;
}
switch (node.tagName) {
// case ‘style‘:
// case ‘script‘:
// node.setAttr({
// cdata_tag: node.tagName,
// cdata_data: (node.innerHTML() || ‘‘),
// ‘_ue_custom_node_‘:‘true‘
// });
// node.tagName = ‘div‘;
// node.innerHTML(‘‘);
// break;
3、修改ueditor.config.js，以下三项配置全部改为false
// xss 过滤是否开启,inserthtml等操作
,xssFilterRules: false
//input xss过滤
,inputXssFilter: false
//output xss过滤
,outputXssFilter: false
4、在ueditor.config.js文件内搜索allowDivTransToP,找到如下的代码，将注释去掉并且改为false
//默认过滤规则相关配置项目
//,disabledTableInTable:true //禁止表格嵌套
,allowDivTransToP:false //允许进入编辑器的div标签自动变成p标签
//,rgb2Hex:true //默认产出的数据中的color自动从rgb格式变成16进制格式
这些改完后，编辑器也就不能防止xss攻击了，丧失了安全性，只能内部人员自己使用
返回后在进入页面报错：Cannot set property 'innerHTML' of null
- 原因：
- 进入页面找是否存在已经实例化的编辑器对象,如果没有,就新生成一个编辑器.否则直接将页面上找到的那个编辑器给返回.再联想到刚才的报错Cannot set property 'innerHTML' of null(而不是undefined,而且控制台也没有输出编辑器2实例化完成),那么真相只有一个! 那就是当你再一次来到编辑器页面时,编辑器早已经存在,都已经存在的编辑器,自然不会触发ready事件,所以自然不能触发卸载ready事件里的setContent事件了。
解决方法：
- <template>中
<script id="editor" type="text/plain" style="width:1024px;height:500px;"></script>
改为：<textarea id="editor" style="width:1024px;height:500px;"></textarea> - <script>中添加
destroyed () {UE.delEditor('editor')},
视频上传中把音频区分出来，并用audio标签展示音频
/**
* 创建插入视频字符窜
* @param url 视频地址
* @param width 视频宽度
* @param height 视频高度
* @param align 视频对齐
* @param toEmbed 是否以flash代替显示
* @param addParagraph 是否需要添加P 标签
*/
function creatInsertStr(url,width,height,id,align,classname,type){
url = utils.unhtmlForUrl(url);
align = utils.unhtml(align);
classname = utils.unhtml(classname);
width = parseInt(width, 10) || 0;
height = parseInt(height, 10) || 0;
var str;
switch (type){
case 'image':
var ext = url.substr(url.lastIndexOf('.') + 1);
if(ext == 'ogv') ext = 'ogg';
if (ext == 'mp3' || ext == 'ogg' || ext == 'wav'){
str = '<p><br/></p><p style="display: none">1</p><audio' + (id ? ' id="' + id + '"' : '') + ' class="' + classname + ' video-js" ' + (align ? ' style="float:' + align + '"': '') +
' controls preload="none" width="' + width + '" height="' + height + '" style="width: 100%" src="' + url + '" data-setup="{}">' +
'<source src="' + url + '" type="audio/' + ext + '" /></audio>';
}else{
str = '<p><br/></p><p style="display: none">1</p><video' + (id ? ' id="' + id + '"' : '') + ' class="' + classname + ' video-js" ' + (align ? ' style="float:' + align + '"': '') +
' controls preload="none" poster="http://placehold.it/420x280?text=loading..." width="' + width + '" height="' + height + '" src="' + url + '" data-setup="{}">' +
'<source src="' + url + '" type="video/' + ext + '" /></video>';
}
break;
case 'embed':
str = '<embed type="application/x-shockwave-flash" class="' + classname + '" pluginspage="http://www.macromedia.com/go/getflashplayer"' +
' src="' + utils.html(url) + '" width="' + width + '" height="' + height + '"' + (align ? ' style="float:' + align + '"': '') +
' wmode="transparent" play="true" loop="false" menu="false" allowscriptaccess="never" allowfullscreen="true" >';
break;
case 'video':
var ext = url.substr(url.lastIndexOf('.') + 1);
if(ext == 'ogv') ext = 'ogg';
if (ext == 'mp3' || ext == 'ogg' || ext == 'wav'){
str = '<p><br/></p><p style="display: none">1</p><audio' + (id ? ' id="' + id + '"' : '') + ' class="' + classname + ' video-js" ' + (align ? ' style="float:' + align + '"': '') +
' controls preload="none" width="' + width + '" height="' + height + '" style="width: 100%" src="' + url + '" data-setup="{}">' +
'<source src="' + url + '" type="audio/' + ext + '" /></audio>';
}else{
str = '<p><br/></p><p style="display: none">1</p><video' + (id ? ' id="' + id + '"' : '') + ' class="' + classname + ' video-js" ' + (align ? ' style="float:' + align + '"': '') +
' controls preload="none" poster="http://placehold.it/420x280?text=loading..." width="' + width + '" height="' + height + '" src="' + url + '" data-setup="{}">' +
'<source src="' + url + '" type="video/' + ext + '" /></video>';
}
break;
}
return str;
}
function switchImgAndVideo(root,img2video){
/**
* 'embed video audio' 增加音频audio转换img，方便在audio左右编辑
*/
utils.each(root.getNodesByTagName(img2video ? 'img' : 'embed video audio'),function(node){
var className = node.getAttr('class');
if(className && className.indexOf('edui-faked-video') != -1){
var html = creatInsertStr( img2video ? node.getAttr('_url') : node.getAttr('src'),node.getAttr('width'),node.getAttr('height'),null,node.getStyle('float') || '',className,img2video ? 'embed':'image');
node.parentNode.replaceChild(UE.uNode.createElement(html),node);
}
if(className && className.indexOf('edui-upload-video') != -1){
var html = creatInsertStr( img2video ? node.getAttr('_url') : node.getAttr('src'),node.getAttr('width'),node.getAttr('height'),null,node.getStyle('float') || '',className,img2video ? 'video':'image');
node.parentNode.replaceChild(UE.uNode.createElement(html),node);
}
})
}
// me.addOutputRule(function(root){
// switchImgAndVideo(root,true)
// });
// me.addInputRule(function(root){
// switchImgAndVideo(root)
// });
网友评论