html编辑器 开发原理,在线所见即所得HTML编辑器的实现原理浅析
如今网站开发越来越提倡用户体验,为用户提供便利的工具也越来越多,而在线的HTML内容编辑器应该算是其中比较“古老”的一个了。功能简单的可以为用户提供文本的样式控制,例如文字的颜色、字体大小等;而功能复杂的甚至可以提供类似Word一样的强大功能。虽然现在各种开源的编辑器非常多,但是真正好用的并不多,所以它们改进工作也一直在进行中。
如今网上多数的编辑器都有很强大的功能,相对而言,在使用中也需要很多的配置,当然代码也自然会比较“臃肿”。如果我们并不需要功能那么强大的编辑器,那么可以自己实现一个,因为代码并不复杂。下面是一点个人的经验,仅供参考(以ExtJS的HTMLEditor为例)。
1、初始化。当页面加载完毕后,向页面添加一个IFrame(可选)。这里要注意的是,要判断页面的状态,要等页面完全加载完毕后再进行操作,防止出现找不到某些元素的错误。
2、打开编辑功能。将IFrame设为可以编辑(下面代码来自ExtJS的HTMLEditor):
复制代码 代码如下:
// 获取iframe的window对象
getWin : function(){
return Ext.isIE ? this.iframe.contentWindow : window.frames[this.iframe.name];
},
//获取iframe的document对象
getDoc : function(){
return Ext.isIE ? this.getWin().document : (this.iframe.contentDocument || this.getWin().document);
},
//打开document对象,向其写入初始化内容,以兼容FireFox
doc = this.getDoc();
doc.open();
doc.write('
');
//打开document对象编辑模式
doc.designMode = "on";
doc.close();
这样就可以向这个简单那的编辑器中写入内容了。
3、获取编辑器的内容,代码如下:
复制代码 代码如下:
//获取编辑器的body对象
var body = doc.body || doc.documentElement;
//获取编辑器的内容
var content = body.innerHTML;
//对内容进行处理,例如替换其中的某些特殊字符等等
//Some code
//返回内容
return content;
4、增加样式设置。上面的编辑器虽然实现了基本功能,但是实在是有些太简单了,应该增加些简单的样式实现。document的execCommand方法使这种想法成为可能。
复制代码 代码如下:
//统一的执行命令方法
function execCmd(cmd, value){
//doc对象的获取参照上面的代码
//调用execCommand方法执行命令
doc.execCommand(cmd, false, value === undefined ? null : value);
};
//将选中字体变为黑体,Ctrl-B
execCmd('bold');
//加下划线,Ctrl-U
execCmd('underline');
//变为斜体,Ctrl-I
execCmd('italic');
//设置文字的颜色
execCmd('forecolor', Ext.isSafari || Ext.isIE ? '#'+color : color);
//在光标处插入一段内容
function insertAtCursor(text){
//win对象的获取参考上面的代码
if(Ext.isIE){
win.focus();
var r = doc.selection.createRange();
if(r){
r.collapse(true);
r.pasteHTML(text); }
}else if(Ext.isGecko || Ext.isOpera){
win.focus();
execCmd('InsertHTML', text);
}else if(Ext.isSafari){
execCmd('InsertText', text);
}
}
5、再进一步。如今可以改变样式了,如果编辑器有工具栏(这应该是必然的),那么我们还想工具栏上的按钮根据光标所处位置的样式,自动处于突出或正常显示。document的queryCommandState()方法又让这种想法得以实现。
复制代码 代码如下:
//doc对象的获取参考上面的对面
//光标处是否是粗体
var isBold = doc.queryCommandState('bold');
if(isBold){
//改变Bold按钮的样式
}
//当然上面的代码是可以合并的,这里只不过是一个示意
//下划线
doc.queryCommandState('underline');
//斜体
doc.queryCommandState('italic');
本文只是为实现编辑器提供了简单的思路,其中的一些代码是可以直接使用的。建议,想自己实现编辑器的朋友可以参考下ExtJS中的HTMLEditor代码,既简单又比较清晰,可以在其上进行扩展。
最后提醒一点:一定要注意浏览器的兼容性问题,并且不要等接近尾声了再去测试兼容性,对于这么大量的JavaScript代码,调整是比较痛苦的事情。
时间: 2015-04-22
html编辑器 开发原理,在线所见即所得HTML编辑器的实现原理浅析相关推荐
- 所见即所得网页html编辑器,在线所见即所得HTML编辑器的实现原理浅析
如今网站开发越来越提倡用户体验,为用户提供便利的工具也越来越多,而在线的HTML内容编辑器应该算是其中比较"古老"的一个了.功能简单的可以为用户提供文本的样式控制,例如文字的颜色. ...
- php 富文本编辑器,开发php接入富文本编辑器KindEditor笔记 | 小灰灰博客
在做开发的时候,想使用富文本编辑器,小灰灰找了好几个富文本编辑器最终选择了kindeditor编辑器,轻量级的,文件不是很大解压之后也才1M多,而且小灰灰喜欢kind带的清除格式以及一键排版功能,个人 ...
- 富文本编辑器开发系列5——浏览器`Selection API`探究
系列文章快速阅读: 富文本编辑器开发系列-1-基础概念 富文本编辑器开发系列2-document.execCommand 的API 富文本编辑器开发系列3-selection 富文本编辑器开发系列4- ...
- 第一次使用最新开发的在线编辑器讲课记录笔记
2019独角兽企业重金招聘Python工程师标准>>> 第一次使用最新开发的在线编辑器讲课记录笔记,效果: 信息地址: http://www.phpkhbd.com/note/93 ...
- 移动端H5页面编辑器开发实战--原理结构篇
一.前言 在去年10月份左右,接到了需求:开发一个H5移动端页面编辑器的任务,目的主要是解放公司内在制作这类网页的所投入的人力以及解决使用外部H5编辑器所涉及到的版权问题. 因此,一款能够与市面上已经 ...
- 独立开发变现周刊(第82期):开发一个在线PDF编辑器,年收入50万美元
分享独立开发.产品变现相关内容,每周五发布. (合集:https://ezindie.com/weekly ) 目录 1.Coffee: 一个小的时间追踪器,为你的下一个大项目 2.大风云: 高性价比 ...
- python在线编辑器最新_Editor.md 二次开发-markdown在线编辑器
需求分析 经常需要在网络论坛发布文章进行宣传良心工作室最新免费服务,但每个论坛的编写格式存在差异,给发布带来了很大的障碍. 最近markdown格式的兴起,给广大发布者带来了福音,一种文档格式大部分网 ...
- 三甲:在线富文本编辑器的架构设计及实践
12月5日, 极客邦(InfoQ)在深圳举办 GMTC 大会,蚂蚁集团语雀编辑器技术同学三甲受邀参加大会并分享<在线富文本编辑器的架构设计及实践>,以下内容是根据现场演讲收集整理. 大家下 ...
- 爆肝,Unity3D游戏开发(第 2 章 编辑器的结构)
基础知识 经过多年的发展,Unity编辑器已经越来越完善,使用起来也相当方便.快捷.Unity秉承"所见即所得"的开发原理,将编辑器与游戏引擎融合在了一起.传统游戏引擎几乎没有任何 ...
最新文章
- Linux Redis自动化挖矿感染蠕虫分析及安全建议
- OpenCV线性搅拌机linear blender的实例(附完整代码)
- linux下查找命令which/whereis/locate/find的对比和总结
- 基于位置的知识图谱链接预测
- [深入学习C#]利用反射给对象赋值
- 浅谈Empty、Nothing
- VB实现人民币大小写金额转换
- java实现给图片添加水印(文字水印或图片水印)
- 基于stc51单片机的指纹解锁模块
- linux c open flush,ctrl+c以及写操作失败和flush
- 阿里智能化接口测试平台--暴雪
- 【网盘项目日志】Seafile 源码部署和安装命令
- nmap简单实用命令
- Linux云计算的文件管理和用户管理(01)
- 普元 AppServer 7.0 执行startServer.cmd启动,命令行一直启动中,server.log报错:com.primeton.appserver.l7e.exception.Impr
- SAP 成本中心和内部订单浅析
- 中兴盒子B860AV1.1、2.1-A_M_T、2.1_1.1-T、2.1_905L系列刷机包及教程
- SP-51pro单片机编程器
- vCenter6.0 U2空间清理
- c语言产生随机数调换,C语言产生随机数