summernote5

癫狂的兔子

已于 2023-07-20 00:06:03 修改

阅读量88

点赞数

文章标签： django html

于 2023-07-18 02:25:34 首次发布

本文链接：https://blog.csdn.net/qq_45800521/article/details/131778389

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Summernote</title>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.js"></script>
</head>
<body>
    <div id="summernote">write something here</div>
    <button id="submit()" onclick="submit()">submit</button>
    <script>
        $(document).ready(function () {
            $('#summernote').summernote({
                placeholder: 'Hello stand alone ui',
                tabsize: 2,
                height: 120,
                toolbar: [
                    ['style', ['style']],
                    ['font', ['bold', 'underline', 'clear']],
                    ['color', ['color']],
                    ['para', ['ul', 'ol', 'paragraph']],
                    ['table', ['table']],
                    ['insert', ['link', 'picture', 'video']],
                    ['view', ['fullscreen', 'codeview', 'help']]
                ],
                {#callbacks: {#}
	    		{#    onImageUpload: function (files) {#}
	            {#		 uploadFile($summernote, files[0]);#}
	        	{#	}#}
	   		    {#}#}
                {#onImageUpload: function(files, editor, $editable) {#}
                {#    uploadSummerPic(files[0], editor, $editable);}#}
            });
        });

        function submit(){
            var content = $('#summernote').summernote('code');
            console.log(content);
            alert(content);
            var formData = new FormData();
            formData.append('summernote_content', content);
            $.ajax({
                url: '/test2',  // 后端处理图片上传的 URL
                method: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                success: function(data) {
                    {#var imageUrl = response.image_url;#}
                    {#$('#summernote').summernote('insertImage', imageUrl);#}
                    {#console.log(imageUrl)#}
                    alert('success');
                },
                error: function() {
                    alert('图片上传失败');
                }
            });
        }

    </script>
</body>
</html>

base64数据存进文本中

from django.views.decorators.csrf import csrf_exempt
import base64

@csrf_exempt
def test2(request):
    summernote_content = request.POST.get('summernote_content', 'fail_nothing')
    # print("summernote_content:", summernote_content)
    time_now=datetime.now().strftime("%Y%m%d%H%M%S")
    with open(f'smoke_app/files/summernote_content_{time_now}.txt', 'w', encoding="utf-8") as output_file:
        output_file.write(summernote_content)
    url=f'smoke_app/files/summernote_content_{time_now}.txt'
    print(url)
    return render(request, 'test2.html')

解码base64格式图片

import re
from PIL import Image
from io import BytesIO

def get_content():
    path = r"D:\classes\Python\project\Union\UnionProject\smoke_app\files\summernote_content_20230719232949.txt"
    with open(path,'r',encoding="utf-8") as f:
        content=f.read()
    print(content)
    preprocessing_data=re.findall('<img src="(.*?)"',content)[0]
    head, context = preprocessing_data.split(",")  # 将base64_str以“,”分割为两部分
    img_data = base64.b64decode(context)  # 解码时只要内容部分
    # print(img_data)
    image = Image.open(BytesIO(img_data))
    image.show()
    return

get_content()