UEditor是由百度WEB前端研发部开发的所见即所得的开源富文本编辑器，具有轻量、可定制、用户体验优秀等特点。本文主要讲解CI框架如何整合UEditor编辑器进行前后端配置、配置上传路径及实现上传功能。
详情如下：
1. 戳 https://ueditor.baidu.com/website/download.html 下载并解压至项目文件根目录下，一般下载ubuilder版。
2. 解压好的目录为
-ueditor
----dialogs 弹出对话框对应的资源和JS文件
----lang 编辑器国际化显示的文件
----php 涉及到服务器端操作的后台文件
----themes 样式图片和样式文件
----third-party 第三方插件(包括代码高亮，源码编辑等组件）
----ueditor.all.js 开发版代码合并的结果,目录下所有文件的打包文件
----ueditor.all.min.js ueditor.all.js文件的压缩版，建议在正式部署时采用
----ueditor.config.js 编辑器的配置文件，建议和编辑器实例化页面置于同一目录
----ueditor.parse.js 编辑的内容显示页面引用，会自动加载表格、列表、代码高亮等样式,具体看内容展示文档
----ueditor.parse.min.js ueditor.parse.js文件的压缩版，建议在内容展示页正式部署时采用
3. 修改ci/ueditor/ueditor.config.js
var URL = window.UEDITOR_HOME_URL || getUEBasePath();
UEDITOR_HOME_URL: URL
serverUrl: URL + "php/controller.php"
修改为
var URL = window.UEDITOR_HOME_URL || "/ci/ueditor/";
UEDITOR_HOME_URL: "/ci/ueditor/"
serverUrl: "/ci/ueditor/php/controller.php"
4. 前端配置
在你所要集成编辑器的前端页面添加如下语句
<body>
<!-- 配置文件 -->
<script type="text/javascript" src="<?php echo base_url() ?>ueditor/ueditor.config.js"></script>
<!-- 编辑器源码文件 -->
<script type="text/javascript" src="<?php echo base_url() ?>ueditor/ueditor.all.js"></script>
<!-- 实例化编辑器 -->
<script type="text/javascript">
var editor = UE.getEditor('container');//container为表单的id，可在同一页面实例化多个编辑器
</script>
<form action="server.php" method="post"> /* serve.php为你点击提交表单的的链接 */
<!-- 加载编辑器的容器 -->
<script id="container" name="content" type="text/plain">
这里写你的初始化内容
</script>
</form>
</body>
注意：如需自定义工具栏内容，在实例化编辑器时修改以下代码
var editor = UE.getEditor('container', {
toolbars: [
['fullscreen', 'source', 'undo', 'redo', 'bold', 'italic',
'underline','fontborder', 'backcolor','insertcode', 'fontsize', 'fontfamily',
'justifyleft', 'justifyright','justifycenter', 'simpleupload',
'insertimage','justifyjustify',
'strikethrough','superscript', 'subscript', 'removeformat',
'formatmatch','autotypeset', 'blockquote', 'pasteplain', '|',
'forecolor', 'backcolor','insertorderedlist', 'insertunorderedlist',
'selectall', 'cleardoc', 'inserttable', 'emotion', 'help']
]
});
另附完整工具栏如下：
toolbars: [ [ ‘anchor’, //锚点 ‘undo’, //撤销 ‘redo’, //重做 ‘bold’, //加粗
‘indent’, //首行缩进 ‘snapscreen’, //截图 ‘italic’, //斜体 ‘underline’, //下划线
‘strikethrough’, //删除线 ‘subscript’, //下标 ‘fontborder’, //字符边框
‘superscript’, //上标 ‘formatmatch’, //格式刷 ‘source’, //源代码 ‘blockquote’,
//引用 ‘pasteplain’, //纯文本粘贴模式 ‘selectall’, //全选 ‘print’, //打印
‘preview’, //预览 ‘horizontal’, //分隔线 ‘removeformat’, //清除格式 ‘time’,
//时间 ‘date’, //日期 ‘unlink’, //取消链接 ‘insertrow’, //前插入行 ‘insertcol’,
//前插入列 ‘mergeright’, //右合并单元格 ‘mergedown’, //下合并单元格 ‘deleterow’, //删除行
‘deletecol’, //删除列 ‘splittorows’, //拆分成行 ‘splittocols’, //拆分成列
‘splittocells’, //完全拆分单元格 ‘deletecaption’, //删除表格标题 ‘inserttitle’,
//插入标题 ‘mergecells’, //合并多个单元格 ‘deletetable’, //删除表格 ‘cleardoc’,
//清空文档 ‘insertparagraphbeforetable’, //“表格前插入行” ‘insertcode’, //代码语言
‘fontfamily’, //字体 ‘fontsize’, //字号 ‘paragraph’, //段落格式
‘simpleupload’, //单图上传 ‘insertimage’, //多图上传 ‘edittable’, //表格属性
‘edittd’, //单元格属性 ‘link’, //超链接 ‘emotion’, //表情 ‘spechars’, //特殊字符
‘searchreplace’, //查询替换 ‘map’, //Baidu地图 ‘gmap’, //Google地图
‘insertvideo’, //视频 ‘help’, //帮助 ‘justifyleft’, //居左对齐 ‘justifyright’,
//居右对齐 ‘justifycenter’, //居中对齐 ‘justifyjustify’, //两端对齐 ‘forecolor’,
//字体颜色 ‘backcolor’, //背景色 ‘insertorderedlist’, //有序列表
‘insertunorderedlist’, //无序列表 ‘fullscreen’, //全屏 ‘directionalityltr’,
//从左向右输入 ‘directionalityrtl’, //从右向左输入 ‘rowspacingtop’, //段前距
‘rowspacingbottom’, //段后距 ‘pagebreak’, //分页 ‘insertframe’, //插入Iframe
‘imagenone’, //默认 ‘imageleft’, //左浮动 ‘imageright’, //右浮动 ‘attachment’,
//附件 ‘imagecenter’, //居中 ‘wordimage’, //图片转存 ‘lineheight’, //行间距
'edittip ', //编辑提示 ‘customstyle’, //自定义标题 ‘autotypeset’, //自动排版
‘webapp’, //百度应用 ‘touppercase’, //字母大写 ‘tolowercase’, //字母小写
‘background’, //背景 ‘template’, //模板 ‘scrawl’, //涂鸦 ‘music’, //音乐
‘inserttable’, //插入表格 ‘drafts’, // 从草稿箱加载 ‘charts’, // 图表 ] ]
5. 服务端整合
现在在前端已经可以成功显示出UEditor编辑器了，接下来我们来进行服务端整合以实现上传功能。首先在CI框架的controllers目录下创建名为ueditorup的.php文件并在此文件创建同名的类（UeditorUp），百度编辑器的所有上传功能都将在这个类里实现（图片、涂鸦、视频，附件上传）。
然后我们需要将Uploader.class.php放入CI框架的libraries目录下，并更名为Myuploader.php，然后将该类提供的构造方法替换掉。这是为了与前端编辑器上传功能完美衔接，所以没有使用CI框架的上传处理功能。不过为了让上传更加安全，增加了上传文件的MIME类型判断，判断代码就直接来自CI框架的上传类，配置都放在mimeconfig.php配置文件中。
替换构造方法为：
public function __construct()
{
}
public function Init($fileField , $config , $base64 = false)
{
$this->fileField = $fileField;
$this->config = $config;
$this->stateInfo = $this->stateMap[ 0 ];
$this->upFile( $base64 );
}
6. 修改上传路径
找到ueditor/php/config.json文件，可以看到所有配置项都有明确注释，默认上传路径为根目录下/ueditor/php/upload/image/文件夹中，如果遇见问题可以参照官方文档 http://fex.baidu.com/ueditor/#server-deploy 中的例子进行配置。
6332
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
