本文共 3218 字，大约阅读时间需要 10 分钟。
今天一个客户要求在编辑器里增加可以拖动图片的方法，研究了很久，发现这几种编辑器只有在ie下才可以拖动图片大小，包括网易用的编辑器，QQ空间的编辑器，先提前声明一下。下面进入重点
1.百度编辑器ueditor
先新建项目，生成以后在目录下新建一个plugins文件夹
然后下载ueditor,地址：，注意编码。下载以后解压将整合文件夹放到plugins里，并且改名为ueditor
将项目名/Lib/Action/IndexAction.clas.php添加
| 1 2 3 4 5 | class IndexAction extends Action { function index(){ $ this ->display(); } } |
然后在对应的模版里添加,在<head></head>中间添加
| 1 2 | < script type = "text/javascript" src = "/edit/plugins/ueditor/ueditor.config.js" ></ script > < script type = "text/javascript" src = "/edit/plugins/ueditor/ueditor.all.js" ></ script > |
在需要的地方添加
| 1 2 3 4 5 | < textarea id = "myEditor" name = "content" style = "width:700px;height:300px;" > </ textarea > < script type = "text/javascript" > UE.getEditor('myEditor') </ script > |
这是textera的方式，也可以用div，p都可以，官方推荐的是
| 1 2 3 | < script type = "text/plain" id = "myEditor" > //从数据库中取出文章内容打印到此处 </ script > |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 | toolbars:[ [ 'fullscreen' , 'source' , '|' , 'undo' , 'redo' , '|' , 'bold' , 'italic' , 'underline' , 'fontborder' , 'strikethrough' , 'superscript' , 'subscript' , 'removeformat' , 'formatmatch' , 'autotypeset' , 'blockquote' , 'pasteplain' , '|' , 'forecolor' , 'backcolor' , 'insertorderedlist' , 'insertunorderedlist' , 'selectall' , 'cleardoc' , '|' , 'rowspacingtop' , 'rowspacingbottom' , 'lineheight' , '|' , 'customstyle' , 'paragraph' , 'fontfamily' , 'fontsize' , '|' , 'directionalityltr' , 'directionalityrtl' , 'indent' , '|' , 'justifyleft' , 'justifycenter' , 'justifyright' , 'justifyjustify' , '|' , 'touppercase' , 'tolowercase' , '|' , 'link' , 'unlink' , 'anchor' , '|' , 'imagenone' , 'imageleft' , 'imageright' , 'imagecenter' , '|' , 'insertimage' , 'emotion' , 'scrawl' , 'insertvideo' , 'music' , 'attachment' , 'map' , 'gmap' , 'insertframe' , 'insertcode' , 'webapp' , 'pagebreak' , 'template' , 'background' , '|' , 'horizontal' , 'date' , 'time' , 'spechars' , 'snapscreen' , 'wordimage' , '|' , 'inserttable' , 'deletetable' , 'insertparagraphbeforetable' , 'insertrow' , 'deleterow' , 'insertcol' , 'deletecol' , 'mergecells' , 'mergeright' , 'mergedown' , 'splittocells' , 'splittorows' , 'splittocols' , '|' , 'print' , 'preview' , 'searchreplace' , 'help' ] ] |
看需要删除即可。
最近百度网盘有个活动，如果有兴趣的朋友可以参加一下，还有个人收集的一些书籍
http://pan.baidu.com/share/link?shareid=3950160737&uk=3826886292
2.kindeditor
下载地址:
解压改名放到plugins下,
在模版里添加
| 1 2 3 4 5 6 | < script charset = "utf-8" src = "/edit/plugins/kindeditor/kindeditor.js" ></ script > < script charset = "utf-8" src = "/edit/plugins/kindeditor/lang/ko.js" ></ script > < script > KindEditor.ready(function(K) { window.editor = K.create('#editor_id'); }); |
| 1 2 | < textarea id = "myEditor" name = "content" style = "width:700px;height:300px;" > </ textarea > |
显示的样式，自然就是51cto博客编辑器的样子了。
3.xheditor ，号称最干净整洁的在线编辑器
下载地址:
复制到plugins下改名
在需要的模版中添加
| 1 2 | < script type = "text/javascript" src = "/edit/plugins/xheditor/jquery/jquery-1.4.4.min.js" ></ script > < script type = "text/javascript" src = "/edit/plugins/xheditor/xheditor-1.1.14-zh-cn.js" ></ script > |
| 1 | < textarea name = "content" class = "xheditor" ></ textarea > |
即可，剩下的就是和后端的处理了。
一般我就比较喜欢使用这三种编辑器，而且各有特点，现在不喜欢fckeditor了，外观不美观，而且上传之类的，容易出问题，包括有上传漏洞。就不说了。