1、下载kindediotr富文本编辑器相关资料包(http://kindeditor.net/demo.php官方网站下载)
2.将下载文件拷贝到实际项目相应路径中（我放置的目录pulibc/static/admin/kindeditor）
3.在需要上传图片的.html文件引入kindeditor相关资源文件，我在添加文章页面引入相关资源。
<!DOCTYPE html>
<html>
<head>
<!---kindeditor使用的js-->
<link rel="stylesheet" href="__Admin__/kindeditor/themes/default/default.css" />
<link rel="stylesheet" href="__Admin__/kindeditor/plugins/code/prettify.css" />
<script charset="utf-8" src="__Admin__/kindeditor/kindeditor-all.js"></script>
<script charset="utf-8" src="__Admin__/kindeditor/lang/zh-CN.js"></script>
<script charset="utf-8" src="__Admin__/kindeditor/plugins/code/prettify.js"></script>
</head>
<body>
<div class="form-group">
<label for="content" class="col-sm-2 control-label no-padding-right">文章内容</label>
<div class="col-sm-6">
<textarea name="content" id="content" style=" width: 140%; height: 500px; visibility: hidden; display: block; "></textarea>
</div>
</div>
<script>
KindEditor.ready(function(K) {
var editor1 = K.create('textarea[name="content"]', {
cssPath : '__Admin__/kindeditor/plugins/code/prettify.css',
uploadJson : "{:url('tool/index')}",//本地图片上传
fileManagerJson : '__Admin__/kindeditor/php/file_manager_json.php',//图片空间管理
afterCreate : function() {
var self = this;
K.ctrl(document, 13, function() {
self.sync();
K('form[name=example]')[0].submit();
});
K.ctrl(self.edit.doc, 13, function() {
self.sync();
K('form[name=example]')[0].submit();
});
}
});
prettyPrint();
});
</script>
</body>
</html>4.看看后台上传图片功能如何实现：
class Tool extends Controller
{
public function index(){
if(request()->isPost()){
//先判断有无图片上传
$file=request()->file('imgFile');
//移动到框架根目录/public/uploads/目录下
if($file){
$info=$file->move(ROOT_PATH.'public' . DS . 'uploads');
//var_dump($info);
if($info){
$data=array(
'url'=>'http://127.0.0.1/wnfw/public/uploads/'.$info->getSaveName(),
'error'=>0
);
exit(json_encode($data));
}else{
$error['error']=1;
$error['message']=$file->getError();
exit(json_encode($error));
}
}
}
}
}