`
JavaSam
  • 浏览: 929901 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

在线HTML编辑器实现原理

 
阅读更多

1,什么是HTML在线编辑器
顾名思义,在线编辑器就是用于在线编辑的工具,编辑的内容是基于HTML的文档。

2,HTML在线编辑器有什么用?
因为HTML在线编辑器可用于在线编辑基于HTML的文档,所以,它经常被用于留言板留言、论坛发贴、Blog编写日志或等需要用户输入普通HTML的地方。

3,什么是DHTML
DHTML是一些现有网页技术与标准的整合,通过它,网页设计可以用一种新的方式创建网页。

4,DHTML与HTML关系
DHTML是以HTML语言为基础,但是相较于以单纯的HTML来设计网页的方法,HTML所带来的最大转变,在于它加入了“对象化”的网页特征。动态HTML对象模型定义了用于描述网页及其内部元素的对象,每个对象都有描述其自身状态的属性和描述其行为的方法,它们也可以处理特定类型的事件,因此,网页设计者可以通过Script程序来控制或调用这些对象。

5,DHTML与HTML在线编辑器的关系
要做在线编辑器就需要用到DHTML,因为HTML在线编辑器要能在线地编辑,需要“动态”地改变网页对象的属性,而DHTML正好满足了这个需要。


看了现在网上流行的在线编辑器,也忍不住想了解一下原理。下了目前应用最广泛的eWebEdit,这个是我见到的最强的开源在线编辑器...研究了一天,终于知道了核心原理。

先解释一下在线编辑器的原理:首先需要IE5.0以上版本的支持。因为IE5.0以上版本有一个编辑状态,可以在一个iframe里面输入文字。然后通过 "document.body.innerHTML"可以获取iframe里面的html代码,这个就是关键。那怎么才能让ifrmae处于编辑状态呢,可以用:

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


函数实现。剩下的问题就是就是取得焦点和选中的值:

HtmlEdit.focus();
var sel = HtmlEdit.document.selection.createRange();


以上2句可以获取选中的值的html代码。

到了这里,基本原理搞清楚了,然后我们可以用 insertHTML("str")方法将html字符替换掉选种的值。以下就给出一个简单的demo来演示只有加粗效果的在线编辑器。我这里用了一个textarea来或得iframe里的html值,实际情况,可以将textarea的display设置成false,然后就可以将iframe的内容提交了。

[Ctrl+A 全部选择进行拷贝 提示:可先修改部分代码,再点击运行]

HTML在线编辑器实现原理(兼容IE和FireFox)

首先要有一个编辑框,这个编辑框其实就是一个可编辑状态的网页, 我们用iframe来建立编辑框。


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


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


<script language="javascript">
var editor;
editor = document.getElementById("HtmlEdit").contentWindow;

//只需键入以下设定,iframe立刻变成编辑器。
editor.document.designMode = 'On';
editor.document.contentEditable = true;

//但是IE与FireFox有点不同,为了兼容FireFox,所以必须创建一个新的document。
editor.document.open();
editor.document.writeln('<html><body></body></html>');
editor.document.close();

//字体特效 - 加粗方法一
function addBold()
{
editor.focus();
//所有字体特效只是使用execComman()就能完成。
editor.document.execCommand("Bold", false, null);
}
//字体特效 - 加粗方法二
function addBold()
{
editor.focus();
//获得选取的焦点
var sel = editor.document.selection.createRange();
insertHTML("<b>"+sel.text+"</b>");
}
function insertHTML(html)
{
if (editor.document.selection.type.toLowerCase() != "none")
{
editor.document.selection.clear() ;
}
editor.document.selection.createRange().pasteHTML(html) ;
}

</script>



WEB在线编辑器原理

从eWebEditor到 FCKeditor现在有很多很多的在线编辑器了,功能都很强,很多,但是其基本原理却都很简单

我发现的编辑器主要有3大类,我总结下,把各自的优缺点都写下

直接用textarea 标签
优点:速度快,提交方便,可以用UBB标签来弥补不能所见所得
缺点:不直观,功能非常少

用 DIV或者TABLE的CONTENTEDITABLE 标签,属性来让一个区域可以编辑
优点:可以很直观,可以做各种效果
缺点:此标签在mozilla下不可用,只适合IE浏览器,且对js要求高

用iframe或者frame的中的document的document.designMode ="On" 来实现可编辑
优点:具有上面第二条的全部优点,并且还多浏览器比如FF等支持
缺点:对js要求高

下面是第三点的一个简单例子代码

[Ctrl+A 全部选择进行拷贝 提示:可先修改部分代码,再点击运行] Tag: 在线编辑器 在线编辑器  

分享到:
评论

相关推荐

    HTML在线编辑器原理

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

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

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

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

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

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

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

    微信小程序wxParse解析HTML

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

    复合可编辑表格组件vue实现,可新增行,可删除行可校验,可设置下拉框树形选择器多选

    阅读建议:此资源以开发简化版组件学习其原理和内核,不仅是代码编写实现也更注重内容上的需求分析和方案设计,所以在学习的过程要结合这些内容一起来实践,并调试对应的代码,编写可复用组件代码,避免重复造轮子

    ImageSee 1.0源码

    实现原理:该功能其实就是编译原理中的词法分析器所要实现的功能。针对不同的token予以不同的字体样式。 (3)打包生成html相册 实现原理:保存缩略图和原图片文件到指定目录,动态生成html文件。 (4)图象编辑...

    文本编辑器_new.rar

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

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

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

    JAVA WEB典型模块与项目实战大全

    4.2 fckeditor在线文本编辑器初级应用  4.3 fckeditor在线文本编辑器常用配置  4.4 fckeditor在线文本编辑器高级应用  4.5 小结  第5章 验证模块(jsp+servlet+jsvaildation)  5.1 表单基础  5.2 客户端...

    全球商务网站系统[生成HTML版]

    9:商业资讯:类别可自行加删及修改,强大的可视化编辑器及远程文件自动保存功能。 10:完善的会员二级域名功能及会员网站[会员自助建站模板可后台增加],会员选择模板后可自动得到如:http://会员名.****.com/这样...

    ImageSee

    (2)语法高亮方式显示.pas文件 实现原理:该功能其实就是编译原理中的词法分析器所要实现的功能。针对不同的token予以不同的字体样式。 (3)打包生成html相册 实现原理:保存缩略图和原图片文件到指定目录,动态...

    leetcode给单链表加一js实现-100days:这个repo基本上跟踪了我接下来100天编写代码的进度

    文档,为编辑器实现我的自定义格式,为编辑器实现快捷命令,仍然需要为编辑器整理 UI。 第 4/100 天:使用 react 实现了一个 Web 游乐场,类似于 ,它需要您的 html、css 和 js,并在您编写代码时呈现结果。 谢谢,@...

    利用jQuery实现可以编辑的表格

    今天学习了利用jQuery实现可以编辑的表格这个例子。这个例子需求是这样的:在前台的表格中单击单元格便可修改其中的内容,回车键保存修改的内容,esc撤销保存的内容。原理:单击客户端表格单元格时,在单元格中添加...

    一个简易的富文本编辑器 iOS

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

    类似ACDSee源码

    实现原理:该功能其实就是编译原理中的词法分析器所要实现的功能。针对不同的token予以不同的字体样式。 (3)打包生成html相册 实现原理:保存缩略图和原图片文件到指定目录,动态生成html文件。 (4)图象...

    maxpress:MaxPress:MarkDown+Python实现微信公众号一键排版

    MaxPress:MarkDown+Python实现微信公众号一键排版更新针对非技术人员的小白教程:【上篇:基本原理】【下篇:语法指南】基本功能批量转换MarkDown文档为适合粘贴微信编辑器HTML文件。支持自定义:正文字号、文字...

    基于ARM的嵌入式藏文电子阅读器的设计与实现

    论文给出了系统的总体架构,硬件实现原理框图及软件设计流程。实验结果表明,该系统成功实现了全藏化的阅读器应用程序界面,并可以支持TXT、HTML、PDF、DOC格式的藏文电子书的正常显示、阅读和编辑,同时可进行BMP、...

Global site tag (gtag.js) - Google Analytics