在线所见即所得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 相关文章推荐
jquery blockUI 遮罩不能消失与不能提交的解决方法
Sep 17 Javascript
JQuery分屏指示器图片轮换效果实例
May 21 Javascript
原生JS实现仿淘宝网左侧商品分类菜单效果代码
Sep 10 Javascript
JS实现淡蓝色简洁竖向Tab点击切换效果
Oct 06 Javascript
jquery关于事件冒泡和事件委托的技巧及阻止与允许事件冒泡的三种实现方法
Nov 27 Javascript
Javascript字符串拼接小技巧(推荐)
Jun 02 Javascript
Vue实现web分页组件详解
Nov 28 Javascript
微信小程序实现手势滑动卡片效果
Aug 26 Javascript
微信小程序如何加载数据库真实数据的实现
Mar 04 Javascript
vue Element左侧无限级菜单实现
Jun 10 Javascript
vue打包静态资源后显示空白及static文件路径报错的解决
Sep 02 Javascript
vue中element 的upload组件发送请求给后端操作
Sep 07 Javascript
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
全国FM电台频率大全 - 23 四川省
2020/03/11 无线电
PHP 使用header函数设置HTTP头的示例解析 表头
2013/06/17 PHP
php对csv文件的读取,写入,输出下载操作详解
2013/08/10 PHP
PHP使用PDO访问oracle数据库的步骤详解
2017/09/29 PHP
PDO::query讲解
2019/01/29 PHP
javascript &amp;&amp;和||运算法的另类使用技巧
2009/11/28 Javascript
使用jQuery内容过滤选择器选择元素实例讲解
2013/04/18 Javascript
css配合jquery美化 select
2013/11/29 Javascript
jQuery实现摸拟alert提示框
2016/05/22 Javascript
实例讲解JavaScript中的this指向错误解决方法
2016/06/13 Javascript
js中获取jsp表单中radio类型的值简单实例
2016/08/15 Javascript
js实现按座位号抽奖
2017/04/05 Javascript
微信小程序 下拉菜单的实现
2017/04/06 Javascript
通过npm或yarn自动生成vue组件的方法示例
2019/02/12 Javascript
JS+CSS3实现的简易钟表效果示例
2019/04/13 Javascript
深入分析jQuery.one() 函数
2020/06/03 jQuery
详解Python设计模式编程中观察者模式与策略模式的运用
2016/03/02 Python
Python编写电话薄实现增删改查功能
2016/05/07 Python
python 在指定范围内随机生成不重复的n个数实例
2019/01/28 Python
Pandas时间序列:重采样及频率转换方式
2019/12/26 Python
python函数调用,循环,列表复制实例
2020/05/03 Python
浅析CSS3 用text-overflow解决文字排版问题
2020/10/28 HTML / CSS
HTML5是否真的可以取代Flash
2010/02/10 HTML / CSS
高中生活自我鉴定
2014/01/18 职场文书
禁毒宣传工作方案
2014/05/23 职场文书
环境卫生标语
2014/06/09 职场文书
课外科技活动总结
2014/08/27 职场文书
“九一八事变纪念日”国旗下讲话稿
2014/09/14 职场文书
平面设计师岗位职责
2014/09/18 职场文书
工厂标语大全
2014/10/06 职场文书
工厂见习报告范文
2014/10/31 职场文书
工作推荐信模板
2015/03/25 职场文书
复兴之路展览观后感
2015/06/02 职场文书
不会写演讲稿,快来看看这篇文章!
2019/08/06 职场文书
Nginx工作原理和优化总结。
2021/04/02 Servers
SQL实现LeetCode(197.上升温度)
2021/08/07 MySQL