1. https://github.com/twz915/DjangoUeditor3下載包,進入包資料夾,找到DjangoUeditor包拷貝到專案下,和xadmin同級目錄

 

 

2. 找到專案的settings檔案,註冊app

 

3. 找到專案urls檔案,配置DjangoUeditor路由

 

4. 找到app下的models,在需要使用富文字框的欄位使用UEditorField,相關引數含義可參考文件:https://github.com/zhangfisher/DjangoUeditor

 

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

6. 將ueditor外掛新增到plugins中的__init__.py的PLUGINS中

 

7. 找到app下的adminx.py檔案,配置外掛

 

8. 配置上傳檔案的載入路徑

 

 

最終效果