编辑器生成的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事件不会触发...）
网上也有不少动态调整高度的方法，也值得借鉴。

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

百度在线编辑器显示html,UEditor百度编辑器中JS/html代码（script标签）被过滤的解决办法...
作为一名程序员,在文章中经常会插入各种代码,大部分代码都不会发生问题,但div和script标签是经常会被使用到的. 而在之前的文章编写过程中,插入JS代码后,第一次文章会显示正常,而之后在后台编辑器 ...
利用iconfont.css生成html代码，显示iconfont里面的所有的图标
开发时,一个同事问我,遇到历史项目中的iconfont,不知道里面有哪些图标. 于是我便利用nodejs,来根据css生成html显示里面的所有图标.首先用webstorm格式化css代码 ,然后再在 ...
linux进去vi编辑器执行c语言代码,VI编辑器的使用与Linux操作系统下C语言的使用...
一.实验题目 Linux操作系统下C语言的使用二.实验课时 2课时. 三.实验目的:熟悉Linux操作系统下c语言的使用. 四.实验内容学习Linux环境下gcc的使用: 观察进程运行情况和CPU ...
GitHub开源：一键生成前后端代码神器
目录 1.技术架构 2.微服务架构图 3.业务应用本篇博客将为朋友们分享一款神器:JeecgBoot. JeecgBoot 是一款基于代码生成器的低代码开发平台,零代码开发.采用前后端分离架构:Sp ...
无需写代码！可一键生成前后端代码的开源工具
作者 | HelloGitHub-小鱼干来源 | HelloGitHub(ID:GitHub520) JeecgBoot 是一款基于代码生成器的低代码开发平台,零代码开发.JeecgBoot 采用开 ...
编译hotspot_从Hotspot JIT编译器打印生成的汇编代码
编译hotspot 有时,在对Java应用程序进行性能分析时,有必要了解Hotspot JIT编译器生成的汇编代码. 这对于确定已做出的优化决策以及我们的代码更改如何影响生成的汇编代码非常有用. 在调 ...
PowerDesigner(九)-模型文档编辑器(生成项目文档)
模型文档编辑器 PowerDesigner的模型文档(Model Report)是基于模型的,面向项目的概览文档,提供了灵活,丰富的模型文档编辑界面,实现了设计,修改和输出模型文档的全过程. 模型文 ...
javadoc文档的生成方法_Cocoa 代码注释与文档生成
Cocoa 代码注释与文档生成本文的文档规范部分的内容参考自:NSHipster 的 Swift Documentation 作者 & Nate Cook 本文知识目录背景曾经以为好的代 ...
一款无需写任何代码即可一键生成前后端代码的开源工具
JeecgBoot 是一款基于代码生成器的低代码开发平台,零代码开发.JeecgBoot 采用开发模式:Online Coding 模式-> 代码生成器模式-> 手工 MERGE 智能开发 ...

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

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

最新文章

热门文章