帝国CMS您现在的位置是:首页 > 博客日志 > 帝国CMS

帝国CMS7.5整合ueditor 1.4.3百度编辑器教程

<a href='mailto:'>微wx笑</a>的头像微wx笑2019-06-20 16:28:17帝国CMS人已围观关键字:帝国cms,ueditor

简介帝国CMS7.5的编辑器有多少人喜欢?我不知道,反正我是非常的不喜欢!首先一个最关键的问题就是不支持图片的粘贴上传,这太不方便了。然后就是UI和其它的功能方面也不是很满意,个人对编辑器这块也是有些了解的,也用过不少,但个人感觉还是UEditor好用一些,所以决定换上ueditor 1.4.3。

帝国CMS7.5的编辑器有多少人喜欢?我不知道,反正我是非常的不喜欢!首先一个最关键的问题就是不支持图片的粘贴上传,这太不方便了。然后就是UI和其它的功能方面也不是很满意,个人对编辑器这块也是有些了解的,也用过不少,但个人感觉还是UEditor好用一些,所以决定换上ueditor 1.4.3。5Em编程技术_踩坑日志_进阶指南 - 无知人生


5Em编程技术_踩坑日志_进阶指南 - 无知人生

更换方法5Em编程技术_踩坑日志_进阶指南 - 无知人生

主要是参考:帝国CMS7.5整合ueditor 1.4.3百度编辑器教程 5Em编程技术_踩坑日志_进阶指南 - 无知人生

1、下载ueditor 1.4.35Em编程技术_踩坑日志_进阶指南 - 无知人生

他是提供了一个整合过的版本提供下载,个人觉得只能做个参照,编辑器的文件还是要使用官方下载的,当然是要下载 php版本。UEditor - 下载5Em编程技术_踩坑日志_进阶指南 - 无知人生

下载页面提到的:5Em编程技术_踩坑日志_进阶指南 - 无知人生

UEditor 所提供的所有后端代码都仅为 DEMO 作用,切不可直接使用到生产环境中,目前已知 php 的代码会存在 ssrf 的安全漏洞。修复方式:使用最新的 Uploader https://github.com/fex-team/ueditor/blob/dev-1.5.0/php/Uploader.class.php5Em编程技术_踩坑日志_进阶指南 - 无知人生

文件已经找不到了,应该是移动到了:https://github.com/fex-team/ueditor/blob/dev-2.0.0/php/Uploader.class.php5Em编程技术_踩坑日志_进阶指南 - 无知人生

查看了一下 ueditor 1.4.3 版本中的 Uploader.class.php 时间是16年8月10日,应该是较新的版本,所以也没有做替换,有哪位高手可以测试一下是否还存在ssrf漏洞。5Em编程技术_踩坑日志_进阶指南 - 无知人生

2、上传并解压到 /e/extend/ 目录下5Em编程技术_踩坑日志_进阶指南 - 无知人生

当然你可以直接在服务哭上下载并解压;
5Em编程技术_踩坑日志_进阶指南 - 无知人生

如果你是下载到本地,再上传到服务器,那么最好是上传之后再解压,否则的话上传过程可能会非常的慢。5Em编程技术_踩坑日志_进阶指南 - 无知人生

3、编辑配置文件5Em编程技术_踩坑日志_进阶指南 - 无知人生

我的配置文件位置在:/e/extend/ueditor/php/config.json5Em编程技术_踩坑日志_进阶指南 - 无知人生

主要是修改:5Em编程技术_踩坑日志_进阶指南 - 无知人生

    "imageUrlPrefix": "https://www.ivu4e.com", /* 图片访问路径前缀 */
    "imagePathFormat": "/ue-upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */

后面还有:videoPathFormat,filePathFormat 等,用到的话可以一并修改了。5Em编程技术_踩坑日志_进阶指南 - 无知人生

4、登录帝国CMS后台,单击“系统”-“数据表与系统模型”-“管理数据表”-在你使用的系统数据表点击“管理字段”(默认是新闻系统数据表,小编使用的是文章系统数据表,所以就修改文章系统数据表的“管理字段”)-“修改newstext字段”下面的“输入表单替换html代码(增加字段时请留空)”5Em编程技术_踩坑日志_进阶指南 - 无知人生

复制粘贴以下代码提交即可:5Em编程技术_踩坑日志_进阶指南 - 无知人生

