在线编辑器的基本实现原理
如今网站开发越来越提倡用户体验,为用户提供便利的工具也越来越多,而在线的HTML内容编辑器应该算是其中比较“古老”的一个了。功能简单的可以为用户提供文本的样式控制,例如文字的颜色、字体大小等;而功能复杂的甚至可以提供类似Word一样的强大功能。虽然现在各种开源的编辑器非常多,但是真正好用的并不多,所以它们改进工作也一直在进行中。
如今网上多数的编辑器都有很强大的功能,相对而言,在使用中也需要很多的配置,当然代码也自然会比较“臃肿”。如果我们并不需要功能那么强大的编辑器,那么可以自己实现一个,因为代码并不复杂。下面是一点个人的经验,仅供参考(以ExtJS的HTMLEditor为例)。
1、初始化。当页面加载完毕后,向页面添加一个IFrame(可选)。这里要注意的是,要判断页面的状态,要等页面完全加载完毕后再进行操作,防止出现找不到某些元素的错误。
2、打开编辑功能。将IFrame设为可以编辑(下面代码来自ExtJS的HTMLEditor):
这样就可以向这个简单那的编辑器中写入内容了。
3、获取编辑器的内容,代码如下:
4、增加样式设置。上面的编辑器虽然实现了基本功能,但是实在是有些太简单了,应该增加些简单的样式实现。document的execCommand方法使这种想法成为可能。
5、再进一步。如今可以改变样式了,如果编辑器有工具栏(这应该是必然的),那么我们还想工具栏上的按钮根据光标所处位置的样式,自动处于突出或正常显示。document的queryCommandState()方法又让这种想法得以实现。
本文只是为实现编辑器提供了简单的思路,其中的一些代码是可以直接使用的。建议,想自己实现编辑器的朋友可以参考下ExtJS中的HTMLEditor代码,既简单又比较清晰,可以在其上进行扩展。
最后提醒一点:一定要注意浏览器的兼容性问题,并且不要等接近尾声了再去测试兼容性,对于这么大量的JavaScript代码,调整是比较痛苦的事情。
在线编辑器的基本实现原理相关推荐
- tinyMce在线编辑器内JavaScript实现按Ctrl+S无刷新保存
以前也用过几个编辑器拉,如FCK,CUTEDTOR等,它们大都实现了很不错了的功能,也有丰富的插件使用.不过我还是觉得TinyMCE在线编辑器好用,它是采用纯JS客户端脚本技术构建,是一个轻量级加载速 ...
- office在线编辑器
开发Office在线编辑器系统 4.1 Office在线编辑器系统原理 DsoFrame是基于客户端的ocx控件,它的功能是将office文档嵌入到浏览器中,并调用office中各种接口,完成文档编辑 ...
- 制作WEB在线编辑器-插入HTML标签
以前认为WEB的在线编辑器无非就是对输入内容的替换以及快捷的插入HTML代码,但是做的时候却发现虽然原理是那样,但是实现方法并非我想的那么死板.由于很少做UI上的东西所以到现在才知道在document ...
- java 在线编辑器_最好的Markdown开源在线编辑器,没有之一!
点击上方蓝色字体,选择"设为星标" 回复"666"获取面试宝典 Editor.md 是一款开源的.可嵌入的 Markdown 在线编辑器(组件),基于 Code ...
- 做一个“多人在线编辑器”,你会怎么开始
看似只是一个简单的问题,但是其中却隐含了非常多的知识,对于"多人在线编辑器"这么一个产品来说,如果让你来负责设计并开发,你会怎么去开始一步步展开工作,其中主要考察的并不是让你迅速的 ...
- 用Javascript 编写 HTML在线编辑器
在线编辑器主要有3大类:1.直接用textarea 标签 优点:速度快,提交方便,可以用UBB标签来弥补不能所见所得 缺点:不直观,功能非常少 2.用 DIV或者TABLE的CONTENTEDITAB ...
- javascript实现HTML在线编辑器
javascript实现HTML在线编辑器 以前一直不知道好多网站上所说的在线编辑器是怎么回事,后来在文档里发现document 对象的一个方法. document.execCommand(com ...
- ASP.net:添加.net(2.0C#)FCKeditor在线编辑器步骤
1.下载本版本的编辑器压缩包.源码下载地址 2.解压缩打开文件夹拥有如下文件: 3.在VS中添加"选择项"加载在此文件夹的Bin下FredCK.FCKeditorV2.dll. 4 ...
- php 图片在线编辑功能,summernote在线编辑器提交的内容PHP处理其中图片函数
<summernote在线编辑器提交的内容PHP处理其中图片函数>要点: 本文介绍了summernote在线编辑器提交的内容PHP处理其中图片函数,希望对您有用.如果有疑问,可以联系我们. ...
最新文章
- 《软件过程改进》练习题
- VMWare下的DOS与宿主机的文件共享
- echarts中树图的label的点击_ECharts 堆积木(砖块)游戏
- easyui数据请求两个url_jQuery Easyui datagrid连续发送两次请求问题
- 风华高科厚膜贴片电阻规格书_1206 0.25R取样贴片电阻规格主要参数详解
- python 输出彩色文字
- python搭建微信小程序卖货要收费用吗_个人的微信小程序做店铺收费吗?要收多少...
- 图数据库 Neo4j 学习总结
- 对话阿里云弹性计算负责人褚霸:把计算做到极致,关键还不加价!
- 计算机专业保研面试备考:线性代数
- 翻译: AWS DeepRacer一步一步详细步骤的自定义航点更快地运行 自定义waypoints
- 配饰 女生的第二件衣服
- 有哪些生物多样性保护项目?
- 学习新体验-itron
- 基于eNSP华为模拟器的VRRP简单实验
- 2021年N1叉车司机考试题库及N1叉车司机模拟考试
- 基于jquery的五子棋单机版
- 连接文本文件批量生成Code-128B条码
- 学霸都在用的学习神器,绝对能让你提升学习效率
- 实验楼Java写计算器_Java版图形界面计算器
热门文章
- Win10家庭版增加本地安全策略(组策略)
- 中美民航协议促快递市场裂变 EMS垄断难保
- 吴伯凡直觉与数据心得_您是“相信自己的直觉”还是依靠业务中的数据?
- Python:直观地查看某个物品使用一段时间之后每天的平摊价格
- 【CCF】——中间数(详细分析)
- 对玩家爱好的深渊魔王们--魔兽争霸里的Azgalor评议
- Docker使用普通用户运行
- 免费申请Jetbrains全家桶
- 计算机一级在上网题中怎么新建文本文件,计算机一级上网题教程 计算机基础知识题库...
- Stall Reservations POJ