网站内容编辑器(网站开发越来越功能简单的方法的)

　　网站内容编辑器(网站开发越来越功能简单的方法的)

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

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

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

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

　　复制代码代码如下：

　　// 获取 iframe 的 window 对象

　　getWin：函数（）{

　　返回 Ext.isIE？this.iframe.contentWindow: window.frames[this.iframe.name];

　　},

　　//获取iframe的文档对象

　　获取文档：函数（）{

　　返回 Ext.isIE？this.getWin().document: (this.iframe.contentDocument || this.getWin().document);

　　},

　　//打开文档对象并向其写入初始内容以兼容FireFox

　　doc = this.getDoc();

　　文档.open();

　　doc.write('');

　　//打开文档对象编辑模式

　　doc.designMode = "开";

　　doc.close();

　　因此，您可以将内容写入这个简单的编辑器。

　　3、获取编辑器的内容，代码如下：

　　复制代码代码如下：

　　//获取编辑器的body对象

　　var body = doc.body || doc.documentElement;

　　//获取编辑器的内容

　　var content = body.innerHTML;

　　//处理内容，比如替换一些特殊字符等

　　//一些代码

　　//返回内容

　　返回内容；

　　4、添加样式设置。上面的编辑器虽然实现了基本的功能，但是还是有点过于简单了，应该添加一些简单的样式。文档的 execCommand 方法使这个想法成为可能。

　　复制代码代码如下：

　　//统一命令方法

　　函数 execCmd(cmd, value){

　　//获取doc对象参考上面的代码

　　//调用execCommand方法执行命令

　　doc.execCommand(cmd, false, value === undefined? null: value);

　　};

　　//将选中的字体改为粗体，Ctrl-B

　　execCmd('粗体');

　　//添加下划线，Ctrl-U

　　execCmd('下划线');

　　//变成斜体，Ctrl-I

　　execCmd('斜体');

　　//设置文字颜色

　　execCmd('forecolor', Ext.isSafari || Ext.isIE?'#'+color: color);

　　//在光标处插入一段内容

　　函数 insertAtCursor(text){

　　//参考上面的代码获取win对象

　　如果（Ext.isIE）{

　　赢。焦点（）；

　　var r = doc.selection.createRange();

　　如果（r）{

　　r.collapse(true);

　　r.pasteHTML(文本);}

　　}else if(Ext.isGecko || Ext.isOpera){

　　赢。焦点（）；

　　execCmd('InsertHTML', text);

　　}else if(Ext.isSafari){

　　execCmd('插入文本', 文本);

　　}

　　}

　　5、走得更远。现在可以更改样式。如果编辑器有工具栏（这应该是不可避免的），那么我们也希望工具栏上的按钮能够根据光标位置的样式自动高亮或正常显示。文档的 queryCommandState() 方法使这个想法成为可能。

　　复制代码代码如下：

　　//获取doc对象参考上面的反面

　　//光标是否加粗

　　var isBold = doc.queryCommandState('bold');

　　如果（是粗体）{

　　//改变粗体按钮的样式

　　}

　　//当然上面的代码是可以合并的，这里只是一个提示

　　//强调

　　doc.queryCommandState('下划线');

　　//斜体

　　doc.queryCommandState('斜体');

　　本文只是提供了一个简单的编辑器实现思路，部分代码可以直接使用。建议想自己实现编辑器的朋友可以参考ExtJS中的HTMLEditor代码，简单明了，可以在上面进行扩展。

　　最后提醒：一定要注意浏览器的兼容性，不要等到最后才测试兼容性。对于如此大量的 JavaScript 代码，调整是一件痛苦的事情。