phpcmsV9.5.8整合百度编辑器Ueditor1.4.3教程
最近在搞phpcms视频功能,官方的视频功能实在是坑,刚开始是想将优酷的上传功能集成到ckeditor,在coding上有个项目,上传已经集成好了,还没有做上传后视频的获取和显示
项目地址:https://coding.net/savokiss/melos.git
这个项目是可以在线演示的,有兴趣的同学可以私信我或者fork一下
今天偶然看到了百度的ueditor,看了一下有视频上传功能,可以满足小规模视频需求,所以就开始搞了,
网上看了很多教程有个别的缺点,不太适用于最新版v9,所以自己整理了一下:修改前注意备份
1. 下载Ueditor
官网:http://ueditor.baidu.com/website/download.html
2.解压到phpcms目录
将压缩包内文件夹改名为ueditor解压到phpcms目录下面的./statics/js/下,目录结构如下:
3.修改ueditor/php/config.json
全局替换,
- 如果是本地项目,将/ueditor/php/upload/替换为/网站文件夹/uploadfile/
- 如果是线上项目,将/ueditor/php/upload/替换为/uploadfile/
4.修改./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,将此行注释取消掉(默认的高度比较低)
注意:
1.如果需要自定义工具栏:
修改ueditor/ueditor.config.js配置文件,
,toorbars : [[ ********** ]]
这个工具栏图标你可以参照官方文档进行修改,去掉不需要的功能:http://fex.baidu.com/ueditor/#start-toolbar
2.附件没有按照phpcms的命名规则修改,
如果需要修改,在config.json文件中:
按如下替换:注意涉及到image,file,video,需要替换三次
uploadfile/{yyyy}/{mm}{dd}/{yyyy}{mm}{dd}{rand:6}
3.phpcms自带的ckeditor是上传附件的时候是操作数据库的,
所以后台附件管理有数据库模式,而咱没有写相关代码,所以如果需要管理附件只能用目录模式进行删除,这种情况下也就不需要注意路径问题了
4.本方法是在新安装的phpcms v9.5.8上面完成的,所以没有考虑已有附件在ueditor中的显示问题
如果是已存在的附件,需要替换如下图三个文件中的一些路径:
具体可以参考下帖对这三个文件的操作部分:http://bbs.phpcms.cn/thread-882637-1-1.html
5.关于上传的视频在IE下看不到的问题(2014.11.6更新)
参考这篇文章:http://blog.csdn.net/estelle_belle/article/details/40047443
在视频播放的页面或者header引入如下代码即可
- <!--[if IE]>
- <script src="http://api.html5media.info/1.1.4/html5media.min.js"></script>
- <![endif]-->
上述方法改过之后暂时没有发现问题,如果有问题随时更新,欢迎交流!
phpcmsV9.5.8整合百度编辑器Ueditor1.4.3教程的更多相关文章
- yii2整合百度编辑器umeditor
作者:白狼 出处:www.manks.top/article/yii2_umeditor 本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责 ...
- 帝国cms7.0整合百度编辑器ueditor教程
帝国cms7.0整合百度编辑器ueditor教程开始 1.根据自己使用的帝国cms版本编码下载对应的ueditor版本 下载地址 http://ueditor.baidu.com/website/do ...
- 帝国cms7.5整合百度编辑器ueditor教程
1.根据自己使用的帝国cms版本编码下载对应的ueditor版本 下载地址 http://ueditor.baidu.com/website/download.html#ueditor 2.解压附件, ...
- 百度编辑器ueditor1.4.3配置记录
我从官网下载的php文件,但是图片上传不能用,后来查找资料,打开ueditor下的php/controller.php,(其他环境选对应的文件夹)把时区设置按如下改个字母大小写,再打开该文件就正确返回 ...
- yii2解决百度编辑器umeditor图片上传问题
作者:白狼 出处:http://www.manks.top/article/yii2_umeditor_upload本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原 ...
- ThinkPHP3.1.3 整合 UEditor百度编辑器 图片上传
第一步.前端模板实例化百度编辑器 <js file='__ROOT__/Data/UEditor/ueditor.config.js' /> <js file='__ROOT__/D ...
- Javascript - ExtJs - 整合百度文章编辑器
ExtJs - 整合百度文章编辑器(ExtJs UEditor) 第一步:去官网下载最新版本的UEditor,UEditor下载. 第二步:在编辑器根目录创建一个Extjs-Editor.js,录入以 ...
- DEDECMS:DEDE整合(UEditor)百度编辑器以后,栏目内容、单页无法保存内容的bug处理方法
已经整合过百度编辑器的站长们或许会发现,在编辑单页文档和栏目内容的时候,百度编辑器不能够保存新增或已修改数据,经过排查后发现问题出现在catalog_edit.htm.catalog_add.htm这 ...
- springboot+layui 整合百度富文本编辑器ueditor入门使用教程(踩过的坑)
springboot+layui 整合百度富文本编辑器ueditor入门使用教程(踩过的坑) 写在前面: 富文本编辑器,Multi-function Text Editor, 简称 MTE, 是一 ...
随机推荐
- css3 中的transition和transform
我以前始终都把他搞反,或者是混淆.现在可以稍微小结下. Transition:CSS3中处理动画的一个样式:只涉及动画起始和终止两个状态.如果涉及到一个动画的各个时间或者状态,那就必须要用到的另外一个 ...
- FBX .NET
https://github.com/returnString/ManagedFBX http://fbx.codeplex.com/ http://code.openhub.net/project? ...
- php分页的实现
php常见分页有3种,一种是文字分页,比如说上一页,下一页之类的,还有一种数字分页,像1,2,3...之类的,这个比较简单,前者稍微复杂些.最后一种是他们2者结合. 下面是代码: 1 //获取当 ...
- SDK
IOS: iOS Application Life Cycle 应用程序生命周期 http://www.cnblogs.com/chenyg32/p/3873301.html iOS应用程序生命周期( ...
- How to convert any valid date string to a DateTime.
DateTimeFormatInfo pattern = new DateTimeFormatInfo() { ShortDatePattern = "your date pattern&q ...
- jQuery简单实现iframe的高度根据页面内容自适应的方法
同域下: //注意:下面的代码是放在和iframe同一个页面中调用 $("#myiframe").load(function () { var myiframeH = $(this ...
- python 占位符 %s Format
1.百分号方式 %[(name)][flags][width].[precision]typecode (name) 可选,用于选择指定的key flags 可选,可供选择 ...
- realloc,malloc,calloc函数的区别
from:http://www.cnblogs.com/BlueTzar/articles/1136549.html realloc,malloc,calloc的区别 三个函数的申明分别是: void ...
- oracle vm virtualbox右ctrl切换显示模式
转自: http://blog.csdn.net/lyc_daniel/article/details/44195515 virtualbox里面有个HOME键,注意这个HOME键不一定是键盘上的HO ...
- HTML5语义化标签
在HTML5中最基础也是比较好理解的也就是语义化标签了,,顾名思义语义化也就是可以直接读懂的标签~,这样我们在项目开发过程中不但自己不会因为5花8门的标签命名而伤脑筋,跟同事对接项目也会节约很多时间~ ...