KindEditor修改图片上传

下面是步骤:
一、修改 kindeditor\plugins\image\image.js 文件
在77行的form表单中添加自己需要的表单内容
'<form class="ke-upload-area ke-form" method="post" enctype="multipart/form-data" target="' + target + '" action="' + K.addParam(uploadJson, 'dir=image') + '">',
//file
'<input type="hidden" name="hub_id" value="' + self.hub_id + '" />',
'<div class="ke-dialog-row">',
hiddenElements.join(''),
'<label style="width:60px;">' + lang.localUrl + '</label>',
'<input type="text" name="localUrl" class="ke-input-text" tabindex="-1" style="width:200px;" readonly="true" /> &nbsp;',
'<input type="button" class="ke-upload-button" value="' + lang.upload + '" />',
'</div>',
'<div class="ke-dialog-row">',
'<input type="radio" id="thum0" name="thum" value="0" checked="checked" /><label for="thum0">' + lang.thum0 + '</label>',
'<input type="radio" id="thum1" name="thum" value="1" /><label for="thum1">' + lang.thum1 + '</label>',
lang.thumw,
'<input type="text" name="thumw" value="500" size="4" />',
'<br />',
'<input type="radio" id="wm0" name="wm" value="0" checked="checked" /><label for="wm0">' + lang.wm0 + '</label>',
'<input type="radio" id="wm1" name="wm" value="1" /><label for="wm1">' + lang.wm1 + '</label>',
'<input type="radio" id="wm2" name="wm" value="2" /><label for="wm2">' + lang.wm2 + '</label>',
'<br />',
'<input type="radio" id="pos1" name="pos" value="1" /><label for="pos1">' + lang.watermarkPos1 + '</label>',
'<input type="radio" id="pos2" name="pos" value="2" /><label for="pos2">' + lang.watermarkPos2 + '</label>',
'<input type="radio" id="pos3" name="pos" value="3" /><label for="pos3">' + lang.watermarkPos3 + '</label>',
'<br />',
'<input type="radio" id="pos4" name="pos" value="4" /><label for="pos4">' + lang.watermarkPos4 + '</label>',
'<input type="radio" id="pos5" name="pos" value="5" /><label for="pos5">' + lang.watermarkPos5 + '</label>',
'<input type="radio" id="pos6" name="pos" value="6" /><label for="pos6">' + lang.watermarkPos6 + '</label>',
'<br />',
'<input type="radio" id="pos7" name="pos" value="7" /><label for="pos7">' + lang.watermarkPos7 + '</label>',
'<input type="radio" id="pos8" name="pos" value="8" /><label for="pos8">' + lang.watermarkPos8 + '</label>',
'<input type="radio" id="pos9" name="pos" value="9" checked="checked" /><label for="pos9">' + lang.watermarkPos9 + '</label>',
'<input type="radio" id="pos0" name="pos" value="0" /><label for="pos0">' + lang.watermarkPos0 + '</label>',
'</div>',
'</form>',


二、修改语言包
找到image部分的代码,添加自己需要的名称


1、kindeditor\lang\zh_CN.js文件
'image.remoteImage' : '网络图片',
'image.localImage' : '本地上传',
'image.remoteUrl' : '图片地址',
'image.localUrl' : '上传文件',
'image.size' : '图片大小',
'image.width' : '宽',
'image.height' : '高',
'image.resetSize' : '重置大小',
'image.align' : '对齐方式',
'image.defaultAlign' : '默认方式',
'image.leftAlign' : '左对齐',
'image.rightAlign' : '右对齐',
'image.imgTitle' : '图片说明',
'image.upload' : '浏览...',
'image.viewServer' : '图片空间',
'image.thum0' : '不缩略',
'image.thum1' : '缩略图',
'image.thumw' : '宽度',
'image.wm0' : '无水印',
'image.wm1' : '水印1',
'image.wm2' : '水印2',
'image.watermarkPos1' : '左上',
'image.watermarkPos2' : '中上',
'image.watermarkPos3' : '右上',
'image.watermarkPos4' : '左中',
'image.watermarkPos5' : '中中',
'image.watermarkPos6' : '右中',
'image.watermarkPos7' : '左下',
'image.watermarkPos8' : '中下',
'image.watermarkPos9' : '右下',
'image.watermarkPos0' : '随机',


