400-800-9385
网站建设资讯详细

PHP引入kindeditor富文本编辑器

发表日期:2021-10-11 09:08:48   作者来源:刘红旺   浏览:128   标签:网页编辑器    
运行的框架thinkphp3.2
Kindeditor版本4.1.1.1
可以在官网下载最新版本

编辑器1

Kindeditor 是一个功能比较全面的所见即所得富文本编辑器,比较稳定。
缺点:官网不再更新
批量上传图片需要用到flash插件,在手机端兼容不是很好
下面我们看一下怎么引入Kindeditor编辑器
1.新建一个Kindeditor.html 文件 下面是前端代码:
<style type="text/css">
.ke-dialog{
    top: 120px !important;
}
</style>
<textarea id="[id]" name="[id]" class="form-control kindeditor" style="height:400px;width:100%;">[value]</textarea>
<!--编辑器Kineditor-->
<script src="__LIB__/kindeditor/kindeditor.js"></script>
<script>
    var editor;
    KindEditor.ready(function(K) {
        editor = K.create('textarea[name="[id]"]', {
            basePath: '__LIB__/kindeditor/',
            bodyClass: 'article-content',
            uploadJson : "{:U('Upload/kingeditorupload')}",//文件提交地址
            allowFileManager : false,
            afterBlur:function(){this.sync();},
            pasteType : 1,
            urlType:'domain',
            filterMode:false,
            newlineTag :'p'
        });
    });
</script>
 
2. 在其他页面引入Kindeditor编辑器 include 是thinkphp3.2 中的前端引入模块的方法
    <!-- 加载编辑器的容器 -->
<include file="Public/kindeditor" id="detail" value="{$model['detail']}" />
 
  • 后台接受文件
 /**
     * keditor编辑器上传图片处理
     */
    public function kingeditorupload() {
        $return = array('error' => 0, 'info' => '上传成功', 'data' => '');
        session('upload_error', null);
        //上传配置
        $setting = array(
            'mimes' => '', //允许上传的文件MiMe类型
            'maxSize' => 0, //上传的文件大小限制 (0-不做限制)
            'exts' => 'jpg,gif,png,jpeg,zip,rar,pdf,word,xls', //允许上传的文件后缀
            'autoSub' => true, //自动子目录保存文件
            'subName' => array('date', 'Y-m-d'), //子目录创建方式,[0]-函数名,[1]-参数,多个参数使用数组
            'rootPath' => '.', //保存根路径这里必须为点
            'savePath' => '/Uploads/detail/', //保存路径
            'saveName' => array('uniqid', ''), //上传文件命名规则,[0]-函数名,[1]-参数,多个参数使用数组
            'saveExt' => '', //文件保存后缀,空则使用原后缀
            'replace' => false, //存在同名是否覆盖
            'hash' => true, //是否生成hash编码
            'callback' => false, //检测文件是否存在回调函数,如果存在返回文件信息数组
        );
        //上传文件
        $Model = D('Upload', 'Service');
        foreach ($setting as $k => $v) {
            $Model->setconfig($k, $v);
        }
        $info = $Model->upload('all');
        if ($info) {
            $url = $setting['rootPath'] . $info['imgFile']['savepath'] . $info['imgFile']['savename'];
            //判断是否为图片根据传值决定是否生成缩略图
if (I('get.dir') && I('get.thumbw') && I('get.thumbh') && in_array($info['imgFile']['ext'], array('jpg', 'gif', 'png', 'jpeg'))) {
                $url = $Model->thumb($info['imgFile'], I('get.thumbw'), I('get.thumbh'));
            }
            $url = str_replace('./', '/', $url);
            $info['fullpath'] =  . $url;
        }
        session('upload_error', $Model->getError());
        //返回数据
        if ($info) {
            $return['url'] = $info['fullpath'];
            unset($return['info'], $return['data']);
        } else {
            $return['error'] = 1;
            $return['message'] = session('upload_error');
        }
        //返回JSON数据
        exit(json_encode($return));
    }
      
 
  • 上传图片查看是否能上传成功:
编辑器2
编辑器3
编辑器4
查看源码 图片已经上传到了程序目录,引入成功。
编辑器5
如没特殊注明,文章均为方维网络原创,转载请注明来自https://www.szfangwei.cn/news/6241.html
相关网站设计案例
编辑器相关公司评论
  • 它是一个方便的代码原型制作工具,你可以从VS代码的命令调色板访问它。在Web前端培训中,你会学到很多前端工具和框架的使用技巧,真正提升自己...
    荆州设计网页公司
  • 几乎每个开发人员每天都会使用堆栈溢出来找到编码问题的答案。为了节省时间,StackFinder允许你从VS代码编辑器中查找有关堆栈溢出的答案。除此之外,你还可以将解决方案复制到编辑器中进...
    孝感前端制作公司