爱华网版本 kindeditor-4.1.7.zip
效果图如下：
下面是步骤：
一、修改 kindeditorpluginsimageimage.js 文件
在77行的form表单中添加自己需要的表单内容
'<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>',
hiddenElements.join(''),
'<label>' +lang.localUrl + '</label>',
'<input type="text" name="localUrl" tabindex="-1"readonly="true" /> ',
'<input type="button"value="' + lang.upload + '" />',
'</div>',
'<div>',
'<input type="radio" id="thum0" name="thum"value="0" checked="checked" /><labelfor="thum0">' + lang.thum0 +'</label>',
'<input type="radio" id="thum1" name="thum"value="1" /><labelfor="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" /><labelfor="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" /><labelfor="pos9">' + lang.watermarkPos9 +'</label>',
'<input type="radio" id="pos0" name="pos" value="0"/><label for="pos0">'+ lang.watermarkPos0 +'</label>',
'</div>',
'</form>',
二、修改语言包
找到image部分的代码，添加自己需要的名称
1、kindeditorlangzh_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、kindeditorlangen.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上传程序 kindeditorphpupload_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);
returntrue;
}
附：
在文章中插入自己的分页标记，且让分页标记不处于段落中
var cmd = editor.cmd;
cmd.split(true);
editor.insertHtml(pagetag);
插入前：
<p>这是一段用来测试分页标记的文章</p>
插入分页标记#--#后的效果
<p>这是一段用来测试</p>
#--#
<p>分页标记的文章</p>
