Django-Summernote使用记录，完整前后台

原创

于 2019-01-11 10:56:51 发布 · 1.6k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#summernote #富文本编辑框 #ajax #formdata

本文记录了Django项目中集成Summernote富文本编辑器的详细步骤，包括前端引入相关文件、HTML结构设置、JavaScript初始化以及图片上传功能的实现。在后台，通过定义URL和视图函数接收并处理图片上传，确保图片能正常显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在前台上传两张同样的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: [{#工具栏加载项设置#}

                //字体工具

  &nbs