contentEditable的问题

cwa 2004-05-06 06:23:41
<iframe ID="WBTB_Composition" class="WBTB_Composition" MARGINHEIGHT="5" MARGINWIDTH="5" width="500" height="120"></iframe>


<SCRIPT LANGUAGE="JavaScript">

edit=WBTB_Composition;
edit.document.open();
edit.document.designMode="On";

edit.document.close();


WBTB_Composition.document.body.contentEditable = "True";

</SCRIPT>

以上是在线编辑器的一段代码

为什么IE6提示 WBTB_Composition.document.body 为空或者不是对象呢?
再请问

edit.document.open();
edit.document.close();
WBTB_Composition.document.body.contentEditable = "True";
各实现什么功能?

多谢

...全文
136 4 点赞 打赏 收藏 举报
写回复
4 条回复
切换为时间正序
当前发帖距今超过3年,不再开放新的回复
发表回复
cwa 2004-05-08
edit.document.open();

edit.document.close();

起什么作用
  • 打赏
  • 举报
回复
seeu1688 2004-05-06
document.write写入无需预置designMode

<body>
<iframe ID="WBTB_Composition" class="WBTB_Composition" MARGINHEIGHT="5" MARGINWIDTH="5" width="500" height="120"></iframe>
<SCRIPT LANGUAGE="JavaScript">
with(WBTB_Composition)
{
document.open("text/html");
document.close();
document.body.contentEditable = "True";
}
</SCRIPT>
</body>
  • 打赏
  • 举报
回复
wanghr100 2004-05-06
Try..

<iframe ID="WBTB_Composition" class="WBTB_Composition" MARGINHEIGHT="5" MARGINWIDTH="5" width="500" height="120"></iframe>


<SCRIPT LANGUAGE="JavaScript">

edit=WBTB_Composition;
edit.document.open();
edit.document.designMode="On";
edit.document.write("<body>")
edit.document.close();


WBTB_Composition.document.body.contentEditable = "True";

</SCRIPT>
  • 打赏
  • 举报
回复
gjd111686 2004-05-06
看一下了:http://www.daifusecure.com/articles/htmleditor.php

激活编辑器

激活编辑器的方法有两种。第一种方法是将整个文档设置为设计模式。第二种方法可以在浏览模式中使用,来使各个元素可在运行时编辑。如果想让整个文档可在浏览时进行编辑,则可以在文档正文上设置 contentEditable 属性。

将文档设置为设计模式

要将整个文档设置为设计模式,可以对文档对象本身设置 designMode 属性。当文档处于设计模式时,将不运行脚本。这样,似乎在文档内设置一个按钮来打开或关闭设计模式是个好注意,但这样做没有作用。当用户打开它后,它将保持在设计模式状态。当他们下次单击此按钮时,它将被选定而不是被单击,他们再次单击它,将能够编辑它的值。这就是为什么如果要使用设计模式最好对框架或 IFrame 中的文档设置 designMode 属性的原因。下例展示如何为 IFrame 中的文档打开设计模式:

<script for="btnDesign" event="onclick">
targetDoc = document.frames(0).document;
if (targetDoc.designMode == "On")
targetDoc.designMode = "Off";
else
targetDoc.designMode = "On";
</script>
<button id=btnDesign>DesignMode</button>
<iframe src="blank.htm" style="border: black thin; width:100%; height:200px"></iframe>

designMode 属性的值始终以首字母大写格式存储,即时它最初是以全部小写设置的。请在测试它的值时一定记住这点。designMode 属性的默认值是“Inherit”。

在浏览模式中使元素可以编辑(或在设计模式中不可编辑)

在 Internet Explorer 5.5 中,可以针对每个元素激活编辑器,而同时,文档本身处于浏览模式中。只要将 contentEditable 属性设置为 True,就能使元素在浏览时可被编辑。下例展示如何说明性地设置该属性,并创建行为类似文本框的跨距:

<span contentEditable=true style="width:150; border:lightgrey 3px inset"></span>

要使元素在全部脚本过程中可被编辑是非常容易实现的。下面的范例显示如何在脚本中对 ID 为“foo”的元素设置 contentEditable 属性:

foo.contentEditable=True;

要防止元素在设计模式中处于可编辑状态,可以将 contentEditable 属性设置为 False。但这将使元素具有布局,这样,当它在设计模式中时,用户将能够对它进行控制选定、拖动、调整大小等:

foo.contentEditable=False;

contentEditable 元素的继承和嵌套

contentEditable 属性是被继承的,所以,如果您说明元素具有 contentEditable 属性,则默认情况下它的所有子元素都将是可编辑的。(contentEditable 属性的默认值是“Inherit”。

通过将其 contentEditable 属性设置为 False,可以使 contentEditable 元素的后代成为不可编辑的,但这样之后,请记住设置元素的 contentEditable 属性将导致元素具有自己的布局。无论元素的 contentEditable 属性被设置为 True 或 False,都要发生这样的情况。还要记住,当有布局的元素处在可编辑的容器中时,一旦用户单击它的内部,它将被控制选定。当它被控制选定时,将显示抓取手柄,并且用户可以拖动该元素或调整其大小。这并不表示不应当在可编辑的元素内嵌套不可编辑的元素,只不过要加以注意罢了。

判断元素是否是可编辑的

要判断元素是否是可编辑的,只检查 contentEditable 属性的值是不够的。元素可能根本没有 contentEditable 属性,但仍然可能已经从它的某个祖先那里继承了内容可编辑性。或者,它可能是默认时可编辑的元素,如文本框。或者,包含它的文档可能处于设计模式中。确定元素是否可编辑的唯一完全可靠的方法是检查 isContentEditable 属性。isContentEditable 属性综合了所有这些因素。该属性是只读的,其结果为布尔值。下例展示如何判断 ID 为“foo”的元素是否可以被编辑:

result=foo.isContentEditable;

  • 打赏
  • 举报
回复
相关推荐
发帖
JavaScript
加入

8.5w+

社区成员

Web 开发 JavaScript
申请成为版主
帖子事件
创建了帖子
2004-05-06 06:23
社区公告
暂无公告