在线所见即所得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('<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代码，调整是比较痛苦的事情。

赞 (0)

相关推荐

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

    如今网站开发越来越提倡用户体验,为用户提供便利的工具也越来越多,而在线的HTML内容编辑器应该算是其中比较"古老"的一个了.功能简单的可以为用户提供文本的样式控制,例如文字的颜色.字体大小等:而功能复杂的甚至可以提供类似Word一样的强大功能.虽然现在各种开源的编辑器非常多,但是真正好用的并不多,所以它们改进工作也一直在进行中. 如今网上多数的编辑器都有很强大的功能,相对而言,在使用中也需要很多的配置,当然代码也自然会比较"臃肿".如果我们并不需要功能那么强大的编辑

  • 基于jquery实现可定制的web在线富文本编辑器附源码下载

    基于jquery实现可定制的web在线富文本编辑器附源码下载

    今天给大家介绍一款非常棒的WEB在线富文本编辑器--UMeditor,它是由百度web前端研发部开发所见即所得富文本web编辑器UEditor演变的迷你版编辑器,具有轻量,可定制,注重用户体验等特点,允许自由使用和修改代码,适用于前台快速简单回复框或后台内容编辑器. 在线预览     源码下载 如何使用? 建立一个demo.html文件,首先在需要添加编辑器的地方加入以下代码,使用style可以设置编辑器的宽度和高度. <script type="text/plain" id=&

  • xheditor所见即所得文本编辑器(代码高亮显示修改)

    xheditor所见即所得文本编辑器(代码高亮显示修改)

    所见即所得的文本编辑器目前在网上流传的已经有很多了,并且都比较优秀,就我个人而言,用过的有以下几个:     · 第一个接触的是ewebeditor,用在我的毕业设计里面,那时候是顺便选的,对这类东西也没什么了解,现在这个编辑器已经相当猛了:     · 后来工作中用了FCKEdier,原因很简单,这个文本编辑器已经有相应的asp.net服务器端控件,封装得很棒,不过毕竟是封装好了的控件,存在着一定的局限,而且目前这个文本编辑器已经全面改版,并且现在的名字叫CKEdier,现在所在公司的项目也是

  • Javascript自执行匿名函数(function() { })()的原理浅析

    函数是JavaScript中最灵活的一种对象,这里只是讲解其匿名函数的用途.匿名函数指没有指定函数名或指针的函数,自执行匿名函数只是其中一种,下文中称这种函数为:自执行函数 下面是一个最常见的自执行函数: // 传统匿名函数 (function() { alert('hello'); })(); 这段代码的执行效果就是在页面再载入时弹出:"hello" 是什么促使它自动执行的?,来看下面的代码 // 在传统写法上去掉小括号,并在前面加上运算符 ~,!,+,- ~function(){

  • Android微信抢红包功能的实现原理浅析

    快到过农历年了,微信红包也越来越多了,出现了好多红包外挂程序,就很好奇如何实现的,于是自己研究了一番,亲自写了个微信抢红包的APP.现在就一步一步来实现它. 实现思路 微信抢红包程序开启时候,他就可以随时识别.捕获红包,服务可以实现正在功能,当我们开启服务的时候,服务就不停的在后台运行,不停地轮询着微信里面的消息,当发现红包时候就立即打开微信红包所在的界面.但是他怎识别红包呢?需要找到微信抢红包里面节点的view,当找到对应的view,在获取view的关键字或者id,根据关键字或者id,自动的模

  • Java 读写锁实现原理浅析

    最近做的一个小项目中有这样的需求:整个项目有一份config.json保存着项目的一些配置,是存储在本地文件的一个资源,并且应用中存在读写(读>>写)更新问题.既然读写并发操作,那么就涉及到操作互斥,这里自然想到了读写锁,本文对读写锁方面的知识做个梳理. 为什么需要读写锁? 与传统锁不同的是读写锁的规则是可以共享读,但只能一个写,总结起来为:读读不互斥,读写互斥,写写互斥,而一般的独占锁是:读读互斥,读写互斥,写写互斥,而场景中往往读远远大于写,读写锁就是为了这种优化而创建出来的一种机制. 注

  • java DelayQueue的原理浅析

    java DelayQueue的原理浅析

    在对DelayQueue延迟功能的使用上,很多人不能后完全理解延迟的一些功能使用,这里我们深入来挖掘一下DelayQueue的原理. 下面将从构造方法.接口.继承体系三个方面进行分析,需要注意的是,相较于其它的阻塞队列,DelayQueue因为延迟的功能多了接口的使用,一起来看具体内容. 1.构造方法 public DelayQueue() {} public DelayQueue(Collection<? extends E> c) { this.addAll(c); } 构造方法比较简单,

  • mysql事务和隔离级别底层原理浅析

    mysql事务和隔离级别底层原理浅析

    目录 前言 一.事务底层原理浅析 原子性: 持久性 隔离性: 一致性: 二.隔离级别底层原理浅析 三.总结 前言 首先回顾一下什么是事务,事务是数据库操作的最小工作单元,是作为单个逻辑工作单元执行的一系列操作:这些操作作为一个整体一起向系统提交,要么都执行.要么都不执行:事务是一组不可再分割的操作集合(工作逻辑单元). 事务的特性: 原子性(Atomicity):原子性是指事务包含的所有操作要么全部成功,要么全部失败回滚.一致性(Consistency):事务执行的结果必须是使数据库从一个一致性

  • Android Flutter实现原理浅析

    Android Flutter实现原理浅析

    目录 前言 一.安卓原生界面绘制的流程 原生绘制流程 SurfaceView绘制流程 二.Flutter上界面绘制的流程 FlutterActivity中的流程 FlutterView中的实现 native流程 三.总结 Flutter的简单实现原理 Flutter的几个高频问题 前言 flutter可以说是当下最流行的跨平台技术了,其最突出的 网上可以搜到的文章,大多数都是flutter的用法,即使介绍其实现原理的,也直接深入源码直接解读,造成只有一定功能的读者才能理解. 本文希望以最通俗易解

  • no-bundle 构建原理浅析

    no-bundle 构建原理浅析

    目录 为什么需要构建工具? 什么是无包构建 基于浏览器的 JS 模块加载功能 HTML 中的 Script 引用注意点: 模块内依赖的引用 无包构建工具的介绍: Vite Vite对导入模块的解析 对 HTML 文件的预处理 对外部依赖包的解析 对 CSS 文件的解析 Vite 中的其他辅助功能 Vite 的使用限制 Snowpack 与 Vite 相同的功能点 与 Vite 的差异点 无包构建 VS 打包构建 无包构建的优点 无包构建的缺点 为什么需要构建工具? 处理其他类型文件使其能被浏览器

随机推荐