当前位置: 首页 > PHPCMS&织梦dedeCMS > 正文

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编辑器操作详解:等您来吐槽!

PHPCMS V9整合百度UEditor编辑器操作详解:等您坐沙发呢!

发表评论

您必须 [ 登录 ] 才能发表留言!