百度的UEditor,样式上挺美观的。所以一直都在用他。但是问题真是一把一把的多。在放入html源码后,格式错乱了。div不见了,多空行,table的td错误嵌套等等。这个问题百度也没有好好的想去解决。
好了,废话不多说了,进入正题。
1.首先解决缺少div标签的问题。其实是百度默认把div标签屏蔽了,为了避免多div或少div的情况下,会影响整个页面的布局。这个也情理之中。
解决方式是:
//模式屏蔽div为false就可以了
editor.options.allowDivTransToP = false;
这个是最简单的。
2.再者解决table的td乱嵌套的问题。
这个不知道是不是百度的一个BUG,在考虑子节点必须拥有父节点的td节点中,竟然没有写进table。
修正方法:在ueditor.all.js中,找到
var uNode = UE.uNode,
needParentNode = {
'td':'tr',
//在这行td的数组中补上 table即可
'tr': ['tbody', 'thead', 'tfoot', 'table'],
'tbody':'table',
'th':'tr',
'thead':'table',
'tfoot':'table',
'caption':'table',
'li':['ul', 'ol'],
'dt':'dl',
'dd':'dl',
'option':'select'
},
needChild = {
'ol':'li',
'ul':'li'
};
3.最后解决在空td的时候会产生<br>从而导致版面措乱。
解决方法:同样在 ueditor.all.js中,找到
case 'caption':
if(!node.children || !node.children.length){
//去除空td中的 <br/>,将后面的生成br的方法修改为UE.uNode.createText(' ')
node.appendChild(browser.ie ? UE.uNode.createText(' ') : UE.uNode.createText(' '))
}
break;
4.还有乱七八糟的样式,惹人厌。也去掉
找到
<script type="text/javascript">
document.getElementById('preview').innerHTML = editor.getContent();
//注释掉就可以了
//uParse('#preview', {
// rootPath: '../../',
// chartContainerHeight: 500
//})
dialog.oncancel = function () {
document.getElementById('preview').innerHTML = '';
}
</script>