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{}里面所有内容替换为:

 
 
  1. $str ='';
  2. if(!defined('EDITOR_INIT')) {
  3. $str .= '<script type="text/javascript" src="'.JS_PATH.'ueditor/ueditor.config.js"></script>';
  4. $str .= '<script type="text/javascript" src="'.JS_PATH.'ueditor/ueditor.all.js"></script>';
  5. $str .= '<script type="text/javascript" src="'.JS_PATH.'ueditor/ueditor.parse.js"></script>';
  6. $str .= '<link rel="stylesheet" href="'.JS_PATH.'ueditor/themes/default/css/ueditor.css"/>';
  7. define('EDITOR_INIT', 1);
  8. }
  9. $str .= "<script type=\"text/javascript\">\r\n";
  10. $str .= "var editor = UE.getEditor('$textareaid');";
  11. $str .= '</script>';
  12. 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文件。

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值