python web django开发教程_Django2：Web项目开发入门笔记（26）

这一篇教程，我们一起来学习在Django2中使用SummerNote富文本编辑器。

这款编辑器基于Bootstrap和Jquery，也就是说项目中要先准备好Bootstrap和JQuery相关文件，当然也可以在线调用。

相对于CKEditor我更喜欢SummerNote，因为它样式很漂亮，而且使用也很简单，图片上传不用再自己编写代码。

提示：本教程基于Django项目，请先完成项目与应用的创建。

第一部分：Django后台使用SummerNote

一、安装SummerNote库

通过“pip”命令就能够安装SummerNote库。

pip install django-summernote

二、添加静态文件

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

下载之后，解压缩，将“dist”文件夹中的文件复制到项目根目录的“static/summernote”文件夹(自己创建)中。

三、添加设置

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

示例代码：

DEBUG = False # 编辑器的粗体、斜体等功能，在执行“collectstatic”命令之前需要关闭DEBUG模式才能正常使用。

ALLOWED_HOSTS = ['*'] # DEBUG模式关闭时，必须设置此项，生产环境中应为域名。

INSTALLED_APPS = [

...省略部分代码...

'django_summernote',

]

STATIC_URL = '/static/'

STATIC_ROOT = os.path.join(BASE_DIR, 'static')

MEDIA_URL = '/media/'

MEDIA_ROOT = os.path.join(BASE_DIR, 'media') # 官方文档为“media/”，实际测试中导致图片上传不显示。

提示：“MEDIA_ROOT”设置中，官方文档为“media/”是因为面向Django1.11，因为没有Django1.11未做该环境中的验证。

四、添加URL配置

示例代码：(urls.py)

from django.contrib import admin

from django.urls import path, include

from summer import settings

from django.views.static import serve

from summerapp import views as view

urlpatterns = [

path('summernote/', include('django_summernote.urls')),

path('media/', serve, {'document_root': settings.MEDIA_ROOT}), # 用于上传图片文件

path('static/', serve, {'document_root': settings.STATIC_ROOT}), # 用于加载静态文件

path('admin/', admin.site.urls),

]

五、创建数据库表

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

注意：先根据项目使用的数据库完成数据库的创建与配置。

python manage.py migrate

到这里，我们就可以在Django后台中使用这个文本编辑器了。

六、测试

1、创建模型

示例代码：(models.py)

from django.db import models

from django_summernote.fields import SummernoteTextField

class SummerNoteTest(models.Model):

TestField = SummernoteTextField()

2、注册模型

示例代码：(admin.py)

from django.contrib import admin

from .models import SummerNoteTest

admin.site.register(SummerNoteTest)

另外，如果想让一个模型的所有TextField字段都使用SummerNote，可以在“admin.py”文件中进行设置。

例如：

from django.contrib import admin

from django_summernote.admin import SummernoteModelAdmin

from .models import SummerNoteTest

class SummerNoteTestAdmin(SummernoteModelAdmin): # instead of ModelAdmin

summernote_fields = '__all__'

admin.site.register( SummerNoteTest,SummerNoteTestAdmin)

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

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

七：设置

示例代码：(settings.py)

SUMMERNOTE_CONFIG = {

# 是否使用IFrame的方式，不使用的话必须加载Bootstrap/jQuery。

'iframe': True,

# 以下为SummerNote自定义设置

'summernote': {

# 隐身模式

'airMode': False,

# 编辑器的尺寸

'width': '75%',

'height': '360',

# 语言设置

'lang': 'zh-CN',

# 设置字体列表

'fontNames':

[

'Arial',

'Arial Black',

'Comic Sans MS',

'Courier New',

'宋体', # 也可以写为“Songti”

'Microsoft YaHei' # 也可以写为“微软雅黑”

]

},

# 附加样式表

'css': (

'/static/summernote/theme/paper.css', # 附加编辑器主题

# '/static/summernote/theme/flatly.css',# 多个主题时默认加载最后一个，建议注释不使用的主题。

),

}

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

编辑器主题的下载地址：

以上只是部分设置内容，更多设置请参考：

八、收集静态文件

执行“python manage.py collectstatic”命令,让Django自动收集Admin以及APP中的静态文件到根目录的“static”文件夹下。

此时，不管“setting.py”文件中的“DEBUG”设置为“True”还是“False”，编辑器都能正常使用了。

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

一、添加静态文件

如果只是在前台页面使用SummerNote，无需安装django-summernote。

下载已编译的SummerNote文件，以及需要的主题文件，添加到项目根目录的“static”文件夹中。

二、载入静态文件

在“settings.py”和“urls.py”文件中，先完成“static”的相关设置(参考第一部分内容)。

然后，在模板文件(例如命名为“summer_note.html”)的

…标签中载入静态文件。

示例代码：(summer_note.html)

编辑器测试

{% load static %}

...后续代码在此处添加...

三、添加编辑器

添加编辑器有两种方式，通过

标签或者都可以添加。

示例代码：

...此处添加后续代码...

www.opython.com 原创教程

{#

#}

{# #}{#

#}

四、设置

设置内容需要写在JavaScript脚本中。

编辑器默认功能不够完整，可以通过设置进行添加修改。

示例代码：

$(document).ready(function () {

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

{

width: 750,

height: 360,

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

lang: 'zh-CN',

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

['style', ['style']], {#文本样式#}

['font', ['bold', 'italic', 'underline', 'superscript', 'subscript',

'strikethrough', 'clear']], {#字体样式#}

['fontname', ['fontname']], {#字体列表#}

['fontsize', ['fontsize']], {#字体尺寸#}

['color', ['color']], {#字体颜色#}

['para', ['ul', 'ol', 'paragraph']], {#文本列表#}

['height', ['height']], {#行高#}

['table', ['table']], {#表格#}

['insert', ['link', 'picture', 'video', 'hr']], {#插入项#}

['view', ['fullscreen', 'codeview']], {#视图#}

['help', ['help']]{#帮助#}

],

fontNames:

[

'Arial',

'Arial Black',

'Comic Sans MS',

'Courier New',

'宋体',

'Microsoft YaHei'

]

}

);

});

五、测试

1、添加URL配置

示例代码：

path('', view.index),

2、定义视图函数

示例代码：

from django.shortcuts import render

def index(request):

return render(request,'summer_note.html')

启动开发服务器，打开链接“http://localhost:[自定义端口号]”就能够看到编辑器了。

项目源代码下载：【点此下载】