<?php
$ziduan='newstext';//编辑器使用的字段名称
if($enews=='MAddInfo' || $enews=='MEditInfo'){//前台投稿
$qiantai=1;
$ziduanzhi=$ecmsfirstpost==1?"":DoReqValue($mid,$ziduan,stripSlashes($r[$ziduan]));
}else{//后台
$qiantai=0;
$ziduanzhi=$ecmsfirstpost==1?"":stripSlashes($r[$ziduan]);
}
?>
<script>var classid='<?=$classid?>',infoid='<?=$id?>',filepass='<?=$filepass?>',ehash='<?=$ecms_hashur[ehref]?>',qiantai='<?=$qiantai?>';//把参数传给编辑器,增加支持7.2版本的金刚模式</script>
<script type="text/javascript" charset="utf-8" src="<?=$public_r['newsurl']?>e/extend/ueditor/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="<?=$public_r['newsurl']?>e/extend/ueditor/ueditor.all.min.js"></script>
<script type="text/javascript" charset="utf-8" src="<?=$public_r['newsurl']?>e/extend/ueditor/lang/zh-cn/zh-cn.js"></script>
<textarea id="<?=$ziduan?>" name="<?=$ziduan?>"></textarea>
<script type="text/javascript">
<?=$ziduan?>=UE.getEditor('<?=$ziduan?>',{
serverUrl: "<?=$public_r['newsurl']?>e/extend/ueditor/php/controller.php",//自己的请求接口
//toolbars:Default,//工具栏配置文件,具体参考ueditor.toolbarconfig.js文件中说明
pageBreakTag:'',//帝国分页标签
initialFrameWidth:'100%',//编辑器宽
initialFrameHeight:300//编辑器高
//等等其它配置自行添加,参考UE默认配置文件复制修改即可
});
//自定义请求参数
<?=$ziduan?>.ready(function(){
<?=$ziduan?>.execCommand('serverparam',{
'filepass':'<?=$filepass?>',//修改时候是信息ID
'classid' :'<?=$classid?>',
'qiantai':<?=$qiantai?>
});

<?=$ziduan?>.setContent("<?= str_replace(array("\r\n", "\r", "\n"), "\\r\\n", addslashes($ziduanzhi))?>", false);
});
</script>
<table width="100%" border="0" cellpadding="3" cellspacing="1" bgcolor="#DBEAF5">
<tr height="25"> 
<td bgcolor="#FFFFFF"> <input name="dokey" type="checkbox" value="1"<?=$r[dokey]==1?' checked':''?>>
关键字替换&nbsp;&nbsp; <input name="copyimg" type="checkbox" id="copyimg" value="1">
远程保存图片(
<input name="mark" type="checkbox" id="mark" value="1">
<a href="SetEnews.php" target="_blank">加水印</a>)&nbsp;&nbsp; 
<input name="copyflash" type="checkbox" id="copyflash" value="1">
远程保存FLASH(地址前缀: 
<input name="qz_url" type="text" id="qz_url" size="">
)</td>
</tr>
<tr height="25">
<td bgcolor="#FFFFFF"><input name="repimgnexturl" type="checkbox" id="repimgnexturl" value="1"> 图片链接转为下一页&nbsp;&nbsp; <input name="autopage" type="checkbox" id="autopage" value="1">自动分页
,每 
<input name="autosize" type="text" id="autosize" value="5000" size="5">
个字节为一页&nbsp;&nbsp; 取第 
<input name="getfirsttitlepic" type="text" id="getfirsttitlepic" value="1" size="1">
张上传图为标题图片( 
<input name="getfirsttitlespic" type="checkbox" id="getfirsttitlespic" value="1">
缩略图: 宽 
<input name="getfirsttitlespicw" type="text" id="getfirsttitlespicw" size="3" value="<?=$public_r[spicwidth]?>">
*高
<input name="getfirsttitlespich" type="text" id="getfirsttitlespich" size="3" value="<?=$public_r[spicheight]?>">
)</td>
</tr>
</table>

做了几处修改:5Em编程技术_踩坑日志_进阶指南 - 无知人生

a、删除 5Em编程技术_踩坑日志_进阶指南 - 无知人生

e/extend/ueditor/ueditor.toolbarconfig.js" cdata_tag="script" _ue_custom_node_="true">

