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

html文本编辑器-基于Html

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

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. outerHTML指什么？outerText呢？解决方法
  2. 对网站运用css sprite 技术自动化实施方式的探讨
  3. 实现html文件上载而不是打的方法
  4. 诡异有关问题求教
  5. 内联元素解决思路
  6. 页面底部永远在底部,该如何处理
  7. [原文翻译]样式表编写效率手册
  8. 关于表单有关问题，求解答
  9. 页面CSS有关问题，刚进入正常，刷新出错。望指点，