文章内容详情
关于kindeditor的使用教程
今天记录一下kindeditor编辑器的修改与使用, 主要修改的功能如下:
1. 调用并自定义编辑器工具栏
2. 修改图片上传目录
3. 添加删除目录和删除图片功能
4. 表情包路径修改
在apache/htdocs目录下新建web文件夹
第一步: 调用并自定义编辑器工具栏
下载kindeditor编辑器并解压,将解压后的目录名重命名为 kindeditor, 将kindeditor文件夹放在web目录下
删除asp asp.net jsp 文件夹
重命名kindeditor目录下的php文件夹, 命名为upload
修改kindeditor/plugins/image目录下的image.js文件
将地址修改为 'upload/upload_json.php'
在根目录下新建 demo.php 文件
<?php
$htmlData = '';
if (!empty($_POST['content'])){
$htmlData = $_POST['content'];
}
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>KindEditor PHP</title>
<link rel="stylesheet" href="kindeditor/themes/default/default.css" /> <!--编辑器样式-->
<link rel="stylesheet" href="kindeditor/plugins/code/prettify.css" /> <!--插入代码样式-->
<script charset="utf-8" src="kindeditor/kindeditor.js"></script>
<script charset="utf-8" src="kindeditor/lang/zh_CN.js"></script> <!--指定语言,zh_CN时无需引入,默认为zh_CN-->
<script charset="utf-8" src="kindeditor/plugins/code/prettify.js"></script>
<script>
KindEditor.ready(function(K) {
var option = {
cssPath : 'kindeditor/plugins/code/prettify.css', // 引入插入代码时的样式
uploadJson : 'kindeditor/upload/upload_json.php', // 指定上传文件的服务器端程序
fileManagerJson : 'kindeditor/upload/file_manager_json.php',// 指定浏览远程图片的服务器端程序
allowFileManager : true, // 图片空间管理功能
width : '520px',
height : '300px',
minWidth : '0px',
minHeight : '0px',
items : ['source', 'preview', 'clearhtml', 'code', 'template', '|', 'justifyleft', 'justifycenter', 'justifyright', 'justifyfull', 'insertorderedlist', 'insertunorderedlist', '|', 'subscript', 'superscript', 'anchor', 'quickformat', '|', 'flash', 'insertfile', 'table', 'pagebreak', 'fullscreen', '/', 'formatblock', 'fontname', 'fontsize', 'forecolor', 'hilitecolor', 'bold', 'italic', 'underline', 'strikethrough', 'lineheight', 'removeformat', '|', 'image', 'multiimage', 'media', 'hr', 'emoticons', 'baidumap', 'link', 'unlink'],
//resizeType : 2, 默认为2, 值有0,1,2 指定textarea能否拖动
//themeType : simple, 指定编辑器样式,指定时需要link引入样式
//designMode : true, 可视化模式或代码模式,默认为true
//newlineTag : 'p', 设置回车换行标签
//syncType : 'form', 同步数据的方式,默认为form
//colorTable : [['#EEEEEE']], 指定取色器的颜色
//fontSizeTable : ['9px'], 指定字体大小
//afterCreate 设置编辑器创建后执行的回调函数
};
var editor = K.create('textarea[name="content"]',option);
//K.create('#editor_id',option);
prettyPrint();
});
</script>
</head>
<body>
<?php echo $htmlData;?>
<form method="post" action="demo.php">
文章标题:<input type="text" name="title"><br />
文章内容:<textarea name="content" id="editor_id"><?php echo htmlspecialchars($htmlData); ?></textarea><br />
作者:<input type="text" name="author"><br />
分类:<input type="text" name="classify"><br />
<input type="submit" name="button" value="提交内容" />
</form>
</body>
</html>
其中的 items 可以自定义工具栏
第二步: 修改图片上传目录
首先在根目录下新建一个存放图片的文件夹, 命名为 uploadfiles (必须创建,否则查看图片空间时会读取所有目录)
修改kindeditor/upload/upload_json.php 与 kindeditor/upload/file_manager_json.php文件
这样一来,上传的文件都会跑到根目录下的uploadfiles文件夹下, 而图片空间里的图片也是浏览该目录下的
第三步: 添加删除目录和删除图片功能
修改kindeditor/plugins/filemanager/filemanager.js文件
修改为 upload/file_manager_json.php
在filemanager.js文件下,找到function createView(result), 修改代码如下: 用于提交删除文件或目录的请求
function createView(result) {
createCommon(result, createView);
var fileList = result.file_list;
for (var i = 0, len = fileList.length; i < len; i++) {
var data = fileList[i],
// 替换成 A
// div = K('<div class="ke-inline-block ke-item"></div>');
/* A start*/
div = K('<div class="ke-inline-block ke-item" style="position:relative;"></div>');
/* A end*/
bodyDiv.append(div);
// 替换成 B
/*
var photoDiv = K('<div class="ke-inline-block ke-photo"></div>')
.mouseover(function(e) {
K(this).addClass('ke-on');
})
.mouseout(function(e) {
K(this).removeClass('ke-on');
});
div.append(photoDiv);
*/
/* B start*/
var photoDiv = K('<div class="ke-inline-block ke-photo"></div>'); // 创建图片div
div.append(photoDiv); // 插入到循环div里
div.mouseover(function(e) { // 滑过这个div的时候
K(this).children().eq(0).addClass('ke-on'); // 给下面的第一个div也就说图片div添加ke-on
data.is_photo&&K(this).children().eq(2).css("display","block"); // 如果是图片格式就查找当前下面的第3个标签元素设置为可见(删除标签)
})
.mouseout(function(e) { // 划出这个循环div时
K(this).children().eq(0).removeClass('ke-on'); // 删除ke-on类
data.is_photo&&K(this).children().eq(2).css("display","none"); // 如果是图片格式设置当前下第3个标签为隐藏(删除标签)
});
/* B end*/
var fileUrl = result.current_url + data.filename,
iconUrl = data.is_dir ? imgPath + 'folder-64.gif' : (data.is_photo ? fileUrl : imgPath + 'file-64.gif');
var img = K('<img src="' + iconUrl + '" width="80" height="80" alt="' + data.filename + '" />');
if (!data.is_dir || data.has_file) {
photoDiv.css('cursor', 'pointer');
bindTitle(photoDiv, data);
bindEvent(photoDiv, result, data, createView);
} else {
photoDiv.attr('title', lang.emptyFolder);
}
photoDiv.append(img);
div.append('<div class="ke-name" title="' + data.filename + '">' + data.filename + '</div>');
/* C start*/
if(data.is_dir){ // 如果是目录,添加删除目录的<span>
var _span = K('<span class="ke-deldir" data-url="' + K.formatUrl(result.current_url + data.filename, 'absolute') + '" style="position:absolute;top:0;left:0;display:block;width:102px;line-height:20px;background:#0690d2;color:#FFF;text-align:center;cursor:pointer;">删除目录</span>');
div.append(_span);
}
if(!data.is_dir){ // 如果不是目录,添加删除文件的<span>
var _span=K('<span class="xl_span" data-url="'+K.formatUrl(result.current_url + data.filename, 'absolute')+'" style="position:absolute;display:none;width:102px;background:#0690d2;color:#FFF;text-align:center; cursor: pointer;line-height:20px;bottom:-3px;left:0;">删除</span>');
div.append(_span);
}
/* C end*/
}
/* D start*/
// 删除目录
K(".ke-deldir").click(function(){
var $this = K(this);
if(!confirm('确定删除吗?')){
return false;
}
K.ajax("/web/kindeditor/upload/file_manager_json.php", function(data){
data == 1 ? $this.parent().remove() : alert("删除目录错误(可能目录不为空)");
if(K(".ke-plugin-filemanager-body").children().length < 1){
K(".ke-plugin-filemanager-body").html("没有目录了")
}
}, 'POST', {action:"deldir", url:$this.attr("data-url")
});
});
// 删除图片
K(".xl_span").click(function(){ // 这里的.xl_span对应着刚才插入的删除按钮上的class
var $this = K(this);
if(!confirm('确定删除吗 ?')) { // 提示,如果点击取消则直接退出
exit(); // 直接结束,因为是在for循环里,不直接结束会重复弹出是否确定删除
}
// 绝对路径
K.ajax("/web/kindeditor/upload/file_manager_json.php", function(data){
data == 1 ? $this.parent().remove() : alert("删除出现错误"); // 如果返回1则直接删除图片,名字的Div达到即时删除,否则提示
if(K(".ke-plugin-filemanager-body").children().length<1){
K(".ke-plugin-filemanager-body").html("没有图片了")
}// 检查是否没有图片了
},
'POST', {action:"delfile",url:$this.attr("data-url")}
// action为指定的配合后端用,url是获取刚才存在删除按钮上的图片路径
);
exit(); // 直接结束,因为是在for循环里,不直接结束会重复弹出是否确定删除
})
/* D end*/
}
viewTypeBox.val(viewType);
reloadPage('', orderTypeBox.val(), viewType == 'VIEW' ? createView : createList);
return dialog;
}
修改kindeditor/upload/file_manager_json.php
在require_once 'JSON.php' 后添加如下代码: 用于删除目录与文件
if($_POST["action"]=="deldir"){ //如果action=deldir,删除目录
$url=$_POST["url"];
if(empty($url)){ //如果url为空
die(0);
}
// 把绝对路径替换成相对路径
$url_dir = substr($url,stripos($url,"image"));
$url=str_replace($url,"../../uploadfiles/" . $url_dir,$url);//替换路径
if(file_exists($url)){ //检查目录是否存在
if($handle = opendir("$url")){ //检查目录下是否有文件,有的话直接返回0
while($item = readdir($handle)){
if ($item != "." && $item != ".."){
closedir($handle);
echo 0;
exit();
}
}
}
$result=rmdir($url);//删除文件
if($result){ //如果成功删除
echo 1;
}else{
echo 0;
}
}else{
echo 0;
}
exit();
}
// 删除图片
if($_POST["action"]=="delete"){ //如果action=delete
$url=$_POST["url"];
if(empty($url)){ //如果url为空
die(0);
}
// 把绝对路径替换成相对路径
$url=str_replace("/web/uploadfiles/","../../uploadfiles/",$url);//替换路径
if(file_exists($url)){ //检查文件是否存在
$result=unlink($url);//删除文件
if($result){ //如果成功删除
echo 1;
}else{
echo 0;
}
}else{
echo 0;
}
exit();
}
第四步: 如何修改表情包路径?
打开/plugins/emoticons/emoticons.js文件,
将表情放到根目录下的/uploadfiles/expressioins/images/下即可
接下来就可以测试了, 访问localhost/web/demo.php进行测试, 由于时间关系, 到此就完了
