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

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

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

   UEditor

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

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

   

  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：母版页的话就放在下面所示图中，

<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/

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

我们下期再见。