thinkphp3.2.3使用summernote

summernote是一款基于bootstrap的富文本编辑器，大小只有400k，包含了常用的功能，支持图片上传，添加视频地址。等等。因为百度的ueditor、umeditor相对比较大，wangeditor在不支持移动端最后找到了这款简单、功能又挺齐全的富文本编辑器，接下来讲讲怎么在tp框架中引入这个文本编辑器。

1、下载summernore，地址：summernote官网，summernote只支持html5的页面。

2、因为是基于bootstrap的，所以要下载bootstrap，下载地址bootstrap官网。

3、前端页面引入所需文件

<!-- 首先引入jquery和bootstrap文件 -->
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script> 
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script> 

<!-- 引入summernote文件，可以使用本地的也可以使用网上提供的 -->
<link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.9/summernote.css" rel="stylesheet">
<script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.9/summernote.js"></script>

4、创建一个summernote编辑器的容器

<textarea name="info" id="summernote" class="form-control"></textarea>

5、当html的文档加载完毕之后使用js创建summernote编辑器，并重写图片上传函数（因为summernote自带的图片处理函数使用base64的，所以数据量大，对数据库的开销非常大，所以要自己重写图片上传函数）

<script>
   $('#summernote').summernote({
    height: 300,
    minHeight: null,
    maxHeight: 500,
    callbacks: {
        onImageUpload: function (files) {
             
            var formData = new FormData();
            formData.append('file', files[0]);
             
            $.ajax({
                url: '{$smarty.const.__CONTROLLER__}/saveimg'//上传图片文件处理地址,
                type: "POST",
                data: formData,
                dataType: 'JSON',
                processData: false,//告诉jQuery不要加工数据
                contentType: false,
                success: function (data) {
                    if (data.Result == 1) {
                        $('#summernote').summernote('insertImage', data.Data, 'img');
                    } else {
                        alert(data.Data);
                    }
                },
                error: function (data) {
                    alert('图片上传出错，文件过大或者其他情况');
                }
            });
        }
    }
});
</script>

6、后端php处理传文件

public function saveimg(){//后端上传处理函数

                $upload = new \Think\Upload();
                $upload->maxSize=0;//(不限制上传大小，但是同时要修改php.ini中的upload_max_filesize和post_max_size上传大小限制，否则过大会报错）
                $upload->rootPath='Public/Upload/';//上传图片目录
                $upload->exts=array('jpg','gif','png','jpeg');//允许上传的图片格式
                $info=$upload->upload();//上传
                if(!$info){//上传错误，输出错误信息
                    $result=json_encode(
                        $upload->getError()
                    );
                }else{//上传成功，输出图片地址和上传的结果，因为前端ajax接收的是json的数据，所以要进行json_encode
                    $url=__ROOT__."/Public/Upload/".$info['file']['savepath'].$info['file']['savename'];
                    $result=json_encode(
                        array(
                            'Data'=>$url,
                            'Result'=>1,
                        )
                    );
                }
                echo $result;//输出信息
    }

效果：

1、编辑器

2、上传图片框

3、上传之后的图片

编辑器中的html

服务器上已经上传的图片文件

总结：summernote富文本编辑器的引入比百度的富文本编辑器简单得多，并且移动端的显示相对友好，像点击图片可以选择缩放比例，不想百度富文本编辑器，图片按照原本的大小进行插入，导致整个图片超出编辑框，而且无法进行点击缩放，summernote可以点击图片进行缩放，提供了选项，在移动端还是可以将就的进行使用，相对与wangeditor，界面也差不多，移动端wangeditor整个编辑器按钮选项没有进行折叠，好像是v3版本作者取消了折叠，原因是因为折叠后太丑。。。

thinkphp3.2.3使用summernote

猜你喜欢