django xadmin的富文本安装

为提升效率，我们可以使用富文本编辑器添加数据。支持Django的富文本编辑器很多，这里我推荐使用DjangoUeditor，Ueditor是百度开发的一个富文本编辑器，功能强大。下面教大家安装如何使用DjangoUeditor。

1、首先我们先下载DjangoUeditor包。点击下面的链接进行下载！下载完成然后解压到项目根目录里。

https://www.django.cn/media/upfile/DjangoUeditor_20181010013851_248.zip

2、settings.py里注册APP，在INSTALLED_APPS里添加’DjangoUeditor’,。

	blog/settings.y
	INSTALLED_APPS = [
	    'django.contrib.admin',
	    ....
	    'DjangoUeditor', #注册APP应用
	]

3、blog/urls.py里添加url。

blog/urls.py
...
from django.urls import path, include
#留意上面这行比原来多了一个include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('ueditor/', include('DjangoUeditor.urls')), 

#添加DjangoUeditor的URL
]

4、修改blog/models.py里需要使用富文本编辑器渲染的字段。这里面我们要修改的是Article表里的body字段。

把原来的：

blog/models.py

content = models.TextField()

修改成：

blog/models.py
from DjangoUeditor.models import UEditorField 

#头部增加这行代码导入UEditorField

content = UEditorField('内容', width=800, height=500, 
  toolbars="full", imagePath="upimg/",filePath="upfile/",
  upload_settings={"imageMaxSize": 1204000},
  settings={}, command=None, blank=True
                    )

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添加到plugin下的_init_中

扫描二维码关注公众号，回复： 13268915 查看本文章

PLUGINS = ( ... 'ueditor', )

7、将ueditor添加到adminx.py中，添加到你需要的内容的列表属性中！

这里是最容易出错的地方，请读者仔细阅读！

style_fields = {"detail": "ueditor"}                            
#这里的detail 要和你的 blog/models.py里的content一致！

改为

style_fields = {"content": "ueditor"}

8、由于我把富文本文件放在extra_apps下的，所以在setting里面添加下面这些代码！

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

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

上面步骤完成后，我们启动项目，进入文章发布页面。提示出错：

python manage.py makemigrations

python manage.py migrate

python manage.py runserver

错误页面上有提示，出错的地方是下面文件的93行。

H:\djangosite\blog\Scripts\blog\lib\site-packages\django\forms\boundfield.py in as_widget, line 93

我这里使用的是最新版本的Django2.0.1所以报错，解决办法很简单。打开这个文件的93行，注释这行即可。

修改成之后，重新刷新页面，就可以看到我们的富文本编辑器正常显示。

django xadmin的富文本安装

django xadmin的富文本安装

猜你喜欢