b、添加 5Em编程技术_踩坑日志_进阶指南 - 无知人生

e/extend/ueditor/lang/zh-cn/zh-cn.js" cdata_tag="script" _ue_custom_node_="true">

c、添加5Em编程技术_踩坑日志_进阶指南 - 无知人生

<?=$ziduan?>.setContent("<?= str_replace(array("\r\n", "\r", "\n"), "\\r\\n", addslashes($ziduanzhi))?>", false);

解决修改时不能加载已有内容的问题。5Em编程技术_踩坑日志_进阶指南 - 无知人生


5Em编程技术_踩坑日志_进阶指南 - 无知人生

5、修改 controller.php 文件5Em编程技术_踩坑日志_进阶指南 - 无知人生

为了安全,要添加一些验证,代码是根据参考文章中的修改的,我在整合的过程中完全使用参考文章中提供的代码上传文件失败,提示没有权限或创建目录失败,所以删除了一部分代码。5Em编程技术_踩坑日志_进阶指南 - 无知人生

修改并格式化之后的完整代码如下:
5Em编程技术_踩坑日志_进阶指南 - 无知人生

<?php
//header('Access-Control-Allow-Origin: http://www.baidu.com'); //设置http://www.baidu.com允许跨域访问
//header('Access-Control-Allow-Headers: X-Requested-With,X_Requested_With'); //设置允许的跨域header
date_default_timezone_set("Asia/chongqing");
error_reporting(0); //E_ERROR
header("Content-Type: text/html; charset=utf-8");
require('../../../class/connect.php'); //引入数据库配置文件和公共函数文件
require('../../../class/db_sql.php'); //引入数据库操作文件
require('../../../data/dbcache/class.php'); //栏目缓存
$CONFIG = json_decode(preg_replace("/\/\*[\s\S]+?\*\//", "", file_get_contents("config.json")), true);
//begin
$link=db_connect(); //连接MYSQL
$empire=new mysqlquery(); //声明数据库操作
$qiantai=(int)$_GET['qiantai'];//是否前台
if($qiantai){
  $userid= (int)getcvar('mluserid');
  $username=RepPostVar(getcvar('mlusername'));
  $user_fj='[Member]'.$username;
}else{
  $userid=getcvar('loginuserid',1);
  $username=getcvar('loginusername',1);
  $rnd=getcvar('loginrnd',1);
  $adminr=$empire->fetch1("select userid,groupid,classid,userprikey from {$dbtbpre}enewsuser where userid='$userid' and username='".$username."' and rnd='".$rnd."' and checked=0 limit 1");
  $user_fj=$username;
}

$classid= (int)$_GET['classid'];
$filepass= (int)$_GET['filepass'];
$action=RepPostVar($_GET['action']);
//验证权限并用帝国的配置项
if($action!='config')
{
  //获取配置
  $pr=$empire->fetch1("select * from {$dbtbpre}enewspublic");
  $check=check();
  if($check){
      echo $check;exit();
  }else{//通过验证用帝国配置项及目录等
    if($qiantai){
      //前台大小 后缀等限制
      $qaddtransize=$public_r['qaddtransize']*1024;
      $CONFIG['imageMaxSize'] = $qaddtransize;
      $CONFIG['scrawlMaxSize'] = $qaddtransize;
      $CONFIG['catcherMaxSize'] = $qaddtransize;
      $qaddtranimgtype = substr($pr['qaddtranimgtype'],1,-1);
      $qaddtranimgtype = explode('|',$qaddtranimgtype);
      $CONFIG['imageAllowFiles'] = $qaddtranimgtype;
      $CONFIG['imageManagerAllowFiles'] = $qaddtranimgtype;
      $CONFIG['catcherAllowFiles'] = $qaddtranimgtype;

      $qaddtranfilesize = $pr['qaddtranfilesize']*1024;
      $CONFIG['fileMaxSize'] = $qaddtranfilesize;
      $CONFIG['videoMaxSize'] = $qaddtranfilesize;
      $qaddtranfiletype = substr($pr['qaddtranfiletype'],1,-1);
      $qaddtranfiletype = explode('|',$qaddtranfiletype);
      $CONFIG['fileAllowFiles'] = $qaddtranfiletype;
      $CONFIG['fileManagerAllowFiles'] = $qaddtranfiletype;
    }else{
      //后台大小 后缀等限制
      $filesize = $public_r['filesize']*1024;
      $CONFIG['imageMaxSize']=$filesize;
      $CONFIG['scrawlMaxSize']=$filesize;
      $CONFIG['catcherMaxSize']=$filesize;
      $CONFIG['videoMaxSize']=$filesize;
      $CONFIG['fileMaxSize']=$filesize;
      $filetype = substr($pr['filetype'],1,-1);
      $filetype = explode('|',$filetype);
      $CONFIG['fileAllowFiles']=$filetype;
      $CONFIG['fileManagerAllowFiles'] = $filetype;
    }
  }
}

