django模板中插入summernote工具(bootstraphtml编辑器)_django如何获得summernote上传的图片路径-CSDN博客

本文链接：https://blog.csdn.net/Michael_Lbs/article/details/72122980

本文介绍了如何在Django项目中整合Summernote，一个强大的Bootstrap HTML编辑器。首先，从官方GitHub获取开发版并提取所需文件放入项目的静态目录。接着，在模板中引入jQuery、Bootstrap及Summernote的JS文件，实现编辑器的功能。

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

图片上传参考链接:出处

1.可按照summernote官方的github地址下载--开发版.

2.我们需要使用的文件在dist文件夹内,将该文件夹内的文件复制到路径:/myproject/app/static/app/summernote/

3.在模板中载入静态文件:

(1)载入依赖工具,JQ和bootstrap

    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

(2)载入summernote的js文件

{% load staticfiles %}  //务必写上这行
    <link type="text/css" rel="stylesheet" href="{% static 'myapp/summernote/summernote.css' %}" />
    <script type="text/javascript" src="{% static 'myapp/summernote/summernote.js' %}"></script>
    <script type="text/javascript" src="{% static 'myapp/summernote/lang/summernote-zh-CN.js' %}"></script>

4.在html中插入summernote块

<div id="summernote">
  hello, summernote!
</div>

5.在JQ中启动summernote并进行初始化(可根据官方文档和自己需求进行初始化)

$('#summernote').summernote({
            lang : 'zh-CN',
            minHeight : 300,
            dialogsFade : true,// Add fade effect on dialogs
            dialogsInBody : true,// Dialogs can be placed in body, not in
            // summernote.
            disableDragAndDrop : false,// default false You can disable drag
            // and drop
        });