Summernote使用记录

Summernote使用记录

在前台上传两张同样的Koala.jpg，在文件夹查看，Summernote可以正常使用啦。先上图再说。

前台上传两张图

到上传指定的文件夹中查看

一．前台

1.引入summernote基本的css，js文件，汉化需要加入语言js文件：summernote.css，summernote.min.js，summernote-zh-CN.min.js

2. html 添加：<input id="MySummernote" class="summernote" >

注意：class必须是summernote！

3.Js初始化：

$(document).ready(function () {

    $('.summernote').summernote({#编辑器设置#}

        {

            //width: 750,

            height: 250,

            focus: true, {#页面打开时光标自动进入编辑区#}

            lang: 'zh-CN',

            toolbar: [{#工具栏加载项设置#}

                //字体工具

            ['fontname', ['fontname']], //字体系列

            ['style', ['bold', 'italic', 'underline', 'clear']], // 字体粗体、字体斜体、字体下划线、字体格式清除

            ['font', ['strikethrough', 'superscript', 'subscript']], //字体划线、字体上标、字体下标

            ['fontsize', ['fontsize']], //字体大小

            ['color', ['color']], //字体颜色

            //段落工具

            ['style', ['style']],//样式

            ['para', ['ul', 'ol', 'paragraph']], //无序列表、有序列表、段落对齐方式

            ['height', ['height']], //行高

            //插入工具

            ['table',['table']], //插入表格

            ['hr',['hr']],//插入水平线

            ['link',['link']], //插入链接

            ['picture',['picture']], //插入图片

            ['video',['video']], //插入视频

            //其它

            ['fullscreen',['fullscreen']], //全屏

            ['codeview',['codeview']], //查看html代码

            ['undo',['undo']], //撤销

            ['redo',['redo']], //取消撤销

            ['help',['help']], //帮助

            ],

            callbacks:{

                onImageUpload: function(files) {

                    SendImg(files);//前台图片上传函数

                },

            }

        }

    );

});

4.图片上传函数：

function SendImg(files) {

    for(var i = 0;i < files.length;i++){

        data = new FormData();

        data.append("file", files[i]);

        url = "/ImgUploads/";

        $.ajax({

            data: data,

            type: "POST",

            url: url,

            cache: false,

            contentType: false,

            processData: false,

            dataType : "json",

            success: function(result) {// result是返回的值

                console.log(result);

                $('#content').summernote('insertImage', result.FileUrl, result.FileName);

            },

            error:function(){

                alert("上传失败!")

            }

        });

    }

}

二、后台图片接收

1.添加url

url(r'^ImgUploads/$', ImgUploads),

2.view里面写ImgUploads函数

@csrf_exempt

def ImgUploads(req):

    file = req.FILES.get('file')  # 获取文件对象，包括文件名文件大小和文件内容

    #print(file)

    curttime = time.strftime("%Y-%m-%d")

    upload_url = os.path.join(settings.MEDIA_ROOT, 'django-summernote', curttime)

    # print(upload_url)

    folder = os.path.exists(upload_url)

    if not folder:

        os.makedirs(upload_url)

        print("创建文件夹")

    if file:

        file_name = file.name

        if os.path.exists(os.path.join(upload_url, file_name)):

            name, etx = os.path.splitext(file_name)

            finally_name = name + "_" + get_random_str() + etx

            #print(name, etx, finally_name)

        else:

            finally_name = file.name



        upload_file_to = open(os.path.join(upload_url, finally_name), 'wb+')

        for chunk in file.chunks():

            upload_file_to.write(chunk)

        upload_file_to.close()



        file_upload_url = settings.MEDIA_URL + 'django-summernote/' + curttime + '/' + finally_name

        # print(file_upload_url)

        # 构建返回值

        response_data = {}

        response_data['FileName'] = file_name

        response_data['FileUrl'] = file_upload_url

        response_json_data =          json.dumps(response_data)

        # print(response_data, response_json_data)

        return HttpResponse(response_json_data)

    else:

        return HttpResponse()

4.怕文件重名，写个随机函数get_random_str()，也写在view里面

def get_random_str():

    uuid_val = uuid.uuid4()

    uuid_str = str(uuid_val).encode('utf-8')

    md5 = hashlib.md5()#md5实例

    md5.update(uuid_str)#拿uuid的md5摘要

    return md5.hexdigest()#返回固定长度的字符串