//验证函数
function check(){
  global $adminr,$dbtbpre,$action,$empire,$pr,$qiantai;
  if($qiantai==1){//前台的验证
    if($pr['addnews_ok']==1)
    {
        $error='{"state": "网站已关闭投稿功能!"}';
    }
    else if(($action=='uploadimage'||$action=='uploadscrawl'||$action=='catchimage')&&(!$pr['qaddtran']))
    {
        $error='{"state": "网站已关闭上传图片功能!"}';
    }
    else if(($action=='uploadvideo'||$action=='uploadfile')&&!$pr['qaddtranfile'])
    {
        $error='{"state": "网站已关闭上传附件功能!"}';
    }
  }else{//后台的验证
    if($adminr){
      //通过验证
    }else{
      $error='{"state": "请重新登录"}';
    }
  }
  return $error;
}
//end

switch ($action) {
    case 'config':
        $result =  json_encode($CONFIG);
        break;

    /* 上传图片 */
    case 'uploadimage':
    /* 上传涂鸦 */
    case 'uploadscrawl':
    /* 上传视频 */
    case 'uploadvideo':
    /* 上传文件 */
    case 'uploadfile':
        $result = include("action_upload.php");
        break;

    /* 列出图片 */
    case 'listimage':
        $result = include("action_list.php");
        break;
    /* 列出文件 */
    case 'listfile':
        $result = include("action_list.php");
        break;

    /* 抓取远程文件 */
    case 'catchimage':
        $result = include("action_crawler.php");
        break;

    default:
        $result = json_encode(array(
            'state'=> '请求地址出错'
        ));
        break;
}

/* 输出结果 */
if (isset($_GET["callback"])) {
    if (preg_match("/^[\w_]+$/", $_GET["callback"])) {
        echo htmlspecialchars($_GET["callback"]) . '(' . $result . ')';
    } else {
        echo json_encode(array(
            'state'=> 'callback参数不合法'
        ));
    }
} else {
    echo $result;
}

变量都是拼音,看不惯,但也懒的改了。
5Em编程技术_踩坑日志_进阶指南 - 无知人生


5Em编程技术_踩坑日志_进阶指南 - 无知人生

基本就是这样,貌似也不难。5Em编程技术_踩坑日志_进阶指南 - 无知人生


5Em编程技术_踩坑日志_进阶指南 - 无知人生

但还是存在一个问题,上传的图片没有进入数据表,取第N张上传图为标题图片的功能失效了。5Em编程技术_踩坑日志_进阶指南 - 无知人生


5Em编程技术_踩坑日志_进阶指南 - 无知人生

相关:5Em编程技术_踩坑日志_进阶指南 - 无知人生

另外 UEditor 官网上的插件页面有一个项目:UEditor深度整合帝国ECMSUEditor提供非常完善的后端通信API接口,使得UE编辑器整合CMS项目相当简单方便。所有图片、附件、视频等文件存放目录与后台数据记录,都延续使用ECMS的存放方式。本项目将持续已插件形式更新最新的UEditor和ECMS。5Em编程技术_踩坑日志_进阶指南 - 无知人生

本文由 微wx笑 创作,采用 CC BY-NC 4.0 许可协议。 非商业性使用可自由转载、引用、甚至修改,但需署名作者且注明出处。

很赞哦! () 有话说 ()

站点信息

  • 建站时间:2018-10-24
  • 服务期限阿里云ECS 2027年到期
  • 主题模板:基于《今夕何夕》修改
  • 文章统计:198篇
  • 文章评论:27条
  • 文章阅读:2308次
  • 文章点赞:914次
  • 微信公众号:扫描二维码,关注我们
  • 微信公众号-微wx笑