Django配置Ueditor富文本编辑器并且添加到xadmin当中

只因为你温柔

已于 2022-12-12 12:27:25 修改

阅读量932

点赞数

分类专栏： # Xadmin 文章标签：富文本编辑器

于 2019-07-08 13:26:32 首次发布

本文链接：https://blog.csdn.net/zsx1314lovezyf/article/details/95052504

版权

Xadmin 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

添加富文本编辑器必须在测试环境下
添加富文本编辑器, 必须先把xadmin添加到项目中, 怎么添加xadmin我博客里也有, 去找一下.

https://github.com/twz915/DjangoUeditor3下载包,进入包文件夹,找到DjangoUeditor包拷贝到项目下,和xadmin同级目录
找到项目的settings文件,注册app
找到项目urls文件,配置DjangoUeditor路由

找到app下的models,在需要使用富文本框的字段使用UEditorField,相关参数含义可参考文档:https://github.com/zhangfisher/DjangoUeditor

 from DjangoUeditor.models import UEditorField 

 列子1
 content=UEditorField(verbose_name='博客内容',  
                  	  width=700,  
                  	  height=400,  
                      toolbars='full',  
                      imagePath='ueditor/images/',  
                      filePath='ueditor/files/',  
                      upload_settings={'imageMaxSizing':1024000},  
                      default='')

例子2
1.models.py导入UEditorField
在这里插入图片描述
2.找到TextField
3.进行替换

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)

列子
在这里插入图片描述

将ueditor插件添加到plugins中的__init__.py的PLUGINS中
找到app下的adminx.py文件,配置插件

.配置上传文件的加载路径, 在settings里面配置((如果已经配置了media就不需要重复配置)
)

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

 # 以后再富文本编辑器上上传的图片就会保存到static/media/ueditor/images/
 # 以后再富文本编辑器上上传的文件就会保存到static/media/ueditor/files/
 # ueditor/images/      ueditor/files/ 是模型类中写的上传位置
 # static/media/是配置文件中写的

在这里插入图片描述