替换dedeeims的编辑器，增加dede批量图片上传功能

2011年12月10日 发表评论 阅读评论

点击进入寒风网网站建设分类今天寒风突然发现dedecms有个比较大的更新，主站和论坛都挂出来了，版本号为5.7sp1。其中的一个更新让我眼前一亮，那就是批量上传图片功能

可能大家知道，dede以前就有批量上传，但只有图集里面有，dedeeims里面也有，是在产品图片里面。使用的是swfupload，但没有与编辑器整合

今天下载这个v5.7sp1本地调试后发现还不错，有两个问题：

1. 按钮提示文字和链接的中文字都是乱码，看了一下对应文件编码，为gb2312（下载的为utf-8）。总感觉织梦每次更新都有一些没做好的细节。

2.测试了上传没问题，但批量上传突破后插入图片到编辑器和删除图片居然只支持ie系列浏览器！！！-_-||| 狂汗！

先搁置这两个问题，研究了一下怎么把织梦的这个新功能移植到dedeeims，以下贴出详细方法：

1. 后台核心设置，Html编辑器选项（目前仅支持fck）：改为ckeditor；

2. 复制dede5.7sp1里面的include/ckeditor文件夹到dedeeims的include文件夹；

3. 修改include/inc/inc_fun_funAdmin.php文件， 替换函数SpGetEditor：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100

function SpGetEditor($fname,$fvalue,$nheight="350",$etype="Basic",$gtype="print",$isfullpage="false",$bbcode=false)
{
    global $cfg_ckeditor_initialized;
    if(!isset($GLOBALS['cfg_html_editor']))
    {
        $GLOBALS['cfg_html_editor']='fck';
    }
    if($gtype=="")
    {
        $gtype = "print";
    }
    if($GLOBALS['cfg_html_editor']=='fck')
    {
        require_once(DEDEINC.'/FCKeditor/fckeditor.php');
        $fck = new FCKeditor($fname);
        $fck->BasePath        = $GLOBALS['cfg_cmspath'].'/include/FCKeditor/' ;
        $fck->Width        = '100%' ;
        $fck->Height        = $nheight ;
        $fck->ToolbarSet    = $etype ;
        $fck->Config['FullPage'] = $isfullpage;
        if($GLOBALS['cfg_fck_xhtml']=='Y')
        {
            $fck->Config['EnableXHTML'] = 'true';
            $fck->Config['EnableSourceXHTML'] = 'true';
        }
        $fck->Value = $fvalue ;
        if($gtype=="print")
        {
            $fck->Create();
        }
        else
        {
            return $fck->CreateHtml();
        }
    }
    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;
        }
    }
    else { 
        /*
        // ------------------------------------------------------------------------
        // 当前版本,暂时取消dedehtml编辑器的支持
        // ------------------------------------------------------------------------
        require_once(DEDEINC.'/htmledit/dede_editor.php');
        $ded = new DedeEditor($fname);
        $ded->BasePath        = $GLOBALS['cfg_cmspath'].'/include/htmledit/' ;
        $ded->Width        = '100%' ;
        $ded->Height        = $nheight ;
        $ded->ToolbarSet = strtolower($etype);
        $ded->Value = $fvalue ;
        if($gtype=="print")
        {
            $ded->Create();
        }
        else
        {
            return $ded->CreateHtml();
        }
        */
    }
}

4. 后台dede/templets/article_add,article_edit模版文件，加入：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<style type="text/css">
<!--
body { background-image: url(images/allbg.gif); }
.multipic {
	border: 1px dashed #FC6;
}
.albCt {
	border-bottom: 1px dashed #FC0;
	margin-bottom: 10px;
	padding-bottom:10px;
}
.albCt img{
	cursor:pointer;
}
-->
</style>
<script type="text/javascript" src="../images/swfupload/swfupload.js"></script>
<script type="text/javascript"src="js/handlers.js"></script>
<script type="text/javascript" src="js/calendar/calendar.js"></script>

5. 后台dede/templets/article_add,article_edit里面的js改成：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103

