为了后续我们的开发工作，我们现在需要先在数据库中添加一些博文。我们现在首先优化一下我们之前的工作，将原来的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章，添加对富文本的支持？
