在线编辑器的基本实现原理--JavaScript/Ajax--编程设计网

=波波日志 > JavaScript/Ajax > 在线编辑器的基本实现原理=

[转]在线编辑器的基本实现原理

如今网站开发越来越提倡用户体验，为用户提供便利的工具也越来越多，而在线的HTML内容编辑器应该算是其中比较“古老”的一个了。功能简单的可以为用户提供文本的样式控制，例如文字的颜色、字体大小等；而功能复杂的甚至可以提供类似Word一样的强大功能。虽然现在各种开源的编辑器非常多，但是真正好用的并不多，所以它们改进工作也一直在进行中。

如今网上多数的编辑器都有很强大的功能，相对而言，在使用中也需要很多的配置，当然代码也自然会比较“臃肿”。如果我们并不需要功能那么强大的编辑器，那么可以自己实现一个，因为代码并不复杂。下面是一点个人的经验，仅供参考（以ExtJS的HTMLEditor为例）。

1、初始化。当页面加载完毕后，向页面添加一个IFrame（可选）。这里要注意的是，要判断页面的状态，要等页面完全加载完毕后再进行操作，防止出现找不到某些元素的错误。

2、打开编辑功能。将IFrame设为可以编辑（下面代码来自ExtJS的HTMLEditor）：

-JavaScript

// 获取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、获取编辑器的内容，代码如下：

-JavaScript

//获取编辑器的body对象   
var body = doc.body || doc.documentElement;   
//获取编辑器的内容   
var content = body.innerHTML;   
//对内容进行处理，例如替换其中的某些特殊字符等等   
//Some code   
  
//返回内容   
return content;  
//获取编辑器的body对象
var body = doc.body || doc.documentElement;
//获取编辑器的内容
var content = body.innerHTML;
//对内容进行处理，例如替换其中的某些特殊字符等等
//Some code

//返回内容
return content; 

4、增加样式设置。上面的编辑器虽然实现了基本功能，但是实在是有些太简单了，应该增加些简单的样式实现。document的execCommand方法使这种想法成为可能。

-JavaScript

//统一的执行命令方法   
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);   
    }   
  }  
//统一的执行命令方法
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()方法又让这种想法得以实现。

-JavaScript

//doc对象的获取参考上面的对面   
//光标处是否是粗体   
var isBold = doc.queryCommandState('bold');   
if(isBold){   
  //改变Bold按钮的样式   
}   
//当然上面的代码是可以合并的，这里只不过是一个示意   
  
  
//下划线   
doc.queryCommandState('underline');   
//斜体   
doc.queryCommandState('italic');  
//doc对象的获取参考上面的对面
//光标处是否是粗体
var isBold = doc.queryCommandState('bold');
if(isBold){
  //改变Bold按钮的样式
}
//当然上面的代码是可以合并的，这里只不过是一个示意


//下划线
doc.queryCommandState('underline');
//斜体
doc.queryCommandState('italic'); 

本文只是为实现编辑器提供了简单的思路，其中的一些代码是可以直接使用的。建议，想自己实现编辑器的朋友可以参考下ExtJS中的HTMLEditor代码，既简单又比较清晰，可以在其上进行扩展。

最后提醒一点：一定要注意浏览器的兼容性问题，并且不要等接近尾声了再去测试兼容性，对于这么大量的JavaScript代码，调整是比较痛苦的事情。

本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/mydeman/archive/2010/01/18/5208260.aspx

类别：JavaScript/Ajax　作者：转载　日期：2010-01-21　【评论：0】　

上一篇：Javascript跨域和Ajax跨域解决方案　
下一篇：深入理解__doPostBack 客户端调用服务端事件

暂时没有评论！

发表留言

百度赞助