【军哥谈CI框架】之CI中集成百度UEditor
Hello,各位亲,新的一周来临啦,很高兴这么快又跟大家伙见面!话说上一回,军哥带大家用JQuery写了一个城市级联菜单的例子 ,不知道亲们学会了多少,是否自己可以独立写出来了呢。
军哥很是期待大家学有所获的,有不明白的地方随时留言吧。好了,接下来,今天军哥要带大家来一起来完成如何在CI框架中集成百度的UEditor编辑器。
我们先简单来了解一下为什么选择百度UEditor编辑器?
UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于BSD协议,允许自由使用和修改代码,在众多的编辑器中还是很出类拔萃的,目前百度编辑器也作为worderPress的插件替换了之前默认的编辑器,也足以看出UEditor的强大。
再来看一下效果图:
不赖吧,相信有淫已经等不急了吧!别急,我们一步步来~~
一、官网上http://ueditor.baidu.com/website/ipanel/panel.html#下载最新UEditor的PHP + UTF-8版完整源码包,解压到任意目录,解压后的源码目录结构如下所示:
_examples:编辑器完整版的示例页面
dialogs:弹出对话框对应的资源和JS文件
themes:样式图片和样式文件
php:涉及到服务器端操作的PHP文件
third-party:第三方插件
editor_all.js:_src目录下所有文件的打包文件
editor_all_min.js:editor_all.js文件的压缩版,建议在正式部署时才采用
editor_config.js:编辑器的配置文件,建议和编辑器实例化页面置于同一目录
二、部署UEditor到CI项目(CI_UETest)中的步骤
第一步:在项目的CI_UETest/public/scripts中建立一个用于存放UEditor相关资源和文件的目录,起名为ueditor。
第二步:拷贝源码包中的php、_src、dialogs、themes、third-party和editor_config.js到CI_UETest/public/scripts/ueditor文夹中。
第三步:我们以公告管理模块中的发布公告页面作为编辑器的实例化页面,用来展示UEditor的完整版效果。
1、控制器:
- if (!defined('BASEPATH'))
- exit('No direct script access allowed');
- /**
- * @author JayJun
- * @copyright 2012.09.10
- */
- class notice extends CI_Controller {
- //构造函数
- function __construct(){
- parent::__construct();
- $this->base_url = $this->config->item("base_url");
- }
- //显示公告发布页面
- function edit() {
- $data['base_url'] = $this->base_url;
- $this->load->helper('form'); //加载表单辅助函数
- // 显示视图
- $this->load->view('notice_edit', $data);
- }
- }
2、视图:
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
- <title>发布公告</title>
- <link rel="stylesheet" href="<?php echo $base_url; ?>/public/css/base.css" type="text/css" />
- <link rel="stylesheet" href="<?php echo $base_url; ?>/bootstrap/css/bootstrap.min.css" type="text/css" />
- <link rel="stylesheet" href="<?php echo $base_url; ?>/public/scripts/ueditor/themes/default/ueditor.css" type="text/css" />
- <script type="text/javascript" src="<?php echo $base_url; ?>/public/scripts/ueditor/editor_config.js"></script>
- <script type="text/javascript" src="<?php echo $base_url; ?>/public/scripts/ueditor/editor_all.js"></script>
- </head>
- <body>
- <div class="w800 bc">
- <h2>发布公告</h2>
- <table class="table table-condensed table-bordered mt10">
- <?php echo form_open();?>
- <thead>
- <tr>
- <td colspan="2" class="fb">
- <span class="icon-exclamation-sign"></span>
- 新发布的公告默认为不显示.
- </td>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td width='15%' class="fb">公告标题:</td>
- <td><?php echo form_input('Title')?></td>
- </tr>
- <tr>
- <td class="fb">公告内容:</td>
- <td>
- <?php echo form_textarea('Content','','id="myEditor"'); ?>
- </td>
- </tr>
- <tr>
- <td class="fb">是否显示:</td>
- <td><?php echo form_checkbox("Nstatus") ;?></td>
- </tr>
- <tr>
- <td colspan='2' class="form-actions">
- <?php echo form_submit("submit","提交","class='btn btn-primary'"); ?>
- <?php echo form_reset("reset","重置","class='btn'"); ?>
- </td>
- </tr>
- </tbody>
- <?php echo form_close(); ?>
- </table>
- </div>
- </body>
- <script type="text/javascript">
- var ue = new UE.ui.Editor();
- ue.render('myEditor'); //myEditor为id值
- </script>
- </html>
第四步:然后在notice_edit.php文件中创建编辑器实例。具体代码示例如下:
- <script type="text/javascript">
- var ue = new UE.ui.Editor();
- ue.render('myEditor'); // myEditor为id值
- </script>
最后一步: 在CI_UETest/public/scripts/ueditor/editor_config.js中查找URL变量配置编辑器在你项目中的路径。
- //强烈推荐以这种方式进行绝对路径配置
- URL= window.UEDITOR_HOME_URL || "/CI_UETest/public/scripts/ueditor/"; //第27行
三、其他
1、在引用editor_config.js时,最好先于editor_all.js加载,否则特定情况下可能会出现报错。
2、编辑器中预置提示、问候等内容。
在editor_config.js文件中找到initialContent参数(第117行),设置其值为需要的提示或者问候语即可,如initialContent:’大家好’。
转:https://my.oschina.net/jayjun/blog/89078
【军哥谈CI框架】之CI中集成百度UEditor的更多相关文章
- 【军哥谈CI框架】之入门教程之第二讲:分析CI结构和CI是怎么工作的
[军哥谈CI框架]之入门教程之第二讲:分析CI结构和CI是怎么工作的 之入门教程之第二讲:分析CI结构和CI是如何工作的大家好!上一节,我们共同部署了一个CI网站,做到这一点非常简单,但是,亲们, ...
- CI框架在模型中切换读写库和读写库
如果你想在控制器中切换在application/config/database.php中配置好的数据库group,那么你可以参考这篇博客:CI框架在控制器中切换读写库和读写库 如果你是希望在模型中切换 ...
- AngularJS进阶(十九)在AngularJS应用中集成百度地图实现定位功能
在AngularJS应用中集成百度地图实现定位功能 注:请点击此处进行充电! 前言 根据项目需求,需要实现手机定位功能,考虑到百度业务的强大能力,遂决定使用百度地图第三方服务. 添加第三方模块的步骤与 ...
- Android Studio 项目中集成百度地图SDK报Native method not found: com.baidu.platform.comjni.map.commonmemcache.JNICommonMemCache.Create:()I错误
Android Studio 项目中集成百度地图SDK报以下错误: java.lang.UnsatisfiedLinkError: Native method not found: com.baidu ...
- CI框架在控制器中切换读写库和读写库
CodeIgniter框架版本:3.1.7 ,php版本:5.6.* ,mysql版本:5.6 在Ci框架中,可以在application/config/database.php中配置多个group, ...
- ngnix 配置CI框架 与 CI的简单使用
ngnix 支持 CI框架1.修改config.php 参考网址:https://www.chenyudong.com/archives/codeigniter-in-nginx-and-url-re ...
- 【ci框架基础】之部署百度编辑器
在ci框架下加载编辑器,现在复习下内容.我的框架文件名称为ci 1.下载百度编辑器ueditor,http://ueditor.baidu.com/ 一般情况下下载ubuilder版即可,并将uedi ...
- CI框架在辅助函数中使用配置文件中的变量
问题: 现有一个自定义的辅助函数,想要获取配置文件中的配置项(配置文件路径为application/config/config.php) 分析: 辅助函数并不是定义在一个class中,而是很多个可供外 ...
- 去掉CI框架默认url中的index.php
1:.htaccess //放置在根目录下,和入口文件index.php的同级目录<IfModule mod_rewrite.c>RewriteEngine onRewriteCond % ...
随机推荐
- 简易处理图片在div中居中铺满
原文地址:http://www.cnblogs.com/JimmyBright/p/7681089.html 经常需要在一个长宽固定的div里存放一个图片,这个图片长宽未知,所以需要图片自适应div显 ...
- 今天GG
刚开考: 这里锅了,那里锅了,还被D了QAQ. 然后\(YL\)说,\(T2\)不是傻逼题吗. 于是萝卜秒掉了\(T1\). 于是\(gsy\)秒掉了\(T3\). \(lalaxu,FlashHu\ ...
- bzoj1047&bzoj1012
Description 有一个a*b的整数组成的矩阵,现请你从中找出一个n*n的正方形区域,使得该区域所有数中的最大值和最小值的差最小. Input 第一行为3个整数,分别表示a,b,n的值第二行至第 ...
- Openstack运维指南文档整理
非常全面的运维指南整理http://zjzone.cc/index.php/2017/07/31/openstack-yun-wei-wen-dang-zheng-li/
- redis 中用正则找key
获取 redis 中所有的 key 可用使用 *. redis 127.0.0.1:6379> KEYS * 1) "w3c3" 2) "w3c1" 3) ...
- python deamon(守护)线程的作用
stackoverflow 上的解释 某些线程执行后台任务,例如发送keepalive数据包,或执行定期垃圾收集,或任何.这些仅在主程序运行时有用,并且一旦其他非守护程序线程退出就可以将其关闭. 没有 ...
- 第七节 认识SpringMVC中的表单标签
所谓成熟,就是:你要习惯,任何人的忽冷忽热:也要看淡,任何人的渐行渐远: --胖先生 SpringMVC的表单标签 回顾: JSTL标签 --C标签 FMT标签 自学:JSP如何自定义标签[开源社区当 ...
- python---django中模板渲染(csrf令牌使用,自定义模板函数)
使用终端,可以更方便的去实验,但是没有提示信息: 在项目目录下: D:\MyPython\day23\HelloWorld>python manage.py shell 开始实验: >&g ...
- internal in C#
说白了 被 internal 修饰的东西只能在本程序集(当前项目)内被使用. 被 protected internal 修饰的属性/方法 可以在其他项目中,被派生类使用 例如有两个项目app1和app ...
- 织梦 dedecms 首页调用公司简介的内容
首页调用公司简介的代码: {dede:sql sql='Select content,substring(content,1,300) as content from dede_arctype whe ...