<script language="javascript">
<!--
var swfu = null;
var arctype = 'article';
function checkSubmit()
{
	if(document.form1.title.value==""){
		alert("文章标题不能为空！");
		return false;
	}
	if(document.form1.typeid.value==0){//article_edit.htm可以不加这个判断
		alert("请选择档案的主类别！");
		return false;
	}
}
window.onload = function ()
{
	swfu = new SWFUpload(
	{
		// Backend Settings
		upload_url: "swfupload.php",
		post_params: {"PHPSESSID": "<?php echo session_id(); ?>", "dopost" : "", "arctype" : arctype},
 
		// File Upload Settings
		file_size_limit : "2 MB",	// 2MB
		file_types : "*.jpg; *.gif; *.png",
		file_types_description : "选择 JPEG/GIF/PNG 格式图片",
		file_upload_limit : "0",
 
		file_queue_error_handler : fileQueueError,
		file_dialog_complete_handler : fileDialogComplete,
		upload_progress_handler : uploadProgress,
		upload_error_handler : uploadError,
		upload_success_handler : uploadSuccess,
		upload_complete_handler : uploadComplete,
 
		button_image_url : "../images/SmallSpyGlassWithTransperancy_17x18.png",
		button_placeholder_id : "spanButtonPlaceholder",
		button_width: '100%',
		button_height: 26,
		button_text : '<div class="button" style="background-color:#E5F1CF; height:26px; text-align:center; line-height:26px">上传图片(可多选)</div>',
		button_text_style : '',
		button_text_top_padding: 0,
		button_text_left_padding: 10,
		button_window_mode: SWFUpload.WINDOW_MODE.TRANSPARENT,
		button_cursor: SWFUpload.CURSOR.HAND,
 
		// Flash Settings
		flash_url : "../images/swfupload/swfupload.swf",
 
		custom_settings : {
			upload_target : "divFileProgressContainer"
		},
 
		// Debug Settings
		debug: false
	});
};
 
function addtoEdit(pid)
{
	jQuery.get('swfupload.php?dopost=addtoedit&id=' + pid, function(data)
	{
		var picTitle = jQuery('input[name="picinfook'+pid+'"]').val();
		var picHTML = '<img src="'+data+'" alt="'+picTitle+'"/>';
		CKEDITOR.instances.body.insertHtml(picHTML);
	});
}
 
//删除已经上传的图片
function delAlbPic(pid){
	// 同步删除编辑器中插入的图片
	jQuery("#__tmpbody").html();
	jQuery.get('swfupload.php?dopost=addtoedit&id=' + pid, function(data)
	{
		var iptbody = CKEDITOR.instances.body.getData();
		jQuery("#__tmpbody").html(iptbody);
		jQuery("#__tmpbody").find('img').each(function()
		{
			if(jQuery(this).attr('src') == data)
			{
				//alert(data);
				jQuery(this).remove();
			}
		});
		CKEDITOR.instances.body.setData(jQuery("#__tmpbody").html()); 
		jQuery("#__tmpbody").html();
		var tgobj = $Obj('albCtok'+pid);
		var myajax = new DedeAjax(tgobj);
		myajax.SendGet2('swfupload.php?dopost=del&id='+pid);
		$Obj('thumbnails').removeChild(tgobj);
	});
}
 
//删除已经上传的图片(编辑时用)
function delAlbPicOld(picfile, pid){
	var tgobj = $Obj('albold'+pid);
	var myajax = new DedeAjax(tgobj);
	myajax.SendGet2('swfupload.php?dopost=delold&picfile='+picfile);
	$Obj('thumbnailsEdit').removeChild(tgobj);
}
-->
</script>

6. 后台dede/templets/article_add.htm,article_edit.htm,编辑器调用 格右边加入:

1
2
3
4
5
6
7

      <td width="255" align="center" valign="top" bgcolor="#FFFFCC" id="mPic" style="display:none"><div class="multipic">
      <div style="display: block;background-color:#E5F1CF; height:26px">
								<span id="spanButtonPlaceholder"></span>
	  </div>
      <div id="divFileProgressContainer"></div>
      <div id="thumbnails" style="width: 254px; height: 535px; background-color: rgb(255, 255, 255); overflow-y: scroll;"></div>
      </div></td>

7. 拷贝v5.7sp1的dede/js/calendar文件夹到dedeeims的dede/js/

8. 替换dedeeims的dede/swfupload.php为v5.7sp1的

9. 替换dedeeims的include/dialog文件夹为v5.7sp1的

步骤很麻烦，修改比较多，但绝对有效果的，寒风还做了个安装版的，具体效果图这台电脑上木有，下次修改文章补上，顺便把所有修改了的文件打包发上来，嘿嘿~

兼容bug已经反馈到织梦论坛，现在寒风坐等织梦更新，再跟进

声明: 本文采用 BY-NC-SA 协议进行授权. 转载请注明转自: 替换dedeeims的编辑器，增加dede批量图片上传功能
  1. 懒人梦醒 | #1 | CHINA Mozilla Firefox 8.0.1 Windows XP
    21st 十二月 2011 6:23 下午

    又是技术啊。。。。看着都有点晕。。。 :11:

:9: :8: :7: :6: :5: :4: :3: :2: :1: :18: :17: :16: :15: :14: :13: :12: :11: :10: