HTML在线编辑器的实现难点
作者:heero 来源:heero博客 发布时间:2010-06-26 12:58:00
到目前为止,我已经开发了两个HTML编辑器了,一个用在公司的CMS项目,另一个用在这个Blog(TidyEditor,暂时没有单独发布)。下面总结一下开发的难点以及应对方法。
HTML在线编辑器实际上是什么
其实有好几种实现方式,目前用得最多、兼容性最好的还是iframe方式。
<iframe src="" frameborder="0"></iframe>
只有这个空iframe是不行的,还要用Javascript把它设成可编辑:
iframe.contentWindow.document.designMode = "on";
iframe.contentWindow.document.contentEditable = true;
换而言之,HTML在线编辑器就是一个可编辑的iframe。
加粗、斜体、下划线、加链接等功能如何实现
浏览器已经提供了实现这些功能的接口execCommand:
iframe.contentWindow.document.execCommand(cmd, isDefaultShowUI, value);
这三个参数的意思分别是:
isDefaultShowUI:是否默认显示交互界面,比如加链接的时候,可以通过界面填入链接。不过这个参数存在兼容性问题,一般设为false将其禁用,并另外制作交互界面。
value:传入的值,某些命令可以省略。
execCommand的问题是,生成的代码可能不标准,比如在IE下,文字加粗用的是b标签而不是strong标签。
交互问题
用户不可能总是在编辑器中输入,比如加粗、插入图片等功能是通过按钮操作的。假设用户要加粗一段选中的文字,当他按了加粗按钮后,选区以及焦点也会跟着跑到那去,因此选区(选中的文字)丢失,操作也就无法完成;同理,插入图片时插入位置也会丢失。
也就是说,要保存最后出现在编辑器中的选区。我采取的方案是,当焦点在编辑器内的时候,用一个定时器(setInterval)定时获取当前选区。选区编程平时很少用,做起来也有很多兼容性问题,主要是参考微软的MSDN(TextRange ControlRange)和Mozilla的MDC(Range Selection)了。
回车问题
在IE下,按回车是换段落,生成<p>,但在Firefox下是换行,生成的是<br>。要解决这个问题,就要监听keydown事件,如果检测到按键是回车,就插入“<p></p>”。
获取标准的代码
如何获取编辑的内容呢?这个问题很简单,只要获取iframe页面body中的innerHTML就可以了:
var content = iframe.contentWindow.document.body.innerHTML;
然而,IE下的innerHTML非常不标准:标签名是大写的,属性没有引号包起来,单标签也没有结束符……即便是Firefox下获取的代码,也有少量瑕疵。这个时候就要用正则表达式对代码进行标准化处理。
总结
不多说了,做一遍HTML编辑器,你就会知道CKEditor是多么强大。
![](https://www.aspxhome.com/images/zang.png)
![](https://www.aspxhome.com/images/jiucuo.png)
猜你喜欢
- 传递函数创建传递函数有两种方式:import control as ctrl# 方式 1s = ctrl.tf('s')sy
- 本文实例为大家分享了python通过实例方法名字调用方法的具体代码,供大家参考,具体内容如下案例: &nb
- 1.首先要绘制一个简单的条形图import numpy as npimport matplotlib.pyplot as pltfrom m
- 昨天美国雅虎正式宣布网站首页的新版,这也算互联网一件大事,尤其是对设计的朋友们。而且现在的美国雅虎的情况也不是很好的情况下有大刀阔斧的进行改
- 本文实例为大家分享了python实现猜拳游戏的具体代码,供大家参考,具体内容如下项目功能:1.系统生成随机的石头剪刀布,玩家输入石头剪刀布2
- 一 distinct含义:distinct用来查询不重复记录的条数,即distinct来返回不重复字段的条数(count(distinct
- CSRF(Cross Site Request Forgery, 跨站域请求伪造)是一种网络的×××方式。我的理解是,比如你访问过招商银行的
- 昨天我的电影网站在生成内容静态页面的时候出了问题,提示下标越界,以前从来没有遇到过的,所以根本不知道是什么东西,于是就到处在网上找答案,但是
- 学习Python过程中,发现没有switch-case,过去写C习惯用Switch/Case语句,官方文档说通过if-elif实现。所以不妨
- 比较喜欢python的装饰器, 试了下一种用法,通过装饰器来传递sql,并执行返回结果这个应用应该比较少为了方便起见,直接使用了ironpy
- 安装Python2.7后,它自带一个编辑器IDLE,但是使用几次之后出现启动不了的情况,可做如下操作。Windows操作系统下,使用快捷键
- 本文将详细介绍一下如何搭建深度学习所需要的实验环境.这个框架分为以下六个模块显卡简单理解这个就是我们常说的GPU,显卡的功能是一个专门做矩阵
- 最近微信迎来了一次重要的更新,允许用户对”发现”页面进行定制。不知道从什么时候开始,微信朋友圈变得越来越复杂,当越来越多的人选择”仅展示最近
- 代码如下:Class XMLClass Private objXml Private xmlDoc Private xmlPath '
- Python 相对路径报错:"No such file or directory"'原因及解决方法如果你取相对路
- 以下来自Stack Overflow从上面我们可以很清晰的看出应该如何使用matplotlib的figure方法。补充知识:matplotl
- 详见代码如下: import threading import time import os import subprocess def g
- 特点在 dayjs 之前,还有一个时间处理工具 moment.js,但是它的体积比较大,即使经过压缩压缩之后依然有 80kb 左右。而前者
- 今天写了一个java项目连接数据库,之后写了一个执行入库操作的模块。此时暴露出一个问题就是项目的中文插入到数据库时会是乱码:项目输出的中文:
- 1. 进入SSMS点击展开sqlserver代理,右键点击“作业”,然后选择新建作业。2. 填写名称