【第一期】如何打造属于自己的网站编辑器——CKEditor与UEditor之争

简介:

    首先说明一下由于经常写项目最近比较忙,所以一直没时间整理文章,现在把近阶段的一些心得分享出来,这是第一期,接下来我会跟大家讲讲ASP.NET单层,三层,以及多层开发企业建站和具体要求和操作,希望大家能学到东西。PS:本人支持开源的World,喜欢开源的一切。如果有人喜欢WindowsPhone的开发可以私下聊。t_0039.gif

   好了,先谢谢51CTO的辛勤的博客大管家们, @莉子姐 @米米姐 @ 蘑菇姐。PS:都很漂亮很敬业。t_0016.gif


   UEditor

   First-1,大家先去官网: http://ueditor.baidu.com/website/,点击-〉下载

102357133.jpg


   First-2.1, 这里说明一下大家可以选择两种下载包,一种是UBuilder和开发版。

    102838467.jpg



spacer.gif    First-2.1, 如果用此版本的话可以自由的添加删除自己想要的编辑器中的效

103049761.jpg

  First-2.2,如果选择开发版的话就会包含编辑器的所有功能,PS:这里有分网站的编码格式和编程语言的选择,其实就

是一个js包的不同调用,方便开发用的,别的都没有什么大的差别。PS:用fireBug看到51CTO用的是1.2.5版本的,我想说的

是赶紧换了吧,浏览器兼容性不是闹着玩的,小心使得万年船。t_0010.gif


103336658.jpg



   First-2.3,由于自由度的问题,本人选择用UBuilder,上面定制自己想要的功能后点击下面的下载即可。

103940553.jpg


  Second-1,下面开始新建项目开发,如下图,

104533734.jpg


    Second-2,由于下面是写代码,我就直接把每步的操作截图,大家可以慢慢跟着做,如下,

104738312.jpg


112200585.jpg



Second-3.1,接下来把Ueditor包添加到项目中,如下图,

110146671.jpg


Second-3.2,在head区域添加js引用,PS:母版页的话就放在下面所示图中,

1
2
3
4
<asp:Content ID= "HeaderContent"  runat= "server"  ContentPlaceHolderID= "HeadContent" >
     <script src= "ueditor/ueditor.config.js"  type= "text/javascript" ></script>
     <script src= "ueditor/ueditor.all.js"  type= "text/javascript" ></script>
</asp:Content>


Second-3.3接着就是写JavaScript,如下图,PS:因为是要认服务器控件的话,需要加一下ClientID转换一下就可以了。

112014310.jpg


Second-3.4现在大部分的操作已经基本完成,下面说几个重点要注意的地方,我是做.NET的,别的

开发语言不知道会不会出现同样的问题,现就.NET说下,

  1.在母版页的话,需要加上这么一个属性,保证 textarea 不会只是显示框架,如下图,

111133523.jpg

  2.在Web.config-><system.web>里面写如下图的内容,因为Microsoft的东西升级太快了,所以还是要加以前的一些相应的属性来

迎合当前的需要。

111444651.jpg



Second-4现在我们写个alert把textarea 的值给弹出来,如下图,PS:方便大家看,我就写在下面了。


113935920.jpg


Second-5.1好了,现在预览一下,看看成不成?

114143609.jpg


114243342.jpg


114316423.jpg



Second-5.2看来没什么问题,大家可以试试了。t_0003.gif


   CKEditor

   下面开始说CKEditor,前身叫作FKEditor,现在国外的大部分网站编辑器用的都是这个,因为兼容性好,不管是

什么版本的浏览器都没有太大的问题,所以,各位如何追求稳定的话建议还是用CKEditor,这个的话相对的配置就简

单很多,不需要太多的引用的写代码,他都给你集成好了,所以直接上图,大家应该可以看得很清楚吧。t_0015.gif

   图1,

115021835.jpg

   


图2,

115106620.jpg



图3,

115318353.jpg

115359205.jpg


115428644.jpg


115534653.jpg

选择项-〉浏览,找到CKEditor.NET.dll添加到工具箱的常用中,

115655317.jpg

直接拖拽到设计页面,如下图,

