为了后续我们的开发工作,我们现在需要先在数据库中添加一些博文。我们现在首先优化一下我们之前的工作,将原来的TextField改为支持富文本。这里我们选用的是百度的UEditor。
1. 安装
直接使用pip安装:pip install DjangoUeditor
2. 配置settings
在settings中中的INSTALLED_APPS中加入DiangoUeidtor
INSTALLED_APPS = [ 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.contrib.messages', 'django.contrib.staticfiles', 'xadmin', 'crispy_forms', 'user', 'blog', 'DjangoUeditor', ]
3. 配置url
urlpatterns = [ path('xadmin/', xadmin.site.urls), path('blog/', include('blog.urls')), path('ueditor/', include('DjangoUeditor.urls')), ]
4. 为了支持富文本编辑时传入的图片视频等多媒体文件,我们同时还需要在url中加入MEDIA_ROOT
import xadmin from django.urls import path, re_path, include from django.views.static import serve from zcwBlog.settings import MEDIA_ROOT, STATIC_ROOT urlpatterns = [ path('xadmin/', xadmin.site.urls), path('blog/', include('blog.urls')), path('ueditor/', include('DjangoUeditor.urls')), re_path(r'media/(?P<path>.*)', serve, {'document_root': MEDIA_ROOT}), re_path(r'static/(?P<path>.*)', serve, {'document_root': STATIC_ROOT}), ]
5. 在xadmin的plugins文件夹中添加ueditor.py文件,并写入如下内容:
import xadmin from xadmin.views import BaseAdminPlugin, CreateAdminView, UpdateAdminView from django.conf import settings from DjangoUeditor.widgets import UEditorWidget from DjangoUeditor.models import UEditorField class XadminUEditorWidget(UEditorWidget): def __init__(self, **kwargs): self.ueditor_options = kwargs self.Media.js = None super(XadminUEditorWidget, self).__init__(kwargs) class UEditorPlugin(BaseAdminPlugin): def get_field_style(self, attrs, db_field, style, **kwargs): if style == 'ueditor': if isinstance(db_field, UEditorField): widget = db_field.formfield().widget param = {} param.update(widget.ueditor_settings) param.update(widget.attrs) print("XXXXXXXXXXXXXXXXX attrs: %s" %attrs) return {'widget': XadminUEditorWidget(**param)} return attrs def block_extrahead(self, context, nodes): js = '<script type="text/javascript" src="%s"></script>' % (settings.STATIC_URL + "ueditor/ueditor.config.js") js += '<script type="text/javascript" src="%s"></script>' % (settings.STATIC_URL + "ueditor/ueditor.all.min.js") nodes.append(js) xadmin.site.register_plugin(UEditorPlugin, UpdateAdminView) xadmin.site.register_plugin(UEditorPlugin, CreateAdminView)
内容比较固定
6. 修改xadmin/plugins包中的__init__.py文件,将ueditor添加到其中规定PLUGINS元组中:
PLUGINS = ( ………… 'importexport', 'ueditor' )
7. 修改我们的apps/blog/models.py文件,将文章内容,以及评论的内容分别修改为UEditor
content = UEditorField(default="", width=600, height=300, toolbars="full", imagePath="blog/ueditor/%(basename)s_%(datetime)s.%(extname)s", filePath="blog/ueditor/%(basename)s_%(datetime)s.%(extname)s", upload_settings={"imageMaxSize": 1204000}, verbose_name='文章内容')
comment= UEditorField(default="", width=600, height=300, toolbars="full", imagePath="comment/ueditor/%(basename)s_%(datetime)s.%(extname)s", filePath="commemt/ueditor/%(basename)s_%(datetime)s.%(extname)s", upload_settings={"imageMaxSize": 1204000}, verbose_name='文章评论')
8. 最后我们还需要分别在我们的adminx.py文件中的ArticleAdmin和CommentAdmin中添加:
style_fields = {'content': 'ueditor'}
9. 现在打开我们的后台系统可以发现,文章内容部分已经支持富文本的编辑了。
10. 在我们的html文件中,由于html页面会进行转义,因此我们需要在显示富文本的地方添加代码块{% autoescape off %}{% endautoescape %}
提醒:
对于python3版本,DjangoUeditor还会存在兼容性问题,具体解决问题可以看本人的另一篇文章。
转载请注明:禅思 » 第3章,添加对富文本的支持?