关闭

dedecms4.7完美整合ueditor1.4.3

2015-10-16 14:53 阅读量:

 经常用织梦dedecms的朋友最反感的应该就是dedecms的编辑器了,图片上传麻烦,代码乱,不好整理等各种问题。。

ueditor1.4.3比以往的版本好用很多,最明显的改进有如下几点:

1.最大的改进就是支持chrome浏览器下的中文输入,以前在chrome下输入中文是不行的(我用的是gbk版本)。

2.配置相当简单第一次折腾ueditor花了几天事件才完全将图片和文件上传搞定,这次只花了一个多小时。

3.文字格式更合理,以前如果上一行文字是粗体,按回车进入下一行还是粗体。现在不是了。

*个人感觉批量上传图片的顺序好像得到优先顺序的解决了

 

教程如下(本人使用的是dedecms4.7 UTF版+ueditor1.4.3.1 UTF版)

一、下载 ueditor1.4.3 PHP版,解压后放到dedecms的/include目录中,建议命名为ueditor

1.gif

二、配置ueditor

1、DW打开编辑dedecms文件/include/inc/inc_fun_funAdmin.php

2.gif

2、查找以下内容

 else if($GLOBALS['cfg_html_editor']=='ckeditor')
    {
        require_once(DEDEINC.'/ckeditor/ckeditor.php');
        $CKEditor = new CKEditor();
        $CKEditor->basePath = $GLOBALS['cfg_cmspath'].'/include/ckeditor/' ;
        $config = $events = array();
        $config['extraPlugins'] = 'dedepage,multipic,addon';
  if($bbcode)
  {
   $CKEditor->initialized = true;
   $config['extraPlugins'] .= ',bbcode';
   $config['fontSize_sizes'] = '30/30%;50/50%;100/100%;120/120%;150/150%;200/200%;300/300%';
   $config['disableObjectResizing'] = 'true';
   $config['smiley_path'] = $GLOBALS['cfg_cmspath'].'/images/smiley/';
   // 获取表情信息
   require_once(DEDEDATA.'/smiley.data.php');
   $jsscript = array();
   foreach($GLOBALS['cfg_smileys'] as $key=>$val)
   {
    $config['smiley_images'][] = $val[0];
    $config['smiley_descriptions'][] = $val[3];
    $jsscript[] = '"'.$val[3].'":"'.$key.'"';
   }
   $jsscript = implode(',', $jsscript);
   echo jsScript('CKEDITOR.config.ubb_smiley = {'.$jsscript.'}');
  }
        $GLOBALS['tools'] = empty($toolbar[$etype])? $GLOBALS['tools'] : $toolbar[$etype] ;
        $config['toolbar'] = $GLOBALS['tools'];
        $config['height'] = $nheight;
        $config['skin'] = 'kama';
        $CKEditor->returnOutput = TRUE;
        $code = $CKEditor->editor($fname, $fvalue, $config, $events);
        if($gtype=="print")
        {
            echo $code;
        }
        else
        {
            return $code;
        }
    }

替换以下内容(注意路径,还有我用的是ueditor.all.min.js版)

else if($GLOBALS['cfg_html_editor']=='ueditor')
    {
        $fvalue = $fvalue=='' ? '<p></p>' : $fvalue;
        $code = '<script type="text/javascript" charset="GBK" src="'.$GLOBALS['cfg_cmspath'].'/include/ueditor/ueditor.config.js"></script>';
        $code .= '<script type="text/javascript" charset="GBK" src="'.$GLOBALS['cfg_cmspath'].'/include/ueditor/ueditor.all.min.js"></script>';
        $code .= '<link rel="stylesheet" type="text/css" href="'.$GLOBALS['cfg_cmspath'].'/include/ueditor/themes/default/css/ueditor.css"/>';
        //$code .= '<textarea name="'.$fname.'" id="'.$fname.'" style="width:100%;">'.$fvalue.'</textarea>';
        $code .= '<script type="text/plain" name="'.$fname.'" id="'.$fname.'">'.$fvalue.'</script>';
        if( !empty($toolbar[$etype]))
        {
            $code .= '<script type="text/javascript">UE.getEditor("'.$fname.'",{toolbars:[["Source","|",
        "bold", "italic", "underline","|","fontsize","forecolor","emotion","Undo", "Redo"]],initialFrameHeight:100});</script>';
        }
        else
        {
            $code .= '<script type="text/javascript">UE.getEditor("'.$fname.'",{initialFrameHeight:450});</script>';
        }          
   
        if($gtype=="print")
        {
            echo $code;
        }
        else
        {
            return $code;
        }
    }

