django+xadmin集成DjangoUeditor3富文本编辑器

DjangoUeditor帮助在Django应用中集成百度Ueditor HTML编辑器,Django是Python世界最有影响力的web框架。 Ueditor HTML编辑器是百度开源的在线HTML编辑器,功能非常强大，像表格可以直接拖动调整单元格大小等。

环境

python 3.6.7
django 2.0.7

下载DjangoUeditor3

由于本次使用的是python3.6,所以需要下载DjangoUeditor3
下载zip包到本地，解压

配置步骤

1.在项目的根目录下创建extra_apps文件夹，将解压的DjangoUeditor3文件夹中的DjangoUeditor复制到extra_apps文件夹中，即下图所示文件

复制完成后目录为

然后在pycharm中鼠标右击extra_apps文件夹->Mark Directory as ->Sources Root
这样就可以直接导入 DjangoUeditor了，而不是到环境中去搜索

2.配置setting.py文件
在文件开头添加

import sys
sys.path.insert(0,os.path.join(BASE_DIR, 'extra_apps'))

在INSTALLED_APPS = []里面添加DjangoUeditor

INSTALLED_APPS = [
'DjangoUeditor',
]

3.配置项目主urls.py
添加

 path('ueditor/',include('DjangoUeditor.urls')),

4.在应用的models.py使用UEditorField字段，即将以前使用的models.xxx换成UEditorField

class Article(models.Model):

    title = models.CharField('文章标题',max_length=128)
    author = models.ForeignKey(User, verbose_name='作者',on_delete=models.CASCADE)
    body = UEditorField(u'文章内容',width=1000, height=400, toolbars="full", imagePath="article/images/", filePath="article/files/", upload_settings={"imageMaxSize":1204000},
             settings={},command=None,blank=True)
    def __str__(self):
        return self.title

    class Meta:
        # ordering必须是列表或者元组
        ordering = ['-created_time']
        verbose_name = '博客正文'
        verbose_name_plural = verbose_name

5.在xadmin中添加ueditor插件
在extra_apps/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)

6.在extral_apps/xadmin/plugin下的init.py中添加上ueditor

PLUGINS = (
    ...
    'ueditor',
)

7.在adminx.py中注册的表单中声明你的UEditorField字段的属性名字，如下我添加的是文章主体部分，即body属性，需要你换成是在models.py中设置的属性名字

class ArticleAdmin:
    ...
    style_fields = {"body": "ueditor"}

8.生成迁移文件并应用到数据库

python manage.py makemigrations
python manage.py migrate

最后进如后台管理界面的文章添加部分就可以看到效果了。

PS:不过由于DjangoUeditor和Markdown会有冲突，如果使用DjangoUeditor就会使Markdown语法失效，所以请自行选择。

最后编辑于：2019.04.29 19:43:47