120129630.jpg


   至此就结束了,如果想取值,在cs界面直接写CKEditorControl1.Text = "你的值";

   展示效果图,如下,

120536237.jpg

   


    总结:

    1.个人感觉百度的UEditor确实是很好,UI各方面都要优于CKEditor;

    2.不足之处在于,CKEditor得兼容性比UEditor要好很多,这也是开发人员要注意的,因为毕竟大部分领导用的是IE X.0

    你不做考虑就会出现错误,这样再美的东西显示不出来也是徒劳。

    3.开发者用Firefox开发时也应该多用几个浏览器试试会不会出现错误和BUG,毕竟Firefox可以AT力场全开,别的浏览器就会

    有些吃不消的。t_0008.gif

    4.大家也可以在UEditor文档说明里面研究一下部署和开发的各种使用,看看如何解决兼容性的问题,欢迎一起讨论。

    5.对于显示UI这块其实UEditor还不够完善,大家有兴趣的话可以参考Twitter的Bootstrap把自己的网站建设的更加美观和

    稳定,老外的东西还是很强大的。

    121634168.jpg

   接下来的几期我会跟大家讲讲asp.net企业建站的一些基本操作,欢迎大家来拍砖。t_0010.gif前几天也是业余时间做了一个个人的博客网站,效果图如下,

   地址: http://www.liujinlan.cc/

121951874.jpg


     用的是基本的三层架构,在后面的教程,我会慢慢给大家交流讲解,让大家看完后可以动手制作出自己的博客网站。好啦,今天就到这里吧,

我们下期再见。t_0004.gif









本文转自 吴雨声 51CTO博客,原文链接:http://blog.51cto.com/liangxiao/1262108,如需转载请自行联系原作者
目录
相关文章
|
JSON 前端开发 JavaScript
富文本编辑器Ueditor实战(三)-springboot集成
通过本文,您可了解springboot如何集成ueditor,如何自定义扩展后端的文件上传功能。
578 0
富文本编辑器Ueditor实战(三)-springboot集成
|
资源调度 JavaScript
vue项目:集成富文本编辑器 - 百度ueditor(vue-ueditor-wrap)
vue项目:集成富文本编辑器 - 百度ueditor(vue-ueditor-wrap)
344 0
|
8月前
ueditor编辑器初始化
ueditor编辑器初始化
|
Java 应用服务中间件 对象存储
富文本编辑器Ueditor实战(二)-图片上传
本文重点阐述了如何扩展Ueditor的图片上传功能,以及在实际中,如何根据项目实际情况,设置图片信息的动态展示思路。
721 0
富文本编辑器Ueditor实战(二)-图片上传
|
12月前
|
前端开发
ueditor 百度富文本编辑器后端配置(上传图片)
ueditor 百度富文本编辑器后端配置(上传图片)
387 0
|
前端开发 JavaScript 搜索推荐
前端封装库/工具库的编辑器之UEditor
随着互联网时代的到来,Web应用程序的内容创作和编辑变得越来越重要。而为了更高效地进行内容编辑和管理,前端封装库/工具库的出现成为了一个非常好的解决方案。其中一个经典的编辑器就是UEditor。
120 0
|
前端开发 JavaScript API
前端封装库/工具库的编辑器之CKEditor
在现代前端开发中,富文本编辑器是一个非常重要的组成部分。其中,CKEditor 是一个备受欢迎的 JavaScript 富文本编辑器库。
162 0
|
开发框架 前端开发 JavaScript
【前端】简单配置使用百度在线文本编辑器UEditor
在本篇文章中,我们讲一起了解下百度在线文本编辑器UEditor的简单配置使用 目前在线编辑器插件网上挺多的,个人觉得UEditor在UI和功能上还是不错的
907 0
|
Java 应用服务中间件 API
富文本编辑器Ueditor实战(一)
本文简单说明如何在tomcat中部署ueditor,并举例介绍了他的api以及相关工具栏,用户可以根据需要进行调整。
422 0
富文本编辑器Ueditor实战(一)
|
Java
富文本编辑器Ueditor实战(四)-video集成
文章介绍了如何在springboot环境中集成ueditor,以及如何修改配置支持在富文本编辑器中直接预览视频资源。
408 0
富文本编辑器Ueditor实战(四)-video集成