django学习——xadmin中集成富文本编辑器ueditor

xadmin为django后台管理系统admin的升级版，点击进入github

在对后台进行编辑时，采用百度开源的富文本编辑器ueditor，本文采用djangoueditor，源程序点此进入。由于作者不再对其进行维护，这个版本不再适用于Python3版本，Python3的版本安装点此进入。

对于以上xadmin和djangoueditor 的安装，本人建议直接集成在pycharm中，而不是装在虚拟环境中。因为xadmin中如果需要集成插件的话，需要对其进行添加；而djangoueditor采用pip安装的话，只能用在Python2版本中。

因此建议将源码包下载下来，并直接放在项目下的extra_apps中，如下所示：

这里写图片描述

本文的开发环境如下：

python 3.6
diango 1.11.7
pycharm 
windows 7

1、将djangoueditor添加到setting.py中

INSTALLED_APPS = [
    ...
    'DjangoUeditor',
]

2、添加url

将URL添加到urlpatterns中去：

    #富文本编辑器
    url(r'^ueditor/',include('DjangoUeditor.urls' )),

3、修改model

将模型中需要改为富文本添加的字段，一般为TextField，改为如下：

from DjangoUeditor.models import UEditorField

class Course(models.Model):
    name = models.CharField(max_length=20, verbose_name='课程名称')
    desc = models.TextField(verbose_name='课程描述')
    detail = UEditorField(verbose_name='课程详情',width=600, height=300, toolbars="full", imagePath="course/ueditor/", filePath="course/ueditor/", upload_settings={"imageMaxSize":1204000},default='')

关于UEditorField字段中的具体参数详情，可以参考文档

4、xadmin中添加插件ueditor

由于已经将xadmin源文件拷贝到了项目下，本文为extra_apps/xadmin，在xadmin下的plugin中新建一个ueditor.py文件，里面写入如下：

import xadmin
from xadmin.views import BaseAdminPlugin, CreateAdminView, ModelFormAdminView, UpdateAdminView
from DjangoUeditor.models import UEditorField
from DjangoUeditor.widgets import UEditorWidget
from django.conf import settings


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)
                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)

5、将ueditor添加到plugin下的_init_中

PLUGINS = (
    ...
    'ueditor',
)

6、将ueditor添加到adminx.py中

class CourseAdmin(object):
    ...
    style_fields = {"detail": "ueditor"}

关于style_fields，如下：style_fields = {}
指定 Field 的 Style， Style一般用来实现同一种类型的字段的不同效果，例如同样是 radio button，有普通及inline两种 Style。通常 xadmin 针对表单的插件会实现更多的 Field Style。您使用这些插件后，只要方便的将想要使用插件效果的字段设置成插件实现的 Style 即可。

7、在前端显示的话，需要对html页面修改如下

{% autoescape off %}
{{ course.detail }}
{% endautoescape %}

目的是为了阻止字符的转义

通过以上设置就可以登录后台xadmin中，对内容进行富文本编辑，并显示在前端页面了，效果如下：

这里写图片描述

如果有问题可以留言，整个课程系统上传到我的github，如果觉得有用，请点个星星，谢谢！

https://github.com/geerniya/MxOnline2

django学习——xadmin中集成富文本编辑器ueditor

猜你喜欢