首页 › 程序设计 › php

在dede中使用ueditor1.4.3

泡在网上的日子 / 文 发表于2014-12-18 17:44 次阅读 dedecms

上一次使用ueditor是一年前,都忘记是什么版本了,今天再去ueditor的官网发现新版本有较大改进,于是准备将它用在自己的dede网站中,ueditor1.4.3比以往的版本好用很多,最明显的改进有如下几点:

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

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

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

4.增加了一些新功能。

5.界面更漂亮。

整体的使用感觉就是更像一个本地编辑器了。如果你之前使用的是比较老的版本,这次升级是值得的。

本文将介绍在dede中如何使用ueditor1.4.3的php GBK版本。UTF-8版本应该是一样的。

首先下载ueditor1.4.3

到官网下载ueditor1.4.3,我这里下载的是php gbk版本,当然用在dede上肯定得下载php版本。

http://ueditor.baidu.com/website/download.html

QQ图片20141218171546.jpg

将下载下来的zip解压,为了方便我将得到的文件夹改名为ueditor1.4.3,然后将ueditor1.4.3文件夹整个放到/include/目录下面:

QQ图片20141218172126.jpg


之所以没有命名为ueditor是因为我想保留之前的老版本的ueditor编辑器。

Ueditor的配置

Ueditor的配置非常简单,只需要修改三处:

  1. 修改dede获取编辑器的函数SpGetEditor

在/include/inc/inc_fun_funAdmin.php中找到SpGetEditor,我们可以看到这里面有几个判断条件:else if($GLOBALS['cfg_html_editor']

=***,为了让dede支持ueditor1.4.3我们增加一个else if:

    else if($GLOBALS['cfg_html_editor']=='ueditor1.4.3')
    {
        $fvalue = $fvalue=='' ? '<p></p>' : $fvalue;
        $code = '<script type="text/javascript" charset="GBK" src="'.$GLOBALS['cfg_cmspath'].'/include/ueditor1.4.3/ueditor.config.js"></script>';
        $code .= '<script type="text/javascript" charset="GBK" src="'.$GLOBALS['cfg_cmspath'].'/include/ueditor1.4.3/ueditor.all.min.js"></script>';
        $code .= '<link rel="stylesheet" type="text/css" href="'.$GLOBALS['cfg_cmspath'].'/include/ueditor1.4.3/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;
        }
    }

这里的判断条件是$GLOBALS['cfg_html_editor']=='ueditor1.4.3', 注意里面引用的js路径需要修改成你自己的,我这里是/include/ueditor1.4.3/因为我的目录名称是ueditor1.4.3。

2.修改Ueditor的配置。

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

打开/include/ueditor1.4.3/php/config.json文件:

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

/* 前后端通信相关的配置,注释只允许使用多行方式 */
{
    /* 上传图片配置项 */
    "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"
    ] /* 列出的文件类型 */

}

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

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

这一步的修改主要是在相关位置增加

require_once(dirname(__file__).'/../../common.inc.php');
require_once(dirname(__file__).'/../../userlogin.class.php');

以支持获取到文章id以及用户信息。

同时增加插入到数据库的方法:

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_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);
 
}


修改系统设置

在系统的核心设置中将编辑器修改为ueditor1.4.3。

收藏 赞 (8) 踩 (3)
上一篇:dede 判断字段为空时不显示
有时候我们希望在某个标签所显示的字段为空时什么也不显示,比如下面这种情况: 转自:{dede:field name=source/}, 如果这篇文章是原创的,那么很显然显示的结果是“转自:”,这让用户以为你这篇文章没写完。 所以我们需要先判断当前字段的值,然后做相应
下一篇:DedeCMS提示你访问的用户可能已经被删除的问题
【问题描述】 当前使用的版本是DedeCMS V5.5的UTF8版本。库中已经注册了若干用户,从问答模块点击某用户名时却无法进入其个人空间,显示“你访问的用户可能已经被删除