`
san_yun
  • 浏览: 2578294 次
  • 来自: 杭州
文章分类
社区版块
存档分类
最新评论

在线HTML编辑器原理

阅读更多
为什么能实现在线编辑呢?  首先需要ie 的支持,在 ie 5.5以后就有一个编辑状态,就是利用这个编辑状态,然后用javascript 来控制在线编辑的。
下面给出一个简短的例子:
首先要有一个编辑框,这个编辑框其实就是一个 可编辑状态的 网页,我们这里用iframe 来建立编辑框

<IFRAME id=HtmlEdit style="WIDTH: 100%; HEIGHT: 296px" marginWidth=0 marginHeight=0>
</IFRAME>

并且在 加上javascript 代码来指定 HtmlEdit 有编辑功能:

function document.onreadystatechange()
{
HtmlEdit.document.designMode="On";
}



HtmlEdit.document.body.innerHTML  这句可以获得 HtmEdit 里面的html代码. 一般的我们会用这样的javascript 将 iframe 里的内容传递给一个textarea 然后提交给服务器处理.

function getIframeData(){
document.form1.test.value=HtmlEdit.document.body.innerHTML;
}
function sentIframeData(){
HtmlEdit.document.body.innerHTML=document.form1.test.value;
}

var sel = HtmlEdit.document.selection.createRange(); 而这一句可以获得选取的焦点:

下面我就演示一个完成的例子. 一个拥有加粗功能的在线编辑器,有兴趣的朋友可以在此基础上完成其他功能!!

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<script language="javascript">
function getIframeData(){
document.form1.test.value=HtmlEdit.document.body.innerHTML;
}
function sentIframeData(){
HtmlEdit.document.body.innerHTML=document.form1.test.value;
}
function doB(){
HtmlEdit.focus();
var sel = HtmlEdit.document.selection.createRange();
insertHTML("<b>"+sel.text+"</b>");
}
function insertHTML(html) {
if (HtmlEdit.document.selection.type.toLowerCase() != "none"){
  HtmlEdit.document.selection.clear() ;
}
HtmlEdit.document.selection.createRange().pasteHTML(html) ;
}
function document.onreadystatechange()
{
HtmlEdit.document.designMode="On";
}
</script>
</head>

<body>
<form action="test.asp?act=add" method="post" name="form1">
 
<IFRAME id=HtmlEdit style="WIDTH: 100%; HEIGHT: 296px" marginWidth=0 marginHeight=0>
</IFRAME>
<textarea name="test" rows="10" id="test" style="width:100%;"></textarea>
<br>
<input type="submit" name="Submit" value="提交">
<input type="button" value="iframe->textarea" onClick="getIframeData()">
<input type="button" value="textarea->iframe" onClick="sentIframeData()">
<input type="button" value="B" onClick="doB()">
</form>
</body>
</html>
分享到:
评论

相关推荐

    HTML在线编辑器原理

    HTML在线编辑器原理详细讲解 javascript实现 很好用 简单实用

    HTML在线编辑器原理-简单深入.docx

    HTML在线编辑器原理-简单深入.docx

    Asp.net2.0 HTML在线编辑器

    详细介绍一下HTML编辑器的原理和使用,大家可以通过现有的功能按自己需求设计出适合自己的编辑器。注:本编辑器是基于在网上找的一个简单的HTML+java编辑器扩展后的Asp.net2.0编辑器。

    仿QQ空间的HTML编辑器

    仿QQ空间的HTML编辑器,很不错的,仅供参考。

    在线所见即所得HTML编辑器的实现原理浅析

    主要介绍了在线所见即所得HTML编辑器的实现原理浅析,本文用初始化、打开编辑功能、获取编辑器的内容、增加样式设置、再进一步等步骤阐述在线编辑器的基本实现原理,需要的朋友可以参考下

    富文本编辑器源码

    富文本编辑器,Rich Text Editor, 简称 RTE, 它提供类似于 Microsoft Word 的编辑功能,容易被不会编写 HTML 的用户并需要设置各种文本格式的用户所喜爱。它的应用也越来越广泛。最先只有 IE 浏览器支持,其它浏览器...

    HTML编辑器在JAVA WEB下的应用研究.pdf

    本文介绍了HTML编辑器的基本功能,分析了它的基本原理及基本调用方式。通过对不同原理的HTML编辑器的分析,剖析其各自所具有的优缺点。最后阐述了目前常用的HTML编辑器Kind Editor在java WEB下应用的具体步骤。

    Editor SVG:SVG文件编辑器-开源

    **软件要求**-安装了Java Runtime Environment 1.7,如果没有安装,则可以在下面找到:http://www.oracle.com/technetwork/java/javase/downloads/java-se-jre-7- download- 432155.html **关于SVG编辑器**该软件是...

    SCEdit:html 编辑器开发原理,简单适用于iOS Android

    SCEdithtml 编辑器开发原理,简单适用于iOS AndroidDome

    ios-一款简易的富文本编辑器,支持html格式.zip

    下载地址:https://github.com/jiliuliu/SIXRichEditor... 一个简易的富文本编辑器。支持html格式,基于UITextView实现,原理简单,易于扩展。 支持功能: 1.添加本地图片 2.字体可以调整粗细、大小、字色、斜体。

    学习js在线html(富文本,所见即所得)编辑器

    需要一个可以编辑同时又可显效果的编辑框。textarea不行,它只能用来输入纯文本,不能显示颜色、斜体之类的文字样式,就像记事本,本文介绍所见即所得编辑器实现原理

    freemarker-pdf-editor:Webapp 编辑 Freemarker 模板,快速转换并预览 HTML 和 PDF 格式的结果

    freemarker-pdf-编辑器 一个简单的 web 应用程序,用于编辑 FreeMarker FTL 模板,快速转换并预览 HTML 和 PDF 格式的结果。 用 Spring 和 AngularJS 编写。 此工具旨在适应编写在您的应用程序中呈现为 HTML 或 PDF...

    UT210E-EEPROM-Editor:通过浏览器编写的UT210E EEPROM编辑器JavaScript嵌入在单个HTML页面中,完全脱机

    您还可以从GitHub页面在线访问此编辑器: : 。 内部运作 创建该项目的目的是减轻手工编辑十六进制转储的痛苦,并探索现代JavaScript语法以及现代Chrome浏览器支持的API(未测试其他浏览器-欢迎提出修复可能问题的...

    antd-visual-editor:ant-design 组件库实时可视化编辑器,实时生成 react 代码

    求 pr特性可视化编辑,同时实时生成结果代码,还可以单独预览丰富的数据编辑能力,可以编辑组件的二维属性组件可嵌套自适应布局除了 antd 的组件,还有一些原生 html 元素可使用原理解析1.如何实现实时编辑第一步,...

    文本编辑器_new.rar

    1. 概述 该资源主要是为Java Web系统的毕业...在参考源代码进行编程时,需要确保理解其工作原理和逻辑,避免仅仅复制和粘贴。 希望这种资源描述能够满足您的需求!如果还有其他的疑问或者需要进一步的描述,请告诉我。

    html的入门文档,绝对实用的

    只是由文字及标记组合而成,于 编辑方面,任何文字编辑器都可以,只要能将文件另存成 ASCII 纯文字格式即可,当然 以专业的网页编辑软件为佳。 · 第一课 Html简介 · 第二课 HTML标记一览 · 第三棵 文件标记 ...

    html语言剖析

    只是由文字及标记组合而成,于 编辑方面,任何文字编辑器都可以,只要能将文件另存成 ASCII 纯文字格式即可,当然 以专业的网页编辑软件为佳。 · 第一课 Html简介 · 第二课 HTML标记一览 · 第三棵 文件标记 ...

    SwifTML:Swift HTML生成器

    SwifTML-一个Swift HTML生成器 SwifTML允许您直接在Swift中构建HTML页面或片段。 框架的一部分。 下载随附的游乐场以查看其工作原理。 // TODO code sample 内置的标签定义是自动生成的,带有一些预定义的标签...

    微信小程序wxParse解析HTML

    微信小程序 微信小程序解析富文本编辑器的HTML代码,

Global site tag (gtag.js) - Google Analytics