django-富文本编辑器

富文本编辑器

  • 借助富文本编辑器，管理员能够编辑出来一个包含html的页面，从而页面的显示效果，可以由管理员定义，而不用完全依赖于前期开发人员
  • 此处以tinymce为例，其它富文本编辑器的使用可以自行学习
  • 使用编辑器的显示效果为：

下载安装

进入虚拟环境安装包：pip install django-tinymce

应用到项目中

  • 在settings.py中为INSTALLED_APPS添加编辑器应用
INSTALLED_APPS = (
    ...
    'tinymce',
)
  • 在settings.py中添加编辑配置项
TINYMCE_DEFAULT_CONFIG = {
    'theme': 'advanced',
    'width': 600,
    'height': 400,
}
  • 在根urls.py中配置
urlpatterns = [
    ...
    url(r'^tinymce/', include('tinymce.urls')),
]
  • 在应用中定义模型的属性，并完成数据迁移
1 from django.db import models
2 from tinymce.models import HTMLField
3 class TextTest(models.Model):
4     hcontent=HTMLField()
  • 在应用内admin.py文件完成注册，就可以在后台管理中维护模型的数据
1 from django.contrib import admin
2 from .models import *
3 
4 admin.site.register(TextTest)
  • 在后台管理界面中，就会显示为富文本编辑器，而不是多行文本框

 

自定义使用

  • 定义视图views.py
 1 #----自定义富文本编辑器---
 2 def content(request):
 3     return render(request,'booktest/content.html')
 4 
 5 def content_handle(request):
 6     htmltext = request.POST['hcontent']  # 获取页面表单提交hcontent的值
 7     #修改字段值
 8     # data = TextTest.objects.get(pk=1)   #获取数据库TextTest主键为1的对象
 9     # data.hcontent=htmltext
10     # data.save()   #将修改字段值保存至数据库
11     #新增字段值
12     data=TextTest()
13     data.hcontent=htmltext
14     data.save()
15     context={'htmltext':htmltext}
16     return render(request,'booktest/content_handle.html',context)
  • 配置url
1 from django.conf.urls import url,include
2 from . import views
3 
4 urlpatterns = [
5     url(r'^content/$',views.content),
6     url(r'^content_handle/$',views.content_handle),
7 ]
  • 创建模板content.html
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>content</title>
 6 
 7     <script type="text/javascript" src='/static/tiny_mce/tiny_mce.js'></script>  <!--这里引入的是自动找的django-tinymce包里的文件-->
 8     <script type="text/javascript">   <!--重新定义textarea标签，将textarea标签改为富文本格式-->
 9         tinyMCE.init({
10             'mode':'textareas',
11             'theme':'advanced',
12             'width':400,
13             'height':100
14         });
15     </script>
16 </head>
17 <body>
18     <form action="/content_handle/" method="post">
19         {% csrf_token %}
20         <h4>请输入文本</h4>
21         <textarea name="hcontent" id="" cols="30" rows="10"></textarea>
22         <br>
23         <input type="submit" value="提交">
24     </form>
25 </body>
26 </html>
  • 创建模板content_handle.html
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     {{htmltext|safe}}    <!--对于变量使用safe过滤器,关闭转义-->
 9 
10 </body>
11 </html>

 

 

 

 

 

posted on 2020-02-02 13:40  cherry_ning  阅读(369)  评论(0)    收藏  举报

导航