Django中富文本编辑器总结
富文本编辑器
概念
- 能够设置文字样式的页面成为文本编辑器(带有格式的文本信息)
tinyce 配置:
1.在虚拟环境中安装包。
pip install django-tinymce==2.6.0
2.在test6/settings.py中为INSTALLED_APPS添加编辑器应用。
INSTALLED_APPS = ( ... 'tinymce', )
3.在test6/settings.py中添加编辑器配置。
TINYMCE_DEFAULT_CONFIG = { 'theme': 'advanced', 'width': 600, 'height': 400, }
4.在test6/urls.py中配置编辑器url。
urlpatterns = [ ... url(r'^tinymce/', include('tinymce.urls')), ]
在后台管理页面中使用(Admin):
1)在booktest/models.py中,定义模型类,模型类的属性为HTMLField()类型。
from django.db import models from tinymce.models import HTMLField class GoodsInfo(models.Model): gcontent=HTMLField()
2)生成迁移文件。
python manage.py makemigrations
3)执行迁移。
python manage.py migrate
4)在booktest/admin.py中注册模型类GoodsInfo
from django.contrib import admin from models import * class GoodsInfoAdmin(admin.ModelAdmin): list_display = ['id'] admin.site.register(GoodsInfo,GoodsInfoAdmin)
5)运行服务器,进入admin后台管理,点击GoodsInfo的添加,即可看到效果
在编辑器中编辑内容后保存。即可
自定义编辑器:
1)在booktest/views.py中定义视图editor,用于显示编辑器。
def editor(request): return render(request, 'booktest/editor.html')
2)在booktest/urls.py中配置url。
url(r'^editor/',views.editor),
3)在项目的目录创建statics文件夹在该文件的文件夹里面创建js,css,img文件夹并在配置文件setting.py里面添加静态文件的查找路径
STATICFILES_DIRS = [os.path.join(BASE_DIRS, 'statics')]
4)打开py_django虚拟环境的目录,找到tinymce的目录。
/home/python/.virtualenvs/py_django/lib/python2.7/site-packages/tinymce/static/tiny_mce
5)拷贝tiny_mce.js文件、langs文件夹以及themes文件夹拷贝到项目目录下的static/js/目录下。
6)在templates/booktest/目录下创建editor.html模板。
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<head> <meta charset="UTF-8"> <title>editor</title> <script src="/static/js/tiny_mce_src.js"></script> <script> tinymce.init({ 'mode': 'textareas', 'theme': 'advanced', 'width': 500, 'height': 300, }) </script> </head> <body> <form action="/get_content/" method="post"> {% csrf_token %} <textarea name="content" id="" cols="30" rows="10" ></textarea> <input type="submit" value="提交"> </form> </body>
7 )配置url
8)运行服务器,在浏览器中输入如下网址:
http://127.0.0.1:8000
使用已保存的富文本内容
通过富文本编辑器产生的字符串是包含html的:例如:
'<title>展示富文本编辑器内容</title>'
在模板中显示字符串时,默认会进行html转义,如果想正常显示需要关闭转义。
问:在模板中怎么关闭转义
方式一:过滤器safe
方式二:标签autoescape off
使用流程:
1)在booktest/views.py中定义视图show,用于显示富文本编辑器的内容。
def show_goods(request): """显示数据库当中的内容""" contents = GoodsInfo.objects.get(id=2) return render(request, 'booktest/show_goods.html', {'contents': contents})
2)在booktest/urls.py中配置url。
3)在templates/booktest/目录下创建show.html模板。
<body> {{ contents.gcontent| safe }} {% autoescape off%} {{ contents.gcontent }} {% endautoescape %} </body>
4)运行服务器,在浏览器中输入如下网址:即可显示
http://127.0.0.1:8000