您现在的位置是:网站首页>DjangoDjango

django xadmin的富文本安装

deling2019年2月23日Django421人已围观

简介关于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_ 

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行,注释这行即可。

 

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

Tags: Django

很赞哦! (9)

上一篇:django的安装

下一篇: 无

留言

来说点儿什么吧...

您的姓名: *

选择头像: *

留言内容:

    2019年2月25日 13:35嘿嘿

    2019年2月26日 13:20ok

    可以可以!

    2019年3月18日 09:2311

    1

    2019年3月28日 09:24www.ikeguang.com

    可以可以

    2019年5月29日 18:47qwe

    666

    2019年5月30日 16:52BlankYk

    he,tui~

    2019年5月30日 17:04123

    321

    2019年6月26日 10:02周树人

    厉害厉害

    2019年6月26日 10:34sdlakrj

    sdaag

    2019年6月29日 15:31sdagafdbaf

    dgafdgdfh

    站长回复:你这是什么什么高级语言,我表示看不懂哈哈

    2019年7月6日 16:37啦啦

    写的真好!谢谢博主

    站长回复:谢谢!

    2019年8月14日 12:35傻傻

    厉害 小林

    2019年9月11日 20:05sdfw

    fgbhjksdgjdfhag

    2019年9月11日 22:18baba

    keke tui