下面是步骤:
一、修改 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" /> ',
'<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>
一、修改 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" /> ',
'<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>