1. 爱易网页
  2. HTML教程
  3. html文本编辑器-基于Html

html文本编辑器-基于Html

日期：2014-05-17　 浏览次数：20590 次

html文本编辑器--基于Html

以前一直不知道好多网站上所说的在线编辑器是怎么回事，后来在文档里发现document 对象的一个方法。

document.execCommand(command, false, value);

才知道具体原理。

一、首先来看一个例子：

<DIVcontenteditable="true"style="border:dashed blue 2px">Hello World!</DIV>

保存为html网页，打开看看，在DIV里出现了一个光标，这个DIV就变成可以编辑的了。

类似的，SPAN，FONT等都可以有 contenteditable="true"?? 这个属性。

再试试下面的：

<DIVcontenteditable="true"style="border:dashed blue 2px">Hello World!
????<IMGsrc="http://p.blog.csdn.net/images/p_blog_csdn_net/comstep/70786/o_logo.jpg" />
</DIV>

我们就可以拉伸图片了。

二、具体实现：

???? 1、需要两个页面，blank.html editor.html

???? 2、blank.html 作为 editor.html的一个内嵌Frame，作为编辑框。

<html>
<body topmargin="10" leftmargin="10" bgColor="#f6f6f6">
?? <div id="RTC" contenteditable = true>

相关资料更多>

  1. JavaScript获取HTML DOM节点元素的步骤的总结（转）
  2. 请帮忙批改个打印格式吧 老是对不齐 搞了一天了
  3. Html中的textarea 的内容不居左显示有关问题
  4. Fieldset 一个不常用的HTML标签
  5. 两个一模一样的HTML文件 编码方式都是utf-8 浏览器打开结果却不同解决方案
  6. （急）js打开新窗口返回值IE一般/firefox失败
  7. $(document).ready()跟window.onload区别
  8. CSS匣子模式
  9. css语法异常导致firefox上css部分失效的有关问题