UEditor编辑器并不难,ueditor并不难
1.背景:
其实学习UEditor本该在这之前就应该学习整合到自己的项目中的了,第一次接触UEditor是在暑假期间,当时做东西在师兄的代码中发现了这东西,心想:卧槽,竟然可以这样整合别人的东西!
学习接口性质类的东西,最官方权威的时候是看官方文档,但是我想还是有人因该跟我一样,对这东西天生还是有点恐惧感的!多少需要别人来告诉自己一声:其实这个很简单,这么去学就很简单了!因此,
【有缘人啊....
】如果看到这篇文章并且坚持看到了这里,那你不妨继续看下去,在这篇博客中,记录了:编辑器的原理及各种常用编辑器的引入的一个大概的思路与学习方法!【当然,如果写错了,还请留下您宝贵的指点意见,谢谢指教,欢迎指教学习】(由于从为知笔记同步到博客的,代码编排真是丑哭了朕,所以我附上的是代码截图)
百度针对论坛贴吧评论,又做了一个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【前台显示配置】