在线编辑器的基本实现原理-阿里云开发者社区

开发者社区> kjmeng> 正文

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

简介:       如今网站开发越来越提倡用户体验,为用户提供便利的工具也越来越多,而在线的HTML内容编辑器应该算是其中比较“古老”的一个了。功能简单的可以为用户提供文本的样式控制,例如文字的颜色、字体大小等;而功能复杂的甚至可以提供类似Word一样的强大功能。
+关注继续查看

      如今网站开发越来越提倡用户体验,为用户提供便利的工具也越来越多,而在线的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代码,调整是比较痛苦的事情。

     

     

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
百度编辑器ueditor每次编辑后多一个空行的解决办法
  用ueditor进行编辑文章时,每次编辑后文章前面都会多出一个空行。 ${store.summary}    解决办法,将变量和scrpit标签写在同一行。 ${store.summary}   就是这么。。。
810 0
bluePen – 使用在线 CSS 编辑器美化你的网站
  BluePen 是一款非常强大的样式编辑工具,甚至可以轻松地安装在一个动态的网站中。一旦你已经安装了它,你就可以在任何时间,任何地方修改样式表,一切修改将实时更新到您的浏览器(但不是线上网站),在按下“保存”按钮之后就可以发布出去。
645 0
git学习------&gt;git commit命令的默认编辑器的修改
   今天在新同事的电脑上,用git commit命令帮新同事提交代码的时候,编辑完commit的信息后,居然不记得怎么退出了。蛋疼。 后来百度了一下,原来此时是进入GUN nano编辑器。
1051 0
一段奇妙的vim编辑器之旅
一、背景   对于Linux服务器上的操作,我们往往少不了使用vim,而有时候我对vim的使用并没有那么的熟练和深入,这周就深入的学习了vim的使用,包括入门和进阶,先分享给你们,也方便自己以后复习查询。
722 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
4441 0
富文本编辑器的技术演进之路
如果你的业务也将面向国际市场,面向移动端设备访问,不要犹豫了,Hugo.js 就是你最好的选择!
2508 0
fckeditor编辑器的使用
关于fckeditor的文件及dll在下面这个地址下载: http://download.csdn.net/source/3425245 主要步骤: 1、解压文件后,将fckeditor文件夹拷贝到根目录下,然后添加引用,浏览到dll文件夹中对应的dll即可。
732 0
+关注
kjmeng
专注可用系统,分享所得
211
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载