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

网页编辑器
让 FCKeditor 支持多用户Web环境(以PHP为例)
Ewebeditor 文件上传问题
PHP网页 Ewebeditor 编辑器嵌入方法
FckEditor 上传图片后图片变小了!问题解决
fckeditor asp版本的文件重命名
FckEditor 中文配置手册
FCKEditor网页编辑器 几点使用心得
FCK 编辑器焦点问题
添加FCKeditor插件需要注意的地方
javascript 获取FCKeditor内容
eWebEditor 上传文件提示格式不正确的解决方法
xhEditor的异步载入实现代码
FCKeditor 编辑器插入代码功能实现步骤
配置fckeditor 实现图片的上传
FCKeditor提供了一个完整的JavaScript API
fckediter javascript事件函数代码
ASP FCKeditor在线编辑器使用方法
ASP下使用FCKeditor在线编辑器的方法
ASP.NET中FCKEDITOR在线编辑器的用法
php下FCKeditor2.6.5网页编辑器的使用方法

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


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2010-01-10   浏览: 81 ::
收藏到网摘: 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;
}