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

简介:

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

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


   UEditor

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


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

    



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

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

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

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




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


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


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




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


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转换一下就可以了。


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

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

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

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

迎合当前的需要。



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



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





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


   CKEditor

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

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

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

   图1,

   


图2,



图3,



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

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


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

   展示效果图,如下,

   


    总结:

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

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

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

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

    有些吃不消的。

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

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

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

    

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

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


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

我们下期再见。









本文转自 吴雨声 51CTO博客,原文链接:http://blog.51cto.com/liangxiao/1262108,如需转载请自行联系原作者
目录
相关文章
|
7月前
|
JavaScript 前端开发
layui用layer.open打开子页面并获取子页面的ueditor富文本编辑器的内容
该内容描述了一个Web应用的交互流程,其中父页面通过调用子页面的JavaScript函数来获取富文本编辑器的内容。子页面包含一个富文本编辑器和一个`callbackdata`函数,用于返回编辑器的文本内容。父页面使用`layer.open`打开子页面作为弹窗,并在用户点击提交时,访问子页面的`callbackdata`获取编辑器内容,同时检查其他表单字段,如类型、标题等是否为空,以确保数据完整。
605 0
|
JSON 前端开发 JavaScript
富文本编辑器Ueditor实战(三)-springboot集成
通过本文,您可了解springboot如何集成ueditor,如何自定义扩展后端的文件上传功能。
702 0
富文本编辑器Ueditor实战(三)-springboot集成
|
4月前
|
存储 安全 数据安全/隐私保护
Django 后端架构开发:富文本编辑器权限管理与 UEditor 、Wiki接入,实现 Markdown 文本编辑器
Django 后端架构开发:富文本编辑器权限管理与 UEditor 、Wiki接入,实现 Markdown 文本编辑器
161 0
|
资源调度 JavaScript
vue项目:集成富文本编辑器 - 百度ueditor(vue-ueditor-wrap)
vue项目:集成富文本编辑器 - 百度ueditor(vue-ueditor-wrap)
614 0
|
Java 应用服务中间件 对象存储
富文本编辑器Ueditor实战(二)-图片上传
本文重点阐述了如何扩展Ueditor的图片上传功能,以及在实际中,如何根据项目实际情况,设置图片信息的动态展示思路。
879 0
富文本编辑器Ueditor实战(二)-图片上传
|
前端开发
ueditor 百度富文本编辑器后端配置(上传图片)
ueditor 百度富文本编辑器后端配置(上传图片)
482 0
|
前端开发 JavaScript 搜索推荐
前端封装库/工具库的编辑器之UEditor
随着互联网时代的到来,Web应用程序的内容创作和编辑变得越来越重要。而为了更高效地进行内容编辑和管理,前端封装库/工具库的出现成为了一个非常好的解决方案。其中一个经典的编辑器就是UEditor。
140 0
|
前端开发 JavaScript API
前端封装库/工具库的编辑器之CKEditor
在现代前端开发中,富文本编辑器是一个非常重要的组成部分。其中,CKEditor 是一个备受欢迎的 JavaScript 富文本编辑器库。
207 0
|
开发框架 前端开发 JavaScript
【前端】简单配置使用百度在线文本编辑器UEditor
在本篇文章中,我们讲一起了解下百度在线文本编辑器UEditor的简单配置使用 目前在线编辑器插件网上挺多的,个人觉得UEditor在UI和功能上还是不错的
969 0