之前一直使用UEditor编辑器,但是UEditor代码过于冗余,不好用,让人受不了,就换了小巧的kindeditor编辑器,下面教大家如何来使用它
第一步:加入后端代码。后端代码和平时表单file上传文件是一样 ,只是返回数据必须是json:
public function fileUpload()
{
if (IS_POST) {
$upload = new \Think\Upload();// 实例化上传类
$upload->maxSize = 999999999 ;// 设置附件上传大小
$upload->exts = array('jpg', 'gif', 'png', 'jpeg');// 设置附件上传类型
$upload->rootPath = './Uploads/'; // 设置附件上传根目录
$path='/Uploads/';//设置上传目录
$file = $upload->upload();
if ($file) {
$file_url =__ROOT__.$path.$file['imgFile']['savepath'] . $file['imgFile']['savename'];//取得上传目录
echo json_encode(array('error' => 0, 'url' => $file_url));//返回的数据一定要是json
} else {
$this->error($upload->getError());//返回错误
}
}
}
第二步,前端引入js:
<script charset="utf-8" src="/kindeditor/kindeditor-min.js"></script>
<script charset="utf-8" src="/kindeditor/lang/zh_CN.js"></script>
<link rel="stylesheet" href="/kindeditor/themes/default/default.css" />
<script type="text/javascript">
var editor;
KindEditor.ready(function(K) {
editor = K.create('textarea[name="content"]', {
allowFileManager : true,
uploadJson:'{:U("fileUpload")}', //上传控制器所在url
afterBlur: function(){this.sync();}
});
});
</script>
这就样可以使用了,是不是特别简单,kindeditor还有附件上传,单图上传,多图上传也是这样实现的