本文给大家介绍网站后台编辑器生成的html代码CSS样式冲突调整方法，网上看了看，大概有3种方法：
1、更改冲突的css
2、用iframe
3、直接显示编辑器，然后去掉编辑器上不需要的东西，比如工具栏，让编辑器不可编辑等等。
根据自身情况，更改冲突的css就不考虑了，因为实在太多了，改了这个，没有发现那个，以后发现的时候再去改，而且工作量也很大，费时费力，剩下的就是irfame和直接显示编辑器了。
这里先说说直接显示编辑器吧，用百度编辑器为例
<!--页面调取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
});
</script>设置为只读，把辅助编辑的功能全部去除，再把内容置入即可。
这么做保证了原滋原味，羊毛出在羊身上，编辑的内容是什么样子，展示的也会一模一样。
再说说使用iframe进行页面嵌入
iframe加载的页面和当前页无关，样式自然页不会有冲突，可以很好的展示编辑器编辑完成的html代码样式，当然，还是会有些微的不同，但大致基本是一致的。
使用iframe的好处就是不需要再在页面构造一个编辑器，毕竟编辑器的样式，页面内控件调整较为复杂。下面为iframe展示的想法：
<!--这里放一个div，用于显示loding加载动画，让用户感觉更好--> <div id="showUEditorContentIframeLoding" align="center" style="width: 100%;height: 100px;line-height: 100px;"> <img src="https://www.yxiupei.cn/Common/loading.gif'" /> </div> <!--这里就放iframe了，注意：设置高度为0，加一个onload事件--> <iframe id="showUEditorContentIframe" src="xxx.php" width="100%" height="0" scrolling="no" frameborder="0" onload="setShowContentIframeHeight();"></iframe>
js代码
//iframe加载完成的函数
function setShowContentIframeHeight() {
//设置编辑器内容的图片宽高
var img_max_width = $('.article-detail').width();
$('#showUEditorContentIframe').contents().find('img').each(function(){
var img_width = $(this).width();
var img_heigth = $(this).height();
if (img_width>img_max_width) {
$(this).attr('width',img_max_width);
var bili = img_width/img_heigth;
var img_max_height = Math.round(img_max_width/bili);
$(this).attr('height',img_max_height);
};
});
//获取高度
var height = $('#showUEditorContentIframe').contents().find("body").height()+50;
//设置高度
$('#showUEditorContentIframe').height(height);
// 隐藏loding
$('#showUEditorContentIframeLoding').hide();
//浏览器窗口绑定resize事件,浏览器窗口大小改变，重新设置编辑器内容的图片宽高
$(window).on('resize',function(){
var img_max_width = $('.article-detail').width();
$('#showUEditorContentIframe').contents().find('img').each(function(){
var img_width = $(this).width();
var img_heigth = $(this).height();
if (img_width>img_max_width) {
$(this).attr('width',img_max_width);
var bili = img_width/img_heigth;
var img_max_height = Math.round(img_max_width/bili);
$(this).attr('height',img_max_height);
};
});
});
//编辑器内容的图片点击放大
$('#showUEditorContentIframe').contents().find('img').click(function(){
var width = $(window).width()*0.7;
layer.open({
type: 1,
area:width+'px',
title: false,
closeBtn: 0,
shadeClose: true,
content: '<img style="width:'+width+'px;" src="'+$(this).attr('src')+'"/>'
});
});
}下面我们一起来测试一下
以上内容就是我给大家介绍的“”网站后台编辑器生成的html代码CSS样式冲突调整方法“”，希望对大家有所帮助，DMZJWZ资料网非常感谢大家的支持和关注！如果大家在阅读当中碰到任何疑问可以给我留言，我会及的时回复大家。
