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


Posted in Javascript onApril 25, 2015

如今网站开发越来越提倡用户体验,为用户提供便利的工具也越来越多,而在线的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('<html><head><mce:style type="text/css"><!--

body{border:0;margin:0;padding:3px;height:98%;cursor:text;}

--></mce:style><style type="text/css" mce_bogus="1">body{border:0;margin:0;padding:3px;height:98%;cursor:text;}</style></head><body></body></html>');

//打开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代码,调整是比较痛苦的事情。

Javascript 相关文章推荐
bootstrap组件之导航组件使用方法
Jan 19 Javascript
canvas绘制七巧板
Feb 03 Javascript
Node.js利用debug模块打印出调试日志的方法
Apr 25 Javascript
使用vue的transition完成滑动过渡的示例代码
Jun 25 Javascript
vue+axios+mock.js环境搭建的方法步骤
Aug 28 Javascript
vue实现的仿淘宝购物车功能详解
Jan 27 Javascript
JS实现的新闻列表自动滚动效果示例
Jan 30 Javascript
轻松解决JavaScript定时器越走越快的问题
May 13 Javascript
element-ui组件中input等的change事件中传递自定义参数
May 22 Javascript
js中let能否完全替代IIFE
Jun 15 Javascript
es5 类与es6中class的区别小结
Nov 09 Javascript
Vue+penlayers实现多边形绘制及展示
Dec 24 Vue.js
JavaScript在Android的WebView中parseInt函数转换不正确问题解决方法
Apr 25 #Javascript
Node.js和MongoDB实现简单日志分析系统
Apr 25 #Javascript
node.js操作mongodb学习小结
Apr 25 #Javascript
JavaScript按值删除数组元素的方法
Apr 24 #Javascript
JavaScript获取一个范围内日期的方法
Apr 24 #Javascript
jQuery中next方法用法实例
Apr 24 #Javascript
JavaScript实现多个重叠层点击切换效果的方法
Apr 24 #Javascript
You might like
杏林同学录(二)
2006/10/09 PHP
基于PHP选项与信息函数的使用详解
2013/05/10 PHP
jQuery+Ajax+PHP“喜欢”评级功能实现代码
2015/10/08 PHP
载入进度条 效果
2006/07/08 Javascript
javascript 短路法代码精简
2009/08/20 Javascript
人人网javascript面试题 可以提前实现下
2012/01/05 Javascript
js操作IE浏览器弹出浏览文件夹可以返回目录路径
2014/07/14 Javascript
javascript实现网页中涉及的简易运动(改变宽高、透明度、位置)
2015/11/29 Javascript
谈谈JavaScript中的几种借用方法
2016/08/09 Javascript
js实现按钮控制带有停顿效果的图片滚动
2016/08/30 Javascript
详解微信小程序开发之城市选择器 城市切换
2017/01/17 Javascript
js中call()和apply()改变指针问题的讲解
2019/01/17 Javascript
微信小程序npm引入vant-weapp的踩坑记录
2019/08/01 Javascript
微信小程序获取公众号文章列表及显示文章的示例代码
2020/03/10 Javascript
Vue中nprogress页面加载进度条的方法实现
2020/11/13 Javascript
python利用rsa库做公钥解密的方法教程
2017/12/10 Python
TensorFlow模型保存和提取的方法
2018/03/08 Python
Python生成器定义与简单用法实例分析
2018/04/30 Python
Python中的集合介绍
2019/01/28 Python
Python I/O与进程的详细讲解
2019/03/08 Python
PyQT5 emit 和 connect的用法详解
2019/12/13 Python
使用opencv中匹配点对的坐标提取方式
2020/06/04 Python
pycharm专业版远程登录服务器的详细教程
2020/09/15 Python
农村结婚典礼司仪主持词
2014/03/14 职场文书
美术教师岗位职责
2014/03/18 职场文书
请假条怎么写
2014/04/10 职场文书
初中班主任评语大全
2014/04/24 职场文书
入党积极分子学习党的纲领思想汇报
2014/09/13 职场文书
县级领导干部开展党的群众路线教育实践活动工作汇报
2014/10/25 职场文书
公务员保密工作承诺书
2015/05/04 职场文书
奖金申请报告模板
2015/05/15 职场文书
学校运动会感想
2015/08/10 职场文书
2015年度个人工作总结报告
2015/10/24 职场文书
Spring boot应用启动后首次访问很慢的解决方案
2021/06/23 Java/Android
TV动画「神渣☆爱豆」公开第一弹主视觉图
2022/03/21 日漫
Python利用zhdate模块实现农历日期处理
2022/03/31 Python