ThinkPHP整合各大主流在线编辑器的方法

开发 开发工具
今天一个客户要求在编辑器里增加可以拖动图片的方法,研究了很久,发现这几种编辑器只有在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

责任编辑:陈四芳 来源: “尛雷” 博客
相关推荐

2020-09-18 06:00:51

开源Markdown编辑器

2022-01-04 08:16:49

编辑器在线编辑开发

2011-04-21 15:39:26

HTML

2011-01-10 16:17:49

2010-02-23 15:44:24

Python编辑器

2009-06-06 16:10:47

Eclipse RCP屏蔽视图

2010-03-24 09:20:07

CentOS vi编辑

2022-09-08 09:01:41

CodePenJavaScripCSS

2013-06-18 01:22:46

CocoStudio工Cocos2d-x

2010-05-14 16:23:18

SharePoint 在线编辑

2011-03-22 13:54:57

UbuntuPHP编辑器

2011-04-07 10:42:11

编辑器云计算

2022-12-01 16:59:32

代码编辑器开发前端

2017-03-09 11:45:16

LinuxVim编辑器

2018-09-25 09:25:11

Vim编辑器命令

2023-08-02 07:25:52

在线图片编辑器

2009-10-26 10:47:57

linux vi编辑器

2009-12-04 17:07:49

SlickEdit

2022-05-31 14:46:02

Ruby编码线上编辑器

2020-10-14 14:00:39

VIM编辑器
点赞
收藏

51CTO技术栈公众号