编辑器生成的html代码再显示的样式冲突问题

网页编辑器是个不错的东西，在很多时候都需要使用到，用来编辑各种文本。然而使用网页编辑器却会存在一些各种各样的问题，解决这些问题总会让人头疼。

最近使用编辑器编写正文，在需要再在前台展示的时候发现样式冲突的厉害。然而又没有办法清除原有的样式，只能将整个需要显示的内容和当前的页面隔离开才能使用完整的编辑器样式。下面说下两种展示的方法，可以完整的显示编辑器样式。

1.使用原有编辑器进行再展示

编辑器编辑的东西，在编辑器内再显示一定是所见即所得。因此，使用编辑器再显示原本的内容只需要再次调用编辑器，把内容写入，清掉不需要的插件，最后把编辑器设置为不可编辑即可。下面以ueditor为例：

<!--页面调取editor-->
<script id="editor" name="content" type="text/plain" style="width:99.9%;min-height:350px;height:100%;"></script>
<script type="text/javascript">
var ue = UE.getEditor('editor',{
toolbars: [],
autoHeightEnabled: true,
autoFloatEnabled: true,
enableAutoSave: false,
readonly:true,
wordCount:false
});

ue.addListener("ready", function () {
var content = '${mail.content}';
ue.setContent(content);
}
);
</script>

设置为只读，把辅助编辑的功能全部去除，再把内容置入即可。

这么做保证了原滋原味，羊毛出在羊身上，编辑的内容是什么样子，展示的也会一模一样。

2.使用iframe进行页面嵌入

iframe加载的页面和当前页无关，样式自然页不会有冲突，可以很好的展示编辑器编辑完成的html代码样式，当然，还是会有些微的不同，但大致基本是一致的。

使用iframe的好处就是不需要再在页面构造一个编辑器，毕竟编辑器的样式，页面内控件调整较为复杂。下面为iframe展示的想法：

<!--创建一个空的iframe,不需要指定地址-->
<iframe name="cmsCon" id="cmsCon" class="cmsCon" frameborder="0" width="100%" scrolling="no" height="auto"></iframe>
<script type="text/javascript">
$('#cmsCon').contents().find('body').html('展示内容');
autoHeight(); //动态调整高度

var count = 0;
var autoSet = window.setInterval('autoHeight()',500);
function autoHeight(){
var mainheight;
count++;
if(count == 1){
mainheight = $('.cmsCon').contents().find("body").height()+50;
}else{
mainheight = $('.cmsCon').contents().find("body").height()+24;
}
$('.cmsCon').height(mainheight);
if(count == 5){
window.clearInterval(autoSet);
}

}
</script>iframe高度需要依据内容的高度进行动态的加载，因为展示的时候没有使用滚动条，也没有初始化高度（不使用滚动条初始化高度没有意义）。
在上面提供的动态调整高度的方法存在一个缺陷，就是如果展示的内容中包含图片，那么会因为图片的加载延时导致一开始获取的高度不足，从而导致图片无法完整的加载。这个问题我想了很久也没有找到合适的方法来解决。因为内容是动态写入，iframe不是展示一个全新的页面，只是我们对这个iframe进行了内容设置，所以做起修改非常的麻烦。因此我做了一个方法的循环调用，多次设定高度，这样就能在页面图片加载完成后进行正确的高度获取。（动态写入内容，导致了load事件不会触发...）

网上也有不少动态调整高度的方法，也值得借鉴。