2、kindeditor\lang\en.js文件
'image.remoteImage' : 'Insert URL',
'image.localImage' : 'Upload',
'image.remoteUrl' : 'URL',
'image.localUrl' : 'File',
'image.size' : 'Size',
'image.width' : 'Width',
'image.height' : 'Height',
'image.resetSize' : 'Reset dimensions',
'image.align' : 'Align',
'image.defaultAlign' : 'Default',
'image.leftAlign' : 'Left',
'image.rightAlign' : 'Right',
'image.imgTitle' : 'Title',
'image.upload' : 'Browse',
'image.viewServer' : 'Browse',
'image.thum0' : 'No Thumbnail',
'image.thum1' : 'Do Thumbnail',
'image.thumw' : 'Width',
'image.wm0' : 'nothing',
'image.wm1' : 'watermark1',
'image.wm2' : 'watermark2',
'image.watermarkPos1' : 'TopLeft',
'image.watermarkPos2' : 'TopCenter',
'image.watermarkPos3' : 'TopRight',
'image.watermarkPos4' : 'MiddleLeft',
'image.watermarkPos5' : 'MiddleCenter',
'image.watermarkPos6' : 'MiddleRight',
'image.watermarkPos7' : 'BottomLeft',
'image.watermarkPos8' : 'BottomCenter',
'image.watermarkPos9' : 'BottomRight',
'image.watermarkPos0' : 'Random',


三、修改php上传程序 kindeditor\php\upload_json.php
1、修改为自己的图片保存路径
//文件保存目录路径
$save_path = $php_path . '../attached/';
$save_path = '/var/www/html/aaa/images/';
//文件保存目录URL
$save_url = $php_url . '../attached/';
$save_url = 'http://www.xxx.com/images/';


2、接收表单数据
$thum  = intval($_POST['thum']);
$thumw = intval($_POST['thumw']);
$wm    = intval($_POST['wm']);
$pos   = intval($_POST['pos']);


处理数据
    #缩略图片
    if ( is_file( $file_path ) && $thum=='1' ){
        $thumw = $thumw ? $thumw : 500;
        resizeimage($file_path, $file_path, $thumw, 10000);
    }
    #添加水印
    if ( $wm == '1' && is_file( $file_path ) ){
        $watermark = '../../images/zjmark.png';
        imageWater($file_path,$watermark,$pos);
    }elseif ( $wm == '2' && is_file( $file_path ) ){
        $watermark = '../../images/automark.png';
        imageWater($file_path,$watermark,$pos);
    }






另附php缩略函数、水印函数。大家可以根据自己的需求修改。
function imageWater($sFile,$watermark,$pos=9){


    if($imType1 = getimagesize($sFile)){


        $imType2 = getimagesize($watermark);


        $imagex1 = $imType1[0];
        $imagey1 = $imType1[1];
        $type1   = $imType1[2];
       
        $imagex2 = $imType2[0];
        $imagey2 = $imType2[1];
        $type2   = $imType2[2];
       
        switch($type1) {
            case 1:
                $image1 = imagecreatefromgif($sFile);
                break;
            case 2:
                $image1 = imagecreatefromjpeg($sFile);
                break;
            case 3:
                $image1 = imagecreatefrompng($sFile);
                break;
            default:
        }
        switch($type2) {
            case 1:
                $image2 = imagecreatefromgif($watermark);
                break;
            case 2:
                $image2 = imagecreatefromjpeg($watermark);
                break;
            case 3:
                $image2 = imagecreatefrompng($watermark);
                break;
            default:
        }
       
        switch($pos)
        {
            case 0: #随机
                $dst_x = rand(0,($imagex1 - $imagex2));
                $dst_y = rand(0,($imagey1 - $imagey2));
                break;
            case 1: #1为顶端居左
                $dst_x = 0;
                $dst_y = 0;
                break;
            case 2: #2为顶端居中
                $dst_x = ($imagex1 - $imagex2) / 2;
                $dst_y = 0;
                break;
            case 3: #3为顶端居右
                $dst_x = $imagex1 - $imagex2;
                $dst_y = 0;
                break;
            case 4: #4为中部居左
                $dst_x = 0;
                $dst_y = ($imagey1 - $imagey2) / 2;
                break;
            case 5: #5为中部居中
                $dst_x = ($imagex1 - $imagex2) / 2;
                $dst_y = ($imagey1 - $imagey2) / 2;
                break;
            case 6: #6为中部居右
                $dst_x = $imagex1 - $imagex2;
                $dst_y = ($imagey1 - $imagey2) / 2;
                break;
            case 7: #7为底端居左
                $dst_x = 0;
                $dst_y = $imagey1 - $imagey2;
                break;
            case 8: #8为底端居中
                $dst_x = ($imagex1 - $imagex2) / 2;
                $dst_y = $imagey1 - $imagey2;
                break;
            case 9: #9为底端居右
                $dst_x = $imagex1 - $imagex2;
                $dst_y = $imagey1 - $imagey2;
                break;
            default: #随机
                $dst_x = rand(0,($imagex1 - $imagex2));
                $dst_y = rand(0,($imagey1 - $imagey2));    
        }
       
        imagecopy ( $image1, $image2, $dst_x, $dst_y, 0, 0, $imagex2, $imagey2 );
       
        switch($type1) {
            case 1:
                imagegif($image1, $sFile);
                break;
            case 2:
                imagejpeg($image1, $sFile);
                break;
            case 3:
                imagepng($image1, $sFile);
                break;
            default:
        }
       
        imagedestroy($image1);
        imagedestroy($image2);
    }
}


