1、首先我们先通过这个github地址:https://github.com/twz915/DjangoUeditor3 下载DjangoUeditor这个包,进入到包文件夹中找到DjangoUeditor包拷贝到和xadmin同级目录中\如下图:
这是我的项目结构:
2、将DjangoUeditor注册到settings.py中 INSTALLED_APPS下 如下图:
3、在项目中找到urls.py,配置DjangoUeditor路由:
re_path(r'^ueditor', include('DjangoUeditor.urls')),
如下图:
项目结构:
配置路由:
4、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)
5、将ueditor插件添加到plugins中的__init__.py的PLUGINS中
如图:
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')