富文本编辑器的使用 | Django开发
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了富文本编辑器的使用 | Django开发相关的知识,希望对你有一定的参考价值。
# 这里以tinymce为例;
1.安装django-tintmce
pip install django-tinymce
2.添加应用到settings.py
INSTALLED_APPS = ( ... ‘tinymce‘, )
3.添加编辑配置项到settings.py中
TINYMCE_DEFAULT_CONFIG = { ‘theme‘: ‘advanced‘, # ‘theme‘: ‘simple‘, ‘width‘: 600, ‘height‘: 400, ‘language‘: ‘zh-CN‘, ‘theme_advanced_buttons1‘: ‘bold, italic, underline, strikethrough, justifyleft, justifycenter, justifyright, justifyfull, styleselect, bullist, numlist, outdent, indent, undo,redo, link, unlink, image, cleanup, help, code, table, row_before, row_after, delete_row, separator, rowseparator‘, ‘theme_advanced_buttons2‘: ‘col_before, col_after, delete_col, hr, removeformat, sub, sup, formatselect, fontselect, fontsizeselect, forecolor,charmap,visualaid,spacer,cut,copy,paste‘ }
4.在项目urls.py中配置
urlpatterns = [ ... url(r‘^tinymce/‘, include(‘tinymce.urls‘)), ]
5.展示方法
5.1 在后台展示
-- views.py
定义模型类属性; from django.db import models from tinymce.models import htmlField class Test1(models.Model): hcontent = HTMLField()
-- urls.py
url(r‘^tinymce/‘, include(‘tinymce.urls‘)),
-- admin.py
admin.site.register(Test1)
5.2 自定义使用(页面中使用)
-- htmlEditor
<!DOCTYPE html> <html> <head> <title>富文本编辑器</title> <script type="text/javascript" src=‘/static/tiny_mce/tiny_mce.js‘></script> <script type="text/javascript"> tinyMCE.init({ ‘mode‘:‘textareas‘, // mode指向的文本样式都改成符文本编辑框 ‘theme‘:‘advanced‘, ‘width‘:400, ‘height‘:100 }); </script> </head> <body> <form method="post" action="/htmlEditorHandle/"> <input type="text" name="hname"> <br> <textarea name=‘hcontent‘>哈哈,这是啥呀</textarea> <br> <input type="submit" value="提交"> </form> </body> </html>
>>><<<
-- views.py
def htmlEditor(request): return render(request, ‘booktest/htmlEditor.html‘) def htmlEditorHandle(request): # 处理接收数据 html = request.POST[‘hcontent‘] test1 = Test1.objects.get(pk=1) # 将接收到的属性赋给字段对象的属性; test1.content = html # 存入数据库 test1.save() context = {‘content‘:html} return render(request,‘booktest/htmlShow.html‘, context)
-- urls.py
url(r‘^htmlEditor/‘, views.htmlEditor), url(r‘^htmlEditorHandle/‘, views.htmlEditorHandle),
-- htmlShow.html
<!DOCTYPE html> <html> <head> <title>htmlShow</title> </head> <body> {{ content|safe }} <!-- 防止html转义 --> </body> </html>
以上是关于富文本编辑器的使用 | Django开发的主要内容,如果未能解决你的问题,请参考以下文章
python3Django中使用Uediter百度富文本编辑器的配置方法