您现在的位置是:首页 > 技术分享 网站首页技术分享

Django中使用SummerNote富文本编辑器

Django  
简介推荐使用 UEditor 富文本。

这款编辑器基于Bootstrap和Jquery,也就是说项目中要先准备好Bootstrap和JQuery相关文件,当然也可以在线调用。相对于CKEditor我更喜欢SummerNote,因为它样式很漂亮,而且使用也很简单,图片上传不用再自己编写代码。提示:本教程基于Django项目,请先完成项目与应用的创建。

第一部分:Django后台使用SummerNote

一、安装SummerNote库

pip install django-summernote

二、添加静态文件

从SummerNote官网下载已编译的文件(Compiled )。

下载地址:https://summernote.org/getting-started/#compiled-css-js

下载之后,解压缩,将“dist”文件夹中的文件复制到项目根目录的“static/summernote”文件夹中。

三、添加设置

打开文件“settings.py”,添加相关设置。

1.应用中添加:

'django_summernote'

2.静态目录

# 生产环境静态目录
PROJECT_ROOT = os.path.dirname(os.path.abspath(__file__))
STATIC_ROOT = os.path.join(PROJECT_ROOT, '../statics')
# 开发环境静态目录
STATIC_URL = '/static/'
STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')
# 媒体上传路径
MEDIA_ROOT = os.path.join(BASE_DIR, "static")
MEDIA_DIRS = [os.path.join(BASE_DIR, 'static')]

四、添加URL配置

# 导入静态文件模块
from django.views.static import serve
# 导入配置文件里的文件上传配置
from django.conf import settings
# 配置富文本的URL
path('summernote/', include('django_summernote.urls')),
# 用于上传图片文件
path('static/', serve, {'document_root': settings.MEDIA_ROOT}),
# 用于加载静态文件
path('static/', serve, {'document_root': settings.STATIC_ROOT}),

五、创建数据库表

SummerNote图片上传需要在数据库中创建数据表“django_summernote_attachment”,执行“migrate”命令即可自动创建。

六、测试

1、创建模型

示例代码:(models.py)

from django.db import models
from django_summernote.fields import SummernoteTextField
class SummerNoteTest(models.Model):    
TestField = SummernoteTextField()

2、注册模型

完成以上步骤之后,已经能够在Django后台编辑时使用富文本编辑器了。

不过,这个时候编辑器还是默认的设置,我们可以通过添加设置项进行更改。

七:设置

# 富文本设置
SUMMERNOTE_CONFIG = {
    # 是否使用IFrame的方式,不使用的话必须加载Bootstrap/jQuery。
    'iframe': True,
    # 以下为SummerNote自定义设置
    'summernote': {
        # 隐身模式
        'airMode': False,
        # 编辑器的尺寸
        'width': '960',
        'height': '660',
        # 语言设置
        'lang': 'zh-CN',
        # 设置字体列表
        'fontNames': ['Arial', 'Arial Black', 'Comic Sans MS', 'Courier New', '宋体', '微软雅黑']
    },
    # 附加样式表,多个主题时默认加载最后一个,建议注释不使用的主题。
    'css': (
        '/static/summernote/theme/paper.css',
    ),
}

提示:主题文件需要下载后放入“/static/summernote/theme”文件夹(自己创建)中。

编辑器主题的下载地址:

cerulean:https://bootswatch.com/3/cerulean/bootstrap.css

cosmo:https://bootswatch.com/3/cosmo/bootstrap.css

cyborg:https://bootswatch.com/3/cyborg/bootstrap.css

darkly:https://bootswatch.com/3/darkly/bootstrap.css

flatly:https://bootswatch.com/3/flatly/bootstrap.css

lumen:https://bootswatch.com/3/lumen/bootstrap.css

paper:https://bootswatch.com/3/paper/bootstrap.css

journal:https://bootswatch.com/3/journal/bootstrap.css

readable:https://bootswatch.com/3/readable/bootstrap.css

sandstone:https://bootswatch.com/3/sandstone/bootstrap.css

simplex:https://bootswatch.com/3/simplex/bootstrap.css

slate:https://bootswatch.com/3/slate/bootstrap.css

spacelab:https://bootswatch.com/3/spacelab/bootstrap.css

superhero:https://bootswatch.com/3/superhero/bootstrap.css

united:https://bootswatch.com/3/united/bootstrap.css

yeti:https://bootswatch.com/3/yeti/bootstrap.css

编辑器主题效果预览:

https://summernote.org/examples/#themes-with-bootswatch

第二部分:前台页面使用SummerNote

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

(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>

2.在html中插入summernote块

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

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

$('#summernote').summernote({
            lang : 'zh-CN',
            minHeight : 300,
            dialogsFade : true,
            dialogsInBody : true,
            disableDragAndDrop : false,
        });


文章评论