1. 安装DjangoUeditor
pip install DjangoUeditor
将下载的源码放在项目中 extra_apps
并设置 settings.py
2.配置settings，添加app and path('extra_apps')
# add extra_apps
sys.path.insert(0, os.path.join(BASE_DIR, 'extra_apps'))
INSTALLED_APPS = [
'django.contrib.admin',
...
# 富文本
'DjangoUeditor',
]
3. 配置 url
url(r'^ueditor/',include('DjangoUeditor.urls' )),
4. model.py
class Question(models.Model):
# 富文本 我试过很多其他的富文本
# content = HTMLField(verbose_name='内容')
# content = MarkdownField(verbose_name='内容')
# content = models.TextField(verbose_name='内容')
#ckeditor.fields.RichTextField 不支持上传文件的富文本字段
#
question_context = UEditorField(verbose_name='内容', width=600, height=1000,
default=u'', imagePath="media/%%Y/%%m/",
toolbars='full', filePath='%%Y/%%m/',
upload_settings={"imageMaxSize": 1204000},
5. 迁移数据库
makemigrations
migrate
6. 在 xadmin 中添加ueditor插件：extra_apps/xadmin/plugins目录下新建python文件：
# 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)
在plugins目录下的__init__.py文件下将ueditor插件添加进入，否则xadmin不认识这个插件
PLUGINS = (
'actions',
'filters',
.....
'importexport',
'ueditor'
adminx.py 设置，必须把设置成富文本的字段进行如下配置
# -*- coding: utf-8 -*-
__author__ = 'sam wang'
__date__ = '2021/1/15 9:13'
import xadmin
from .models import Article, Question
class ArticeAdmin(object):
list_display = ['id']
class QuestionAdmin(object):
list_display = ['id']
style_fields = {"question_context":"ueditor"}
xadmin.site.register(Article, ArticeAdmin)
xadmin.site.register(Question, QuestionAdmin)
9. 配置media静态目录
urlpatterns = [
#change from admin to xadmin
#path('admin/', admin.site.urls),
url(r'^xadmin/', xadmin.site.urls),
# path(r'^xadmin/', xadmin.site.urls)
# 添加富文本url
url(r'^ckeditor/', include('ckeditor_uploader.urls')),
# 添加ueditor url
url(r'^ueditor/', include('DjangoUeditor.urls')),
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
10. ueditor 程序 widgets.py， 设置默认值
# width 设置默认值，或者设置为空
width = params.pop("width","")
height = params.pop("height","")
11. 运行结果
Ueditor:
ckeditor:
花了我2天时间才搞定，xadmin 坑是真的多。
在xadmin 里面：
ueditor 安装配置麻烦一些， 插件更多一些，优势不大。
ckeditor 不需要额外配置，配置简单， 兼容性好。
