zoukankan      html  css  js  c++  java
  • 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">
    ";
                $str .= "var editor = UE.getEditor('$textareaid');";
                $str .= '</script>';
    return $str;

    5.修改ueditor大小

    在ueditor/themes/default/css/ueditor.css中,

    找到/*UI工具栏、编辑区域、底部*/下面的css:.edui-default .edui-editor,在其中添加:

    auto!important;//用于ueditor工具栏的宽度自适应

    往下找到edui-editor-iframeholder,在其中也添加:

    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]-->

    上述方法改过之后暂时没有发现问题,如果有问题随时更新,欢迎交流!

  • 相关阅读:
    Spring--AOP
    Database--事务
    Neo4j--UNIQUE约束
    Neo4j--INDEX索引
    排序算法 目录
    数据结构 目录
    设计模式 目录
    建造者模式及应用举例
    模板模式以及应用举例
    真·随笔
  • 原文地址:https://www.cnblogs.com/savokiss/p/4076958.html
Copyright © 2011-2022 走看看