有关summernote 使用心得(图片上传)

在做 资讯网站 所以需要一款编辑器插件 找了好多 不是 功能繁杂 多年未更新 就是会将网站的图片空间展示出来 ,或者图片大小不能随意更改的问题。

最终找到一款就是 summernote编辑器 这里是官网  →  我是官网

优点有

1. 简约 大部分功能齐全 却又不显得繁琐复杂
2. 图片大小可以在文章内部可视化修改大小
3. 允许自定义按钮 且功能可以随意关闭开启（这个功能大部分都有）功能按钮布局可以随意更改
4. 支持中文￣□￣｜｜

 

缺点嘛

说是缺点也不算就是他的上传图片是用base64 转换的图片

大致是这样的↓↓↓↓↓↓↓↓↓↓↓

一张图片的地址 就有好几兆  存进数据库 结果可想而知，所以 图片上传就需要 自己写了 好在 官方留了接口 所以这里可以自己写很方便

大概思路是  上传图片事件→获取上传图片对象→通过ajax→传到后台控制器 控制器上传图片并且 返回图片url→将图片的url重新放到编辑器内

这里说一下 图片上传的前端代码

 //调用富文本编辑
    $(document).ready(function() {
       $('#summernote').summernote({
            height: 300, //设置高度
            minHeight: null,
            maxHeight: null,
            focus: true,
            lang:'zh-CN',//中文
            toolbar: [
                //段落工具            
                ['style', ['style']],//样式
                ['fontsize', ['fontsize']], //字体大小  
                ['para', ['ul', 'ol', 'paragraph','height']], //无序列表、有序列表、段落对齐方式
                //字体工具                             
                ['style', ['bold', 'italic', 'underline', 'clear']], // 字体粗体、字体斜体、字体下划线、字体格式清除       
                ['font', ['strikethrough', 'superscript', 'subscript']], //字体划线、字体上标、字体下标                         
                ['color', ['color']], //字体颜色
                
                //插入工具  
                ['table',['table']], //插入表格    
                ['hr',['hr']],//插入水平线                
                ['link',['link']], //插入链接                
                ['picture',['picture']], //插入图片                
                ['video',['video']], //插入视频
                
                //其它
                ['fullscreen',['fullscreen']], //全屏
                ['undo',['undo']], //撤销
                ['codeview',['codeview']], //查看html代码
                ['redo',['redo']], //取消撤销
            ],
		      callbacks: {
		      onImageUpload: function(files) {
		        sendFile(files[0])
		      }
		  }
        });

        //ajax上传图片
        function sendFile(file) {
            var formData = new FormData();
            formData.append("file", file);
            $.ajax({
                url: "upload_img",//这里是你的后端控制器 后面会写到后端控制器
                data: formData,
                type: 'POST',
                success: function (data) {
                	/*alert(data.a);*/
                    $('#summernote').summernote('insertImage', data.a, 'img');//这里是将返回的url地址重新添加到编辑器内
                }
            });
        }
    });

然后是后端代码

 /*发布文章图片上传 这个是上传控制器 因为 我把 上传img方法封装了 upimg*/
    public function upload_img()
    {
        if ($_FILES) {
          $result=upimg($_FILES);
        }
        return json(['a'=>$result]);
    }

/*这里是 common.php 中的封装方法 水平比较菜 随便看看就好*/ 
/*生成随机名字*/ 
function rand_name(){
  return md5(rand(1000,9999).rand(1000,9999).time());
}
/*上传图片 这里是 上传到 public/news/img 中*/ 
function upimg($files){
  /*截取后缀*/
  $suffix=substr($files['file']['name'],strrpos($files['file']['name'],'.'));
  $arr=array('.jpg','.png','.jpeg','.gif');
  /*判断是否为图片*/
  if (in_array($suffix,$arr)) {
  //生成随机名
  $str=rand_name().$suffix;
  //上传文件到img文件
  $path = date ( 'Ymd'); // 接收文件目录
  //判断有没有这个文件
  if(!file_exists ( 'news/image/'.$path )){
      mkdir ( "news/image/$path", 0777, true );
  }
  $filename= 'news/image/'.$path.'/'.$str;
  //临时文件移动到文件夹内
  move_uploaded_file($files['file']['tmp_name'],$filename);
  return $filename= _WZURL_.'/'.$filename;
  }else{
  return false;
  }
}

这样总体就可以实现图片上传了

这里依然有一些问题还没有搞懂 如果有大神知道 望告知

输出代印这个代码好多次都是空的 到现在还不知道原因  大神飘过的时候希望可以告诉一二