3、修改Ueditor的配置

这主要是修改Ueditor保存图片等文件的时候的保存路径。

打开/include/ueditor/php/config.json文件:

按照文字提示修改路径,我修改后的配置如下,你完全可以采用我这种配置,这里的配置和具体网站几乎没啥关系:我主要修改的是附件的路径uploads

/* 前后端通信相关的配置,注释只允许使用多行方式 */
{
    /* 上传图片配置项 */
    "imageActionName": "uploadimage", /* 执行上传图片的action名称 */
    "imageFieldName": "upfile", /* 提交的图片表单名称 */
    "imageMaxSize": 4048000, /* 上传大小限制,单位B */
    "imageAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* 上传图片格式显示 */
    "imageCompressEnable": false, /* 是否压缩图片,默认是true */
    "imageCompressBorder": 1600, /* 图片压缩最长边限制 */
    "imageInsertAlign": "none", /* 插入的图片浮动方式 */
    "imageUrlPrefix": "", /* 图片访问路径前缀 */
    "imagePathFormat": "/uploads/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */
                                /* {filename} 会替换成原文件名,配置这项需要注意中文乱码问题 */
                                /* {rand:6} 会替换成随机数,后面的数字是随机数的位数 */
                                /* {time} 会替换成时间戳 */
                                /* {yyyy} 会替换成四位年份 */
                                /* {yy} 会替换成两位年份 */
                                /* {mm} 会替换成两位月份 */
                                /* {dd} 会替换成两位日期 */
                                /* {hh} 会替换成两位小时 */
                                /* {ii} 会替换成两位分钟 */
                                /* {ss} 会替换成两位秒 */
                                /* 非法字符 \ : * ? " < > | */
                                /* 具请体看线上文档: fex.baidu.com/ueditor/#use-format_upload_filename */
 
    /* 涂鸦图片上传配置项 */
    "scrawlActionName": "uploadscrawl", /* 执行上传涂鸦的action名称 */
    "scrawlFieldName": "upfile", /* 提交的图片表单名称 */
    "scrawlPathFormat": "/uploads/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */
    "scrawlMaxSize": 2048000, /* 上传大小限制,单位B */
    "scrawlUrlPrefix": "", /* 图片访问路径前缀 */
    "scrawlInsertAlign": "none",
 
    /* 截图工具上传 */
    "snapscreenActionName": "uploadimage", /* 执行上传截图的action名称 */
    "snapscreenPathFormat": "/uploads/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */
    "snapscreenUrlPrefix": "", /* 图片访问路径前缀 */
    "snapscreenInsertAlign": "none", /* 插入的图片浮动方式 */
 
    /* 抓取远程图片配置 */
    "catcherLocalDomain": ["127.0.0.1", "localhost", "img.baidu.com"],
    "catcherActionName": "catchimage", /* 执行抓取远程图片的action名称 */
    "catcherFieldName": "source", /* 提交的图片列表表单名称 */
    "catcherPathFormat": "/uploads/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */
    "catcherUrlPrefix": "", /* 图片访问路径前缀 */
    "catcherMaxSize": 2048000, /* 上传大小限制,单位B */
    "catcherAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* 抓取图片格式显示 */
 
    /* 上传视频配置 */
    "videoActionName": "uploadvideo", /* 执行上传视频的action名称 */
    "videoFieldName": "upfile", /* 提交的视频表单名称 */
    "videoPathFormat": "/uploads/video/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */
    "videoUrlPrefix": "", /* 视频访问路径前缀 */
    "videoMaxSize": 2048000, /* 上传大小限制,单位B,默认100MB */
    "videoAllowFiles": [
        ".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg",
        ".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid"], /* 上传视频格式显示 */
 
    /* 上传文件配置 */
    "fileActionName": "uploadfile", /* controller里,执行上传视频的action名称 */
    "fileFieldName": "upfile", /* 提交的文件表单名称 */
    "filePathFormat": "/uploads/file/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */
    "fileUrlPrefix": "", /* 文件访问路径前缀 */
    "fileMaxSize": 2048000, /* 上传大小限制,单位B,默认50MB */
    "fileAllowFiles": [
        ".png", ".jpg", ".jpeg", ".gif", ".bmp",
        ".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg",
        ".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid",
        ".rar", ".zip", ".tar", ".gz", ".7z", ".bz2", ".cab", ".iso",
        ".doc", ".docx", ".xls", ".xlsx", ".ppt", ".pptx", ".pdf", ".txt", ".md", ".xml"
    ], /* 上传文件格式显示 */
 
    /* 列出指定目录下的图片 */
    "imageManagerActionName": "listimage", /* 执行图片管理的action名称 */
    "imageManagerListPath": "/uploads/", /* 指定要列出图片的目录 */
    "imageManagerListSize": 20, /* 每次列出文件数量 */
    "imageManagerUrlPrefix": "", /* 图片访问路径前缀 */
    "imageManagerInsertAlign": "none", /* 插入的图片浮动方式 */
    "imageManagerAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* 列出的文件类型 */
 
    /* 列出指定目录下的文件 */
    "fileManagerActionName": "listfile", /* 执行文件管理的action名称 */
    "fileManagerListPath": "/uploads/file/", /* 指定要列出文件的目录 */
    "fileManagerUrlPrefix": "", /* 文件访问路径前缀 */
    "fileManagerListSize": 20, /* 每次列出文件数量 */
    "fileManagerAllowFiles": [
        ".png", ".jpg", ".jpeg", ".gif", ".bmp",
        ".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg",
        ".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid",
        ".rar", ".zip", ".tar", ".gz", ".7z", ".bz2", ".cab", ".iso",
        ".doc", ".docx", ".xls", ".xlsx", ".ppt", ".pptx", ".pdf", ".txt", ".md", ".xml"
    ] /* 列出的文件类型 */
 
}

