发表于: 2017-04-28 20:35:40
1 1105
今天完成的事情:
查看富文本编辑器,选择富文本编辑器
给代码里面添加富文本编辑器
明天计划的事情:
点击提交按钮,把富文本编辑器的内容和表单中的其他内容一起提交到服务器
收获:
UEditor样式被过滤无法显示问题:
遇到在向文本编辑器插入HTML文本时,添加的样式老是被过滤掉,该编辑器内部过滤机制是将style标记转换为div,而将div等标签以p替代。如何解决样式过滤的方法。
首先在ueditor.all.js文件内搜索allowDivTransToP,找到如下的代码,将true设置为false
me.setOpt('allowDivTransToP',false);
//默认的过滤处理
//进入编辑器的内容处理
然后再接着下边的addInputRule方法中将switch代码段中的case style,script都给注释或者删掉。
me.addInputRule(function (root) {
var allowDivTransToP = this.options.allowDivTransToP;
var val;
//进行默认的处理
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下的case style 和script
switch (node.tagName) {
case 'a':
if (val = node.getAttr('href')) {
node.setAttr('_href', val)
}
break;
解释一下以上操作的意义。
第一步将allowDivTransToP设置为false是因为默认的设置是将div自动转换为p,这样写好的样式就找不到相应的div,所以才渲染不上的。
第二步将addInputRule函数中的switch 代码段中的case style ,script选择给删除或者注释,是为了避免出现编辑器将style或script自动的转换成别的标签。
完成以上操作之后,保存即可。再次插入html时,样式就可以显示了。
评论