UEditor编辑器并不难

1.背景：

       其实学习UEditor本该在这之前就应该学习整合到自己的项目中的了，第一次接触UEditor是在暑假期间，当时做东西在师兄的代码中发现了这东西，心想：卧槽，竟然可以这样整合别人的东西！当时下定决心要学习一下，但是......

      (1).看师兄源码，发现是用JS来应用的，但是当时没有学过一点JavaScript，所以：当我第一次看到这个东西的时候，内心是拒绝的，认为我会看不懂【其实跟动不动JS半毛钱关系都没有】。

      (2).去官方查看手册，可是第一篇都没看完，就发现：丫，好多！还分了PHP ASP JSP三个版本，肯定很难学。

      (3).搜博客：搜到的博客大多是一上来就上代码【让我没有一点心理准备，臣妾惶恐，实在接受唔到咯】！

      于是将学习UEditor的计划推迟了，一直以来也迟迟不肯去接触，要用到编辑的时候都是用textarea，然后花一堆时间去美化【现在细想，实在愚蠢】!最近刚组织学习团队，需要用到这个知识点(细想毕竟这个会用这个还是比较方便的，所以打算先自己学一下)！静下心来仔细看了一下官方的文档，发现：我丢......原来那么简单的啊！【如果看文章看到了这里，还是接着看下去吧】

      学习接口性质类的东西，最官方权威的时候是看官方文档，但是我想还是有人因该跟我一样，对这东西天生还是有点恐惧感的！多少需要别人来告诉自己一声：其实这个很简单，这么去学就很简单了！因此，【有缘人啊....】如果看到这篇文章并且坚持看到了这里，那你不妨继续看下去，在这篇博客中，记录了：编辑器的原理及各种常用编辑器的引入的一个大概的思路与学习方法！【当然，如果写错了，还请留下您宝贵的指点意见，谢谢指教，欢迎指教学习】(由于从为知笔记同步到博客的，代码编排真是丑哭了朕，所以我附上的是代码截图)

      百度针对论坛贴吧评论，又做了一个UM的编辑器，是UE的简化版！大家也可以去看看~

对于此次学习，有以下几点编程感悟：

==>1).技术都是想的难，其实很简单==>难是难在自己的想法了，认为很难！要尝试静下心去看这个东西！

==>2).对于编辑器，在线支付，微信开发接口....这些不是PHP知识点的知识[因为这些东西都是单纯的调用API罢了]，最好的方法==>读官方手册，最权威；看下载压缩包中的example实例，入门最快；

==>3).多动手，跟着官方文档的思路去敲代码！你不可能会所有语言，因此对待不懂的语言不要去抗拒！语言是学不完的【不管你懂不懂引入的这个语言，先把东西做出来再说】

2.编辑器原理：

    1).什么是编辑器==>对文字有编辑作用[修改，删除....]，对文字的加粗，划下划线......这些都是对文字样式的改变(其实并不属于编辑器的功能，但是现在大多编辑器都集成了)

          ==>下面这段代码，对于“hello world!”这几个字只是单纯的一个显示，我们无法删除，无法重新修改

          ==>但是对于下面这个div呢？你还是单单只能看这个内容：“hello lms, what you like ?......”吗？

    2).编辑器原理：

          ==>插入一个iframe，并利用网页的contentEditable属性，使得该iframe可以编辑；

          ==>利用JS改变文字的样式，完成加粗，变色，加下划线，上传图片效果

          ==>最后获取该区域的内容即可！至于如何处理，这些都是业务逻辑代码了！

3.常见的编辑器：

1).比较长久老牌：FCKEditor-->更名为CKEditor；KindEditor【比较老，教程这些的都很多....】

2).国内淘宝用的：ewebEditor

3).目前比较新，流行的：UEditor，UM编辑器[为论坛贴吧定制的]==>都是百度出的！

4.如何学习编辑器：最权威，最官方的就是取看官方文档【以UEditor为例】

          1).如何引入

                     ==>就是引入几个js文件的事

                     ==>http://fex.baidu.com/ueditor/官方DOC文件《1.2 创建demo文件》中有详细说明

          2).如何个性化配置==>

                (1).在引入页面覆盖配置【推荐使用这个】

                     ==>去配置文件中找到对应的配置项，拼接成一个对象，当成参数传给UE.getEditor('container',{配置项1 , 配置项2, ...... })进行设置

                (2).对配置文件进行修改==>【一修改，那么所有引用了这个编辑器的都会被更改】

                     ==>ueditor.config.js【前台显示配置】

          3).如何与自己系统整合==>

                (1).现在你所需要运用编辑器的地方，将编辑器的"前端"引入进来；==>路径URL写死[整合到项目中的时候，资源是不能乱放的]

                (2).==>对应语言的包下的config.json【后台处理配置--图片、视频上传路径....将默认的目录路径改为你要存放的地方】

                            ①.在表单中要加上： enctype="multipart/form-data"==>有文件上传，图片上传等必须要加[以二进制数据进行传输数据]

                            ②.对于不明确的路径，使用firebug查看原本路径，一直追溯路径变量

                            ③.使用firebug查看返回来的值，查看返回来的[以上两个是针对于出现问题时候，调试可以用的方法]

                            ④.UE的1.4.2+版本中的通用上传类Upload.class.php，所有配置都写在了config.json中，只需要在config.json中修改对于路径即可

                           ⑤.1.4.2+ 以后路径配置主要相关的配置项是 PathFormat【上传保存路径】 和 UrlPrefix【访问路径--对于ASP和.net来说需要配置】的配置项

                       ⑥.1.4.2+ 路径配置项无论是否以 "/" 开头，都是相对于 网站根目录 的路径。

                             ⑦.后台会过滤模板上的非法字符==> \ : * ?　" < > |   ==>这些非法字符都会被替换成空

 

来自为知笔记(Wiz)