4、增加文件或者图片上传之后,将附件插入到数据库的功能。

dede的所有文件上传都是会将文件信息保存到数据库中的,文件的信息将和上传的用户关联起来,而ueditor只是将文件上传了事。所以要达到dede默认编辑器的效果,还需要做一些修改。当然如果你觉得文件信息完全没有必要保存,这一步可以省了。

编辑/include/ueditor1.4.3/php/action_crawler.php文件,以下内容全部替换

<?php
/**
 * 抓取远程图片
 * User: Jinqn
 * Date: 14-04-14
 * Time: 下午19:18
 */
set_time_limit(0);
include("Uploader.class.php");
require_once(dirname(__file__).'/../../common.inc.php');
require_once(dirname(__file__).'/../../userlogin.class.php');
/* 上传配置 */
$config = array(
    "pathFormat" => $CONFIG['catcherPathFormat'],
    "maxSize" => $CONFIG['catcherMaxSize'],
    "allowFiles" => $CONFIG['catcherAllowFiles'],
    "oriName" => "remote.png"
);
$fieldName = $CONFIG['catcherFieldName'];
 
/* 抓取远程图片 */
$list = array();
if (isset($_POST[$fieldName])) {
    $source = $_POST[$fieldName];
} else {
    $source = $_GET[$fieldName];
}
foreach ($source as $imgUrl) {
    $item = new Uploader($imgUrl, $config, "remote");
    $info = $item->getFileInfo();
    array_push($list, array(
        "state" => $info["state"],
        "url" => $info["url"],
        "size" => $info["size"],
        "title" => htmlspecialchars($info["title"]),
        "original" => htmlspecialchars($info["original"]),
        "source" => htmlspecialchars($imgUrl)
    ));
    SaveUploadInfo($info);
}
 
/* 返回抓取数据 */
return json_encode(array(
    'state'=> count($list) ? 'SUCCESS':'ERROR',
    'list'=> $list
));
function SaveUploadInfo($info)
{
    global $dsql;
    $cuserLogin = new userLogin();
    $url = $info["url"];
    $filename = $info["title"];
    $imgwidthValue = "";
    $imgheightValue = "";
    $imgsize = $info["size"];
    $nowtme = time();
    $mid=$cuserLogin->getUserID();
    $inquery = "INSERT INTO `jcode_uploads`(arcid,title,url,mediatype,width,height,playtime,filesize,uptime,mid)
       VALUES ('0','$filename','$url','1','','','0','$imgsize','$nowtme','$mid'); ";
    $dsql->ExecuteNoneQuery($inquery);
    $fid = $dsql->GetLastID();
    AddMyAddon($fid, $filename);
    return;
}

