如何将文本编辑器嵌入框架--以Umeditor&CodeIgniter框架为例
转:http://blog.csdn.net/u013332865/article/details/52066211
最近接到一个给某私立贵族(小,初,高 12年只是学费近200W)学校做一个网站,时间紧迫,本来打算用wordpress,但是要求页面要重新设计,而我们的前端开发没有WP主题开发的经验,无疑需要额外的学习成本(主要是时间来不及),所以提出自己做一个CMS的系统。但是文章编辑这块需要文本编辑器的基本功能,那就只能用富文本编辑器了。再加上本菜鸡喜欢用CI框架,所以需要把富文本编辑器和框架相结合,以下内容以此背景展开。
事前准备:
环境:mac系统+Apache+mysql(没用到)+php(废话)
富文本编辑器:umeditor (ueditor的简化版,需要用到的文本编辑器的道友可以试一下,很推荐)
GitHub地址:https://github.com/fex-team/umeditor
codeigniter框架(简称CI框框)
官网地址:http://codeigniter.org.cn/
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
先来一张umeditor的文件结构吧:
图一
将文本编辑器嵌入框架,其本质就是在框架内的view中引入编辑器的样式和JS,在controller中引入编辑器的相关PHP类。
引入JS&CSS:
图二
CSS:
图二中public\umeditor\umeditor.css&umeditor.min.css即图一中umeditor\themes\default\css中的两个文件。前者为未压缩,后者未压缩版。
public\umeditor\formbtn.css即图二umeditor\index.html中文件里面的一些样式。
图二public\images文件夹即图一umeditor\themes\default\images
图二public\js\umeditor\dialogs&third-party即图一umeditor\dialogs&third-party
图二public\js\umeditor\umeditor.js&umeditor.config.js即图一umeditor\umeditor.js&umeditor.config.js(umeditor.js与umeditor.min.js 这里不再赘述)
图二public\js\zh-cs.js即图一umeditor\lang\zh-cn\zh-cn.js(中文的语言包,或者应该说是提示信息中文包)
jQuery.min.js 这里用的是v2.2.3
下面是在view中的引入:
<link href="<?php echo base_url('/public/css/umeditor/umeditor.css'); ?>" type="text/css" rel="stylesheet">
<script type="text/javascript" src="<?php echo base_url('/public/js/jquery.min.js'); ?>"></script>
<script type="text/javascript" charset="utf-8" src="<?php echo base_url('/public/js/umeditor/umeditor.js'); ?>"></script>
<script type="text/javascript" charset="utf-8" src="<?php echo base_url('/public/js/umeditor/umeditor.config.js'); ?>"></script>
<script type="text/javascript" src="<?php echo base_url('/public/js/umeditor/zh-cn.js'); ?>"></script>
<link rel="stylesheet" href="<?php echo base_url('/public/css/umeditor/formbtn.css'); ?>">
- 1
- 2
- 3
- 4
- 5
- 6
- 7
引入相关PHP类:
在CI框架下的application\libraries中新建一个文件'Umupload.php'(我个人只是想用上传,所以变这么命名)
然后将图一中umeditor\php\Upload.class.php中的所以代码直接Copy至上一步新建的文件中。
处理上传:
这里本菜鸡直接在CI的默认控制器 welcome中写了两个function 分别加载编辑器视图和处理上传,如下:
- 1
- 2
- 3
- 4
- 5
- 6
- 7
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class Welcome extends CI_Controller {
public function index()
{
$this->load->view('umeditor.html');
}
public function umupload(){
error_reporting( E_ERROR | E_WARNING );
//上传配置
$config = array(
"savePath" => "upload/" , //存储文件夹 (感觉没啥用)
"maxSize" => 1000 ,
"allowFiles" => array( ".gif" , ".png" , ".jpg" , ".jpeg" , ".bmp" )
);
//上传文件目录
$Path = "upload/";
//背景保存在临时目录中
$config[ "savePath" ] = $Path;
$this->load->library('Umupload',array('fileField'=>'upfile', 'config' => $config));
$type = $_REQUEST['type'];
$callback=$_GET['callback'];
$info = $this->umupload->getFileInfo();
/**
* 返回数据
*/
if($callback) {
echo '<script>'.$callback.'('.json_encode($info).')</script>';
} else {
echo json_encode($info);
}
}
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
其中public function umupload()的函数体就是图一umeditor\php\imageUp.php中的内容,并且做了相关修改。
至此,编辑器已经全部嵌入框架,但是还需修改一些代码片段才可以正式使用。
后期加工,以下修改均指CI框架中的修改:
修改JS:CI\public\js\umeditor.config.js 第139行附近修改为:
- 1
- 2
- 3
//图片上传配置区
,imageUrl:URL+"../../../index.php/welcome/umupload" //图片上传提交地址
,imagePath:URL + "../../../" //图片修正地址,引用了fixedImagePath,如有特殊需求,可自行配置
,imageFieldName:"upfile" //图片数据的key,若此处修改,需要在后台对应文件修改对应参数
- 1
- 2
- 3
- 4
- 5
这里主要是修改路径,让JS可以找到控制器。出于仓促这里使用相对路径。
修改PHP:
据上文所述,在welcome的控制器中 public function umupload()的函数体是copy而来,所以要修改一部分使之可以在CI中'跑'起来。修改之后的代码如上文所示,具体修改为:
删除最开始的两行:
- 1
- 2
- 3
- 4
- 5
- 6
header("Content-Type:text/html;charset=utf-8");
error_reporting( E_ERROR | E_WARNING );
- 1
- 2
- 3
将原编辑器中的 17行
$up = new Uploader( "upfile" , $config );
- 1
- 2
修改为:
$this->load->library('Umupload',array('fileField'=>'upfile', 'config' => $config));
- 1
因为此处通过加载library的方式引入编辑器的相关PHP类。并且library的构造函数只能传一个参数,因此做此修改。
第21行附近的
$info = $up->getFileInfo();
- 1
修改为:
$info = $this->umupload->getFileInfo();
- 1
- 2
这里即调用library引入类的方法。
修改library文件:
通上文所述,library的构造函数只能传一个参数所以作如下修改:
第43行附近修改为:
public function __construct( $param)
{
$this->fileField = $param['fileField'];
$this->config = $param['config'];
$this->stateInfo = $this->stateMap[ 0 ];
$this->upFile( false );
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
至此,umeditor文本编辑器已经嵌入CI框架。
本人测试试用成功。
umeditor的使用方法就不再赘述了。
更新于2016.8.30 融合bug(与bootstrap的CSS冲突)
如果使用bootstrap前端框架。那么umeditor编辑器中的图片在调整大小的时候会有一些”失灵”的BUG。
主要是因为,编辑器的样式与bootstrap.css 的box-sizing设置有冲突
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
- 1
- 2
- 3
- 4
- 5
解决方案:
可以在用到编辑器的页面,重新设置包含编辑器的元素的该项属性
.edui-container *{
-webkit-box-sizing: initial;
-moz-box-sizing: initial;
box-sizing: initial;
}
/* .edui-container 为包含编辑器的元素*/
如何将文本编辑器嵌入框架--以Umeditor&CodeIgniter框架为例的更多相关文章
- **【ci框架】精通CodeIgniter框架
http://blog.csdn.net/yanhui_wei/article/details/25803945 一.大纲 1.codeigniter框架的授课内容安排 2.codeigniter框架 ...
- 富文本编辑器嵌入指定html代码
先把内容放入一个input中 <input id="detail" type="hidden" value="${sysCarousel.det ...
- JSP嵌入ueditor、umeditor富文本编辑器
一.下载: 1.什么是富文本编辑器?就是: 或者是这个: 其中第一个功能比较详尽,其主要用来编写文章,名字叫做udeitor. 第二个就相对精简,是第一个的MINI版,其主要用来编辑即时聊天或者发帖, ...
- PHP接入umeditor(百度富文本编辑器)
2015年6月28日 23:08:49 星期日 效果: 开搞;) 首先: 百度官网上下载 umeditor 简版的富文本编辑器(这里) 然后: 解压放到自己的项目中, 配置服务器, 保证能在浏览器端加 ...
- 使用百度UMeditor富文本编辑器,修改自定义图片上传,修改源码
富文本编辑器,不多说了,这个大家应该都用到过,至于用到的什么版本,那就分很多种 CKEditor:很早以前叫FCK,那个时候也用过,现在改名了,比较流行的一个插件,国外很多公司在用 UEDITOR:百 ...
- 改造百度UMeditor(UEditor-min)富文本编辑器的图片上传功能
最近项目需要新增一个发布文章的模块,用的是百度的Ueditor富文本编辑器. 公司用的是阿里云的图片服务器,需要直接把文章中图片上传到服务器上,但是这个编辑器的上传图片是直接上传到Tomcat的根目录 ...
- 百度富文本编辑器ueditor在jsp中的使用(ssm框架中的应用)
折腾了一下午终于把百度富文本编辑器ueditor搞定了! 项目地址:https://github.com/724888/lightnote_new 首先我参考了一个ueditor的demo ...
- 百度umeditor富文本编辑器插件扩展
富文本编辑器在WEB开发中经常用到,个人比较喜欢用百度出的ueditor这款,ueditor这款本身支持插件扩展的,但是ueditor的mini版本 umeditor 就没有那么方便了,不过找了很多资 ...
- UMeditor百度富文本编辑器的使用
批量上传的图片在线管理没法查看图片 是因为jar包本身的Bug,这里暂时做了个替换展示.就是找到Img.js 然后搜索 img.set 替换下就好了 var url=list[i].url ; ...
随机推荐
- Java对中文进行排序
对中文进行排序,同样是得定义一个Comparator,下面上代码: import java.text.Collator; import java.util.ArrayList; import java ...
- idea中 读取mybatis的配置文件时候 如果放在文件下面 需要加上路径
- oracle 创建表空间 与创建用户与分配用户权限
创建一个表空间名为ABC create tablespace "ABC" //貌似要大写 datafile 'D:\oracle\TBSPACES\ABC.dbf' / ...
- 【BZOJ1489】[HNOI2009]双递增序列(动态规划)
[BZOJ1489][HNOI2009]双递增序列(动态规划) 题面 BZOJ 洛谷 题解 这\(dp\)奇奇怪怪的,设\(f[i][j]\)表示前\(i\)个数中,第一个数列选了\(j\)个数,第二 ...
- 【bzoj2001】 Hnoi2010—City 城市建设
http://www.lydsy.com/JudgeOnline/problem.php?id=2001 (题目链接) 题意 给出一张无向图,$m$组操作,每次修改一条边的权值,对于每次操作输出修改之 ...
- SpringBoot整合Mybatis之Annotation
首先需要下载前面一篇文章的代码,在前一章代码上进行修改. SpringBoot整合Mybatis(注解方式) 复制前一个项目,修改配置文件,mybatis的相关配置为: mybatis: type-a ...
- 阿里云ECS使用cloudfs4oss挂载OSS
cloudfs4oss可以帮我们将OSS直接挂载到ECS上,就像一个目录一样方便访问.使用方法: 1.安装配置环境: yum install libcurl libcurl-devel openssl ...
- html5 canvas贝塞尔曲线篇(下)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 大话C#中能使用foreach的集合的实现
大家都知道foreach的语法:foreach(var item in items){ Console.Writeln(item);} 通过这样一个简单的语句,就能实现遍历集合items中的所有元素. ...
- HDU 4472 Count DP题
解题报告:题目大意,给你n个球,要将这n个球从下到上按层次排列,要求同一个层次的的每一个分支的数量都必须相等,问有多少种排列的方法. 此题的一个DP题,假设现在有n个球,要将这n个球排列好,我们就必须 ...