function resizeimage($srcfile, $dstfile,$maxwidth, $maxheight){


    $size=getimagesize($srcfile);


    switch($size[2]){
        case 1:
        $img=imagecreatefromgif($srcfile);
        break;


        case 2:
        $img=imagecreatefromjpeg($srcfile);
        break;


        case 3:
        $img=imagecreatefrompng($srcfile);
        break;


        default:
        return false;
    }
   
    #源图片的宽度和高度  
    $srcw=imagesx($img);  
    $srch=imagesy($img);  
    #目的图片的宽度和高度  


    if(($maxwidth && $srcw > $maxwidth) || ($maxheight && $srch > $maxheight)){
        if($maxwidth && $srcw > $maxwidth)
        {
            $widthratio = $maxwidth/$srcw;
            $resizewidth_tag = true;
        }
        if($maxheight && $srch > $maxheight)
        {
            $heightratio = $maxheight/$srch;
            $resizeheight_tag = true;
        }
        if($resizewidth_tag && $resizeheight_tag)
        {
            if($widthratio < $heightratio)
            {
                $ratio = $widthratio;
            }
            else
            {
                $ratio = $heightratio;
            }
        }
        if($resizewidth_tag && !$resizeheight_tag)
        {
            $ratio = $widthratio;
        }
        if($resizeheight_tag && !$resizewidth_tag)
        {
            $ratio = $heightratio;
        }
    }
    if(!$ratio) $ratio = 1;
    $dstw=floor($srcw*$ratio);  
    $dsth=floor($srch*$ratio);  
   
    #新建一个真彩色图像  
    $im=imagecreatetruecolor($dstw,$dsth);  
    $black=imagecolorallocate($im,255,255,255);  


    imagefilledrectangle($im,0,0,$dstw,$dsth,$black);  
    #imagecopyresized($im,$img,0,0,0,0,$dstw,$dsth,$srcw,$srch);# imagecopyresized()函数在所有GD版本中有效,但其缩放图像的算法比较粗糙.
    imagecopyresampled($im,$img,0,0,0,0,$dstw,$dsth,$srcw,$srch);# imagecopyresampled()其像素插值算法得到的图像边缘比较平滑.质量较好(但该函数的速度比 ImageCopyResized()慢
   
    switch($size[2]) {
        case 1:
        imagegif($im, $dstfile);
        break;
       
        case 2:
        imagejpeg($im, $dstfile);
        break;


        case 3:
        imagepng($im, $dstfile);
        break;


        default:
        return false;
    }
    imagedestroy($im);  
    imagedestroy($img);
    return true;
}




附:
在文章中插入自己的分页标记,且让分页标记不处于段落中
var cmd = editor.cmd;
cmd.split(true);
editor.insertHtml(pagetag);


插入前:
<p>这是一段用来测试分页标记的文章</p>


插入分页标记#--#后的效果
<p>这是一段用来测试</p>
#--#
<p>分页标记的文章</p>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值