CI框架summernote富文本编辑器的使用及图片上传

1.下载summernote插件

再要使用的使用引入这几个文件即可

<link href="<?php echo base_url();?>assets/app/css/bootstrap.min14ed.css?v=3.3.6" rel="stylesheet">
<link rel="stylesheet" href="<?php echo base_url();?>assets/summ/dist/summernote-lite.css">
<link rel="stylesheet" href="<?php echo base_url();?>assets/summ/dist/summernote-bs4.css">
<script src="<?php echo base_url();?>assets/app/js/jquery.min.js?v=2.1.4"></script>
<script src="<?php echo base_url();?>assets/app/js/bootstrap.min.js?v=3.3.6"></script>
<script src="<?php echo base_url();?>assets/summ/dist/summernote.min.js"></script>
<script src="<?php echo base_url();?>assets/summ/dist/lang/summernote-zh-CN.min.js"></script>

2.再用编辑器时写下以下代码 HTML代码

<div class="form-group">
     <label class="col-sm-2 control-label">新闻内容:</label>
     <div class="col-sm-10">
     <div id="summernote"></div>
     </div>
</div>

效果图

3.图片上传 jq代码

$(document).ready(function() {                   //实例化编辑器
        $('#summernote').summernote({
            height: 300,                    //编辑器高
            minHeight: 200,                 //最小高度
            maxHeight: 400,                 //最大高度
            lang:'zh-CN',                   //设置语言
            focus: true,
            //调用图片上传
            callbacks: {                    //图片上传方法重写
                onImageUpload: function (files) {
                    sendFile(files[0]);
                }
            }
        });
        //ajax上传图片
        function sendFile(file) {              //图片上传方法
            var formData = new FormData();
            formData.append("file", file);
            $.ajax({
                url: "<?php echo base_url();?>admin/C_area/upload",//路径是你控制器中上传图片的方法，
                data: formData,
                cache: false,
                contentType: false,
                processData: false,
                type: 'POST',
                success: function (data){
                    if(data == 2){
                        alert('上传失败');
                    }else{
                        $('#summernote').summernote('insertImage', data, function ($image) {
                            $image.attr('src', data);
                        });
                    }
                }
            });
        }
    });

4. PHP代码  使用的是cI框架

//上传图片方法
    public function upload(){
        $month = date('Ymd',time());
        $dir = "./uploads/".$month."/";

        if(!is_dir($dir))//判断目录是否存在
        {
            mkdir ($dir,0777,true);//如果目录不存在则创建目录
        };
        $res = move_uploaded_file($_FILES["file"]["tmp_name"],$dir. $_FILES["file"]["name"]);
        if($res){
            echo base_url()."uploads/".$month."/".$_FILES["file"]["name"];
        }else{
            echo 2; //上传失败
        }
    }