ThinkPHP整合各大主流在线编辑器的方法
2013-07-16 09:23:49 点击:

今天一个客户要求在编辑器里增加可以拖动图片的方法,研究了很久,发现这几种编辑器只有在ie下才可以拖动图片大小,包括网易用的编辑器,QQ...
今天一个客户要求在编辑器里增加可以拖动图片的方法,研究了很久,发现这几种编辑器只有在ie下才可以拖动图片大小,包括网易用的编辑器,QQ空间的编辑器,先提前声明一下。下面进入重点

1.百度编辑器ueditor

先新建项目,生成以后在目录下新建一个plugins文件夹

然后下载ueditor,地址:http://ueditor.baidu.com/website/download.html,注意编码。下载以后解压将整合文件夹放到plugins里,并且改名为ueditor

将项目名/Lib/Action/IndexAction.clas.php添加


  1. class IndexAction extends Action { 
  2.     function index(){ 
  3.         $this->display(); 
  4.     } 

然后在对应的模版里添加,在<head></head>中间添加


  1. <script type="text/javascript" src="/edit/plugins/ueditor/ueditor.config.js"></script>  
  2. <script type="text/javascript" src="/edit/plugins/ueditor/ueditor.all.js"></script> 

在需要的地方添加


  1. <textarea id="myEditor" name="content" style="width:700px;height:300px;">  
  2. </textarea>  
  3. <script type="text/javascript">  
  4.     UE.getEditor('myEditor')  
  5. </script> 

 


  1. toolbars:[ 
  2.             ['fullscreen''source''|''undo''redo''|'
  3.                 'bold''italic''underline''fontborder''strikethrough''superscript''subscript''removeformat''formatmatch''autotypeset''blockquote''pasteplain''|''forecolor''backcolor''insertorderedlist''insertunorderedlist''selectall''cleardoc''|'
  4.                 'rowspacingtop''rowspacingbottom''lineheight''|'
  5.                 'customstyle''paragraph''fontfamily''fontsize''|'
  6.                 'directionalityltr''directionalityrtl''indent''|'
  7.                 'justifyleft''justifycenter''justifyright''justifyjustify''|''touppercase''tolowercase''|'
  8.                 'link''unlink''anchor''|''imagenone''imageleft''imageright''imagecenter''|'
  9.                 'insertimage''emotion''scrawl''insertvideo''music''attachment''map''gmap''insertframe','insertcode''webapp''pagebreak''template''background''|'
  10.                 'horizontal''date''time''spechars''snapscreen''wordimage''|'
  11.                 'inserttable''deletetable''insertparagraphbeforetable''insertrow''deleterow''insertcol''deletecol''mergecells''mergeright''mergedown''splittocells''splittorows''splittocols''|'
  12.                 'print''preview''searchreplace''help'
  13.         ] 

看需要删除即可。

最近百度网盘有个活动,如果有兴趣的朋友可以参加一下,还有个人收集的一些书籍

http://pan.baidu.com/share/link?shareid=3950160737&uk=3826886292

2.kindeditor

下载地址:http://www.kindsoft.net/down.php

解压改名放到plugins下,

在模版里添加


  1. <script charset="utf-8" src="/edit/plugins/kindeditor/kindeditor.js"></script> 
  2. <script charset="utf-8" src="/edit/plugins/kindeditor/lang/ko.js"></script> 
  3. <script> 
  4.         KindEditor.ready(function(K) { 
  5.                 window.editor = K.create('#editor_id'); 
  6.         });

  1. <textarea id="myEditor" name="content" style="width:700px;height:300px;"> 
  2. </textarea> 

显示的样式,自然就是51cto博客编辑器的样子了。

3.xheditor  ,号称最干净整洁的在线编辑器

下载地址:http://xheditor.com/download

复制到plugins下改名

在需要的模版中添加


  1. <script type="text/javascript" src="/edit/plugins/xheditor/jquery/jquery-1.4.4.min.js"></script>  
  2. <script type="text/javascript" src="/edit/plugins/xheditor/xheditor-1.1.14-zh-cn.js"></script> 

  1. <textarea name="content" class="xheditor"></textarea> 

即可,剩下的就是和后端的处理了。

一般我就比较喜欢使用这三种编辑器,而且各有特点,现在不喜欢fckeditor了,外观不美观,而且上传之类的,容易出问题,包括有上传漏洞。就不说了。有兴趣的朋友可以加群:252799167一起学习进

原文链接:http://a3147972.blog.51cto.com/2366547/1243384



相关热词搜索:ThinkPHP 整合 各大

上一篇:ECshop 后台编辑器fckeditor上传文件按年月并非重命名的最新解
下一篇:ecshop验证码不显示解决办法captcha