Django框架—富文本编辑器

• 借助富文本编辑器，网站的编辑人员能够像使用offfice一样编写出漂亮的、所见即所得的页面
• 此处以tinymce为例，其它富文本编辑器的使用也是类似的
• 在虚拟环境中安装包

pip install django-tinymce==2.6.0

• 安装完成后，可以使用在Admin管理中，也可以自定义表单使用

示例

• 在test6/settings.py中为INSTALLED_APPS添加编辑器应用

INSTALLED_APPS = (
    ...
    'tinymce',
)

• 在test6/settings.py中添加编辑器配置

TINYMCE_DEFAULT_CONFIG = {
    'theme': 'advanced',
    'width': 600,
    'height': 400,
}

• 在test6/urls.py中配置编辑器url

urlpatterns = [
    ...
    url(r'^tinymce/', include('tinymce.urls')),
]

• 接下来介绍在Admin页面、自定义表单页面的使用方式
• 
  
• 在Admin中使用

• 
  

• • 在booktest/models.py中，定义模型的属性为HTMLField()类型

  from django.db import models
  from tinymce.models import HTMLField
  
  class GoodsInfo(models.Model):
      gcontent=HTMLField()
  

  • 生成迁移

  python manage.py makemigrations
  

  • 迁移

  python manage.py migrate
  

  • 在本示例中没有定义其它的模型类，但是数据库中有这些表，提示是否删除，输入no后回车，表示不删除，因为其它的示例中需要使用这些表

  

  • 迁移完成，新开终端，连接mysql，使用test2数据库，查看表如下

  

  • 发现并没有表GoodsInfo，解决办法是删除迁移表中关于booktest应用的数据

  delete from django_migrations where app='booktest';
  

  • 再次执行迁移

  python manage.py migrate
  

  • 成功完成迁移，记得不删除no

  

  • 在booktest/admin.py中注册模型类GoodsInfo

  from django.contrib import admin
  from models import *
  class GoodsInfoAdmin(admin.ModelAdmin):
      list_display = ['id']
  
  admin.site.register(GoodsInfo,GoodsInfoAdmin)
  

  • 运行服务器，进入admin后台管理，点击GoodsInfo的添加，效果如下图

  

  • 在编辑器中编辑内容后保存

  显示

  • 通过富文本编辑器产生的字符串是包含html的
  • 在数据库中查询如下图

  

  • 在模板中显示字符串时，默认会进行html转义，如果想正常显示需要关闭转义
  • 问：在模板中怎么关闭转义
  • 方式一：过滤器safe
  • 方式二：标签autoescape off
  • 在booktest/views.py中定义视图show，用于显示富文本编辑器的内容

  from models import *
  ...
  def show(request):
      goods=GoodsInfo.objects.get(pk=1)
      context={'g':goods}
      return render(request,'booktest/show.html',context)
  

  • 在booktest/urls.py中配置url

      url(r'^show/', views.show),
  

  • 在templates/booktest/目录下创建show.html模板

  
  
      
  
  
  id:{{g.id}}
  
  {%autoescape off%}
  {{g.gcontent}}
  {%endautoescape%}
  
  {{g.gcontent|safe}}
  
  
  

  • 运行服务器，在浏览器中输入如下网址

  http://127.0.0.1:8000/show/
  

  • 浏览效果如下图