django-xadmin后台配置富文本编辑器(超详情,每一步都有截图代码,成功实现富文本编辑器)

谁践踏了优雅 2024-04-17 05:39 73阅读 0赞

1、首先我们先通过这个github地址：[https://github.com/twz915/DjangoUeditor3][https_github.com_twz915_DjangoUeditor3]      下载DjangoUeditor这个包，进入到包文件夹中找到DjangoUeditor包拷贝到和xadmin同级目录中\\如下图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNTQzMjY0_size_16_color_FFFFFF_t_70][]

这是我的项目结构：

![2019082310014334.png][]

2、将DjangoUeditor注册到settings.py中 INSTALLED\_APPS下    如下图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNTQzMjY0_size_16_color_FFFFFF_t_70 1][]

3、在项目中找到urls.py，配置DjangoUeditor路由：

re_path(r'^ueditor', include('DjangoUeditor.urls')),

如下图：

项目结构：

![20190823100748209.png][]

配置路由：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNTQzMjY0_size_16_color_FFFFFF_t_70 2][]

4、xadmin中添加插件ueditor

由于已经将xadmin源文件拷贝到了项目下，为extra\_apps/xadmin，在xadmin下的plugin中新建一个ueditor.py文件,添加以下代码:

项目结构：

![20190823101230597.png][]

插入代码：

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插件添加到plugins中的\_\_init\_\_.py的PLUGINS中

如图:

![20190823101428320.png][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNTQzMjY0_size_16_color_FFFFFF_t_70 3][]

6\\找到app下的models,在需要使用富文本框的字段使用UEditorField:

UeditorField宽度高度有两种写法，一个可以直接写死width=900,还可以用百分比的方式，例：width='90%'，百分比方式必须加   ' '，不然会报错

from DjangoUeditor.models import UEditorField
    
    
    class InformationContent(models.Model):
        id = models.AutoField(primary_key=True)
        ic_id = models.ForeignKey(to='SonClassify', to_field='id', on_delete=True, verbose_name='编辑内容')
        ic_title = models.CharField(max_length=200, verbose_name='标题')
        ic_content = UEditorField(verbose_name='内容编辑', width='90%', height=900, toolbars='full',
                                  imagePath='Article_img/%%Y/%%m/',
                                  filePath='Article_file/%%Y/%%m/',
                                  upload_settings={'imageMaxSizing': 1024000})
        up_time = models.DateTimeField(default=datetime.now, verbose_name='发布时间')
    
        class Meta:
            db_table = 'information_content'
            verbose_name = '内容编辑'
            verbose_name_plural = verbose_name
    
        def __str__(self):
            return self.ic_title

7、在app下找到admin.py或者自己创建的adminx.py文件中，配置插件

style\_fields = \{'ic\_content': 'ueditor'\}     ic\_content是自己在models创建的字段,后面必须跟上ueditor

from .models import InformationContent
    
    
    class InformationContentXadmin(object):
        """内容编辑"""
        list_display = ['ic_id', 'ic_title', 'up_time']
        search_fields = ['id', 'up_time']
        list_editable = ['ic_id', 'ic_title', 'up_time']
        list_filter = ['ic_id', 'ic_title', 'up_time']
        show_detail_fields = ['ic_id', 'ic_title', 'up_time']
        style_fields = {'ic_content': 'ueditor'}
    
    
    xadmin.site.register(InformationContent, InformationContentXadmin)

8、配置上传文件的加载路径

在settings里面配置

MEDIA_URL='/media/'
    MEDIA_ROOT=os.path.join(BASE_DIR,'media')

在项目urls配置路由，因为版本差异，2.0以上版本可以用re\_path

from django.views.static import serve
    在urls里面配置
    url(r'^media/(?P<path>.*)$',serve,{"document_root":settings.MEDIA_ROOT},name='media')

xadmin配置地址：[https://blog.csdn.net/qq\_42543264/article/details/99078971][https_blog.csdn.net_qq_42543264_article_details_99078971]

[https_github.com_twz915_DjangoUeditor3]: https://github.com/twz915/DjangoUeditor3
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNTQzMjY0_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/11/ce84464cfe8344b689bcbad6ac5d60c5.png
[2019082310014334.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/11/8feb7bff9829405a90ae1dd7107b119a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNTQzMjY0_size_16_color_FFFFFF_t_70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/11/6143b804faa54cdbae22287b81d00543.png
[20190823100748209.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/11/020622916ba242f3953d3a893eeb74c9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNTQzMjY0_size_16_color_FFFFFF_t_70 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/11/8497989d653a4e2aa312fc73a86a116d.png
[20190823101230597.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/11/63dbfb888a1c42bca4a3141a2893f882.png
[20190823101428320.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/11/98d468057cfd40739f0165832550eb92.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNTQzMjY0_size_16_color_FFFFFF_t_70 3]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/11/2e0c265c5f0b474ab677d8894c9a4997.png
[https_blog.csdn.net_qq_42543264_article_details_99078971]: https://blog.csdn.net/qq_42543264/article/details/99078971