当前位置: 首页 > 图文教程 > 网络编程 > 网页编辑器 > 编辑器中designMode和contentEditable的属性的介绍

网页编辑器
DISCUZ论坛的UBB编辑器(增加灵活调用,支持ASP)
一款垃圾中的极品HTML编辑器(兼容IE OR FF)
一个Javascript 编写的代码编辑器
TinyMce 中文手册 在线手册与下载
eWebEditor_v280_Free_Final最好用的网页编辑器下载
新浪博客在线编辑器傻瓜调用版(2007.11.1第四次修正)提供下载了
解密FCKeditor 2.0 的设置.修改.使用方法
比较不错的修改FCKEditor的修改方法
FCKeditor2.3 For PHP 详细整理的使用参考
又一个不错的FCKeditor 2.2的安装、修改和调用方法
FCKeditor的几点修改小结
ASX文件 终极教程
DISCUZ论坛的UBB编辑器(增加灵活调用,支持ASP UBB解析)打包下载
Qzone编辑器QzoneEditor打包下载
FCKEditor v2.6 编辑器配置图解教程
asp.net 为FCKeditor开发代码高亮插件实现代码
宝丽通实现连续播放实现代码
jsp Ewebeditor使用说明
编辑器中designMode和contentEditable的属性的介绍
修改fckeditor的文件上传功能步骤

网页编辑器 中的 编辑器中designMode和contentEditable的属性的介绍


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2010-01-10   浏览: 78 ::
收藏到网摘: n/a

先解释一下在线编辑器的原理:首先需要IE5.0以上版本的支持.因为IE5.0以上版本有一个编辑状态,designMode是document的属性,意思是设置或获取表明文档是否可被编辑的值,默认值为off或Inherit HtmlEdit.document.designMode="On";
HtmlEdit是iframe对象ID
IE 中可以设置contentEditable="true"
把div的contentEditable属性设置为 true,在IE浏览器中就可以看到效果了,div中元素都变成可以编辑的了。
<div id="tt" contentEditable="true"></div>
<body contentEditable="true"><!--则整个页面都可以编辑了-->。
Firefox中可以 使用javascript语句设置属性contentDocument.designMode为 "on"
iframeName.document.designMode="on" ;
其中iframeName 为iframe控件的name属性。
在 IE7和 FireFox2.0中测试通过。如果想先初始化加入一些内容及样式,代码示例如下:
复制代码 代码如下:

if(navigator.appName == "Microsoft Internet Explorer")
{
var IframeID=frames["HtmlEditor"];
if(navigator.appVersion.indexOf("MSIE 6.0",0)==-1){IframeID.document.designMode="On"}
IframeID.document.open();
IframeID.document.write(StyleEditorHeader);
IframeID.document.close();
IframeID.document.body.contentEditable = "True";
IframeID.document.body.innerHTML=HidenObjValue;
IframeID.document.body.style.fontSize="10pt";
}else
{
var _FF = navigator.userAgent.indexOf("Firefox")>-1?true:false;
var IframeID=getObject("HtmlEditor");
HtmlEditor=IframeID.contentWindow;
HtmlEditor.document.designMode="On"
HtmlEditor.document.open();
HtmlEditor.document.write(StyleEditorHeader);
HtmlEditor.document.close();
HtmlEditor.document.body.contentEditable = "True";
HtmlEditor.document.body.innerHTML=HidenObjValue;
}