PHPCMS V9整合百度UEditor编辑器操作详解

最近的一个项目使用PHPCMS，而自带的ckeditor编辑器一点都不好用，于是就整合百度UEditor。支持图片批量上传,上传附件等功能，自己整理一下步骤如下，修改前请先备份。

1、下载Ueditor

官网：http://ueditor.baidu.com/website/download.html

2、上传ueditor到phpcms目录

将压缩包解压后改名为ueditor，上传到网站/statics/js/目录下，

3、修改文件上传路径

修改ueditor/php/config.json文件，全局替换（共 8处）
– 如果是本地项目，将/ueditor/php/upload/ 替换为 /网站文件夹/uploadfile/
– 如果是线上项目，将/ueditor/php/upload/ 替换为 /uploadfile/

4、修改phpcms默认编辑器ckeditor为Ueditor

修改/phpcms/libs/classes/form.class.php文件，把编辑器调用方法editor{}里面所有内容替换为：

$str ='';
if(!defined('EDITOR_INIT')) {
$str .= '<script type="text/javascript" src="'.JS_PATH.'ueditor/ueditor.config.js"></script>';
$str .= '<script type="text/javascript" src="'.JS_PATH.'ueditor/ueditor.all.js"></script>';
$str .= '<script type="text/javascript" src="'.JS_PATH.'ueditor/ueditor.parse.js"></script>';
$str .= '<link rel="stylesheet" href="'.JS_PATH.'ueditor/themes/default/css/ueditor.css"/>';
define('EDITOR_INIT', 1);
}
$str .= "<script type=\"text/javascript\">\r\n";
$str .= "var editor = UE.getEditor('$textareaid');";
$str .= '</script>';
return $str;

5、修改ueditor宽度

在ueditor/themes/default/css/ueditor.css中，找到/*UI工具栏、编辑区域、底部*/下面的css：.edui-default .edui-editor，在其中添加：
width:auto!important; //用于ueditor工具栏的宽度自适应
往下找到.edui-editor-iframeholder，在其中也添加：width:auto!important; //用于ueditor内容框宽度自适应

6、修改ueditor高度。
在ueditor/ueditor.config.js中，找到initialFrameHeight，将此行注释取消掉（默认的高度比较低）

后台展示效果
PHPCMS V9整合百度UEditor编辑器操作详解

其他注意事项：

1.如果需要自定义工具栏：修改ueditor/ueditor.config.js配置文件，toolbars: [[]]数组
这个工具栏图标你可以参照官方文档进行修改，去掉不需要的功能：http://fex.baidu.com/ueditor/#start-toolbar

2.上传的文件&图片没有按照phpcms的命名规则，如果需要修改ueditor/php/config.json文件：
上传图片、抓取远程图片、上传视频，为/uploadfile/{yyyy}/{mm}{dd}/{yyyy}{mm}{dd}{rand:6}，

不过本人喜欢按月份建立目录，如下：上传图片配置项 imagePathFormat： /uploadfile/{yyyy}{mm}/{yyyy}{mm}{dd}{rand:4} ，同时修改/phpcms/libs/classes/attachment.class.php 文件，第47行左右的缩略图和多图片上传路径设置为
$this->savepath = $this->upload_root.$this->upload_dir.date('Ym/');

列出指定目录下的图片 imageManagerListPath ，/uploadfile/
列出指定目录下的文件 fileManagerListPath ，/uploadfile/file/

3.phpcms自带的ckeditor是上传附件的时候是操作数据库的，所以后台附件管理有数据库模式，而咱没有写相关代码，所以如果需要管理附件只能用目录模式进行删除，这种情况下也就不需要注意路径问题了

4、如果需要修改编辑器里内容的样式，需要修改ueditor/themes/iframe.css文件。

PHPCMS V9整合百度UEditor编辑器操作详解

相关推荐