在项目中使用fckeditor,一开始定义了自己的模板,让用户自行选择导入,后来用户要求,把一些基础内容都先预先填好,后来查阅了相关资料,没有解决了。
那现在再想一下用户的需求,用户最终希望能够使用样式定好的模板,填写相关信息,然后进行报告的预览和打印。
那么我们就可以把填写的内容和显示的功能分开来操作,填写内容用我们一般的表单,显示我们就用另一个页面直接承载定制好的样式,把传过来的内容填充进去不久可以了,在显示页,用户预览的同时,也可以对其进行打印。
为了实现,我们可能要将之前一个fckeditor编辑区,在填写页面弄多个,然后在显示页将编辑的内容再显示出来。
我们知道fckeditor本质是使用iframe的,所以我们在显示页,将内容也放在iframe中,就可以了。
<iframe id="diaofimage" width="583" height="300" frameborder="0"
scrolling="auto" style="border: 1px solid gray"></iframe>
javascritp调用代码
//IE
diaofimage.document.write("<b>孙健</b>");
//FireFox
desofimage.contentWindow.document.write("asdfasdf");
当然,为了判断浏览器类型,我们再添加一段javascript代码作为判断的标准
var Brower={
// 判断是否为IE6浏览器
isIE6:navigator.userAgent.search('MSIE')>0&&navigator.userAgent.search('6')>0,
// 判断是否为IE浏览器
isIE:navigator.userAgent.search('MSIE')>0,
// 判断是否为Opera浏览器
isOpera:navigator.userAgent.indexOf('Opera')>-1,
// 判断是否为FireFox浏览器
isMoz:navigator.userAgent.indexOf('Mozilla/5.')>-1
}
分享到:
相关推荐
在网页设计中,有时我们需要在页面中添加一个遮罩层,以实现如加载动画、弹窗提示或隐藏部分内容的效果。本话题将详细讲解如何在iframe中实现页面的遮罩层功能,结合`right.html`, `main.html`, `left.html`, `top....
// 将iframe添加到页面的某个元素后面,例如body document.body.appendChild(iframe); ``` 接下来,我们讨论动态添加JavaScript代码。这通常涉及到`document.write`、`innerHTML`、`createElement`和`appendChild`...
jquery iframe动态添加tab选项卡 jquery iframe动态添加tab选项卡 jquery iframe动态添加tab选项卡 jquery iframe动态添加tab选项卡 jquery iframe动态添加tab选项卡 jquery iframe动态添加tab选项卡 jquery iframe...
在网页开发中,`iframe`(Inline Frame)是一种嵌入其他网页的标签,常用于将外部内容如视频、地图或文章等内容嵌入到当前页面中。然而,由于`iframe`的大小固定,当嵌入的页面内容高度或宽度超过`iframe`设定的尺寸...
当遇到"Iframe中页面显示不全"的问题时,通常是由于iframe的尺寸设置不当或者与被嵌入内容的尺寸不匹配导致的。下面将详细探讨如何解决这一问题以及相关的知识点。 首先,我们需要了解`<iframe>`的基本结构和属性。...
4. 将iframe添加到页面的body中,并获取iframe的contentWindow.document对象,为打印做准备。 5. 将打印区域的内容写入iframe的文档中,可以通过添加link元素引入打印专用的CSS样式。 6. 将iframe聚焦,并调用`print...
我们检查当前窗口是否在iframe内,如果是,我们将自定义的div层添加到iframe的body元素中,以确保它覆盖整个页面,而不仅仅是iframe的内容。 现在,你可以像使用原生alert一样使用这个自定义的弹出层: ```...
在探讨“IFrame中Session丢失的解决办法”这一主题时,我们首先需要理解Session与IFrame的基本概念及其在Web开发中的交互方式。Session是Web应用中用于存储用户特定信息的一种机制,它允许开发者在用户的会话期间...
1. **Flex组件被遮挡**:由于Flex和HTML的渲染机制不同,当HTML内容被加载到IFrame中时,可能会覆盖Flex组件,导致菜单、弹出界面或右键菜单等不可见。解决这个问题的关键在于调整Z-index,即设置IFrame和Flex组件的...
vue给页面添加水印,或者给iframe添加水印
1. **初始化拖放**:在第一个iframe中,为需要拖动的div设置`draggable="true"`,并添加相应的事件监听器,如`ondragstart`来捕获拖动开始时的信息。 2. **封装数据**:在`ondragstart`事件中,可以将div的ID或其他...
js 实现 动态添加iframe框架! 值得下载看看!资源免费,大家分享!!
用iframe提交表单,主要是将表单提交到iframe中,可实现无刷新提交。 html页面: <iframe name="FORMSUBMIT" width="1" height="1" ></iframe> ...
解决这个问题的一个方法是在IFRAME的URL参数中添加wmode=opaque,这样可以改变IFRAME的窗口模式,从而避免其影响到其他元素的Z-index层级。类似地,当IFRAME内嵌Flash对象时,也可能出现z-index失效的问题。这时,...
在 ASPX 页面中添加 iframe 元素,用于加载外部页面或资源。例如: ``` <IFRAME id="frame1" src="SourcePage.extension / URL of the external Site" scrolling="auto" runat="server"></IFRAME> ``` 其中,src ...
`iframe`允许我们在一个Vue应用中嵌入另一个独立的HTML文档,这对于展示第三方内容、实现某些特定功能或者处理复杂交互场景时非常有用。在Vue中使用`iframe`,我们可以直接在模板中插入`iframe`标签,并设置相应的...
在这个“添加了iframe的AdminLTE bootstrap框架”中,开发者针对原始的AdminLTE框架进行了一次创新性的改造,引入了iframe元素,使得框架更加灵活,能够更好地满足多页面展示和数据嵌入的需求。 Bootstrap是Twitter...
然而,在使用`<iframe>`时,有时我们需要监测其内容的变化,特别是当`<iframe>`中的源地址(src属性)发生改变时。 #### 1. 使用`window.onbeforeunload`事件监测IFrame内容变化 根据提供的代码示例,主要关注点...
例如,在A页面的iframe标签中添加`scrolling="auto"`可以自动根据内容显示滚动条。 ### 使用JavaScript解决滚动条问题 对于第二种情况,即允许iframe根据内容自动伸展的情况,推荐使用JavaScript来动态调整iframe的...
在这个例子中,我们为`body`元素添加了`onload`和`onresize`事件处理器,当页面加载完成或窗口大小发生变化时会调用`handleFrameLoad()`函数。 ##### 内部页面 ```html ; margin:0px; padding:0px"> ...