今天一个客户要求在编辑器里增加可以拖动图片的方法，研究了很久，发现这几种编辑器只有在ie下才可以拖动图片大小，包括网易用的编辑器，QQ空间的编辑器，先提前声明一下。下面进入重点
1.百度编辑器ueditor
先新建项目，生成以后在目录下新建一个plugins文件夹
然后下载ueditor,地址：http://ueditor.baidu.com/website/download.html，注意编码。下载以后解压将整合文件夹放到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
下载地址:http://www.kindsoft.net/down.php
解压改名放到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 ，号称最干净整洁的在线编辑器
下载地址:http://xheditor.com/download
复制到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了，外观不美观，而且上传之类的，容易出问题，包括有上传漏洞。就不说了。
本文转自 3147972 51CTO博客，原文链接：http://blog.51cto.com/a3147972/1243384，如需转载请自行联系原作者