还要编辑/include/ueditor1.4.3/php/action_upload.php文件,以下内容全部替换

<?php
/**
 * 上传附件和上传视频
 * User: Jinqn
 * Date: 14-04-09
 * Time: 上午10:17
 */
include "Uploader.class.php";
require_once(dirname(__file__).'/../../common.inc.php');
require_once(dirname(__file__).'/../../userlogin.class.php');
/* 上传配置 */
$base64 = "upload";
switch (htmlspecialchars($_GET['action'])) {
    case 'uploadimage':
        $config = array(
            "pathFormat" => $CONFIG['imagePathFormat'],
            "maxSize" => $CONFIG['imageMaxSize'],
            "allowFiles" => $CONFIG['imageAllowFiles']
        );
        $fieldName = $CONFIG['imageFieldName'];
        break;
    case 'uploadscrawl':
        $config = array(
            "pathFormat" => $CONFIG['scrawlPathFormat'],
            "maxSize" => $CONFIG['scrawlMaxSize'],
            "allowFiles" => $CONFIG['scrawlAllowFiles'],
            "oriName" => "scrawl.png"
        );
        $fieldName = $CONFIG['scrawlFieldName'];
        $base64 = "base64";
        break;
    case 'uploadvideo':
        $config = array(
            "pathFormat" => $CONFIG['videoPathFormat'],
            "maxSize" => $CONFIG['videoMaxSize'],
            "allowFiles" => $CONFIG['videoAllowFiles']
        );
        $fieldName = $CONFIG['videoFieldName'];
        break;
    case 'uploadfile':
    default:
        $config = array(
            "pathFormat" => $CONFIG['filePathFormat'],
            "maxSize" => $CONFIG['fileMaxSize'],
            "allowFiles" => $CONFIG['fileAllowFiles']
        );
        $fieldName = $CONFIG['fileFieldName'];
        break;
}
 
/* 生成上传实例对象并完成上传 */
$up = new Uploader($fieldName, $config, $base64);
$info = $up->getFileInfo();
//$info["url"] = str_replace("../","",$info[ "url" ]);
/**
 * 向浏览器返回数据json数据
 * {
 *   'url'      :'a.jpg',   //保存后的文件路径
 *   'title'    :'hello',   //文件描述,对图片来说在前端会添加到title属性上
 *   'original' :'b.jpg',   //原始文件名
 *   'state'    :'SUCCESS'  //上传状态,成功时返回SUCCESS,其他任何值将原样返回至图片上传框中
 * }
 */
SaveUploadInfo($info);
 
 
 
/**
 * 得到上传文件所对应的各个参数,数组结构
 * array(
 *     "state" => "",          //上传状态,上传成功时必须返回"SUCCESS"
 *     "url" => "",            //返回的地址
 *     "title" => "",          //新文件名
 *     "original" => "",       //原始文件名
 *     "type" => ""            //文件类型
 *     "size" => "",           //文件大小
 * )
 */
 
/* 返回数据 */
return json_encode($up->getFileInfo());
function SaveUploadInfo($info)
{
    global $dsql;
    $cuserLogin = new userLogin();
    $url = $info["url"];
    $filename = $info["title"];
    $imgwidthValue = "";
    $imgheightValue = "";
    $imgsize = $info["size"];
    $nowtme = time();
    $mid=$cuserLogin->getUserID();
    $inquery = "INSERT INTO `jcode_uploads`(arcid,title,url,mediatype,width,height,playtime,filesize,uptime,mid)
       VALUES ('0','$filename','$url','1','','','0','$imgsize','$nowtme','$mid'); ";
    $dsql->ExecuteNoneQuery($inquery);
    $fid = $dsql->GetLastID();
    AddMyAddon($fid, $filename);
  
}

三、设置dede使用ueditor1.4.3编辑器。。完工

QQ截图20151016152535.gif