此文为前一篇文章的续写: Django 插件之 Xadmin
Ueditor 介绍
UEditor 是由百度 web 前端研发部开发所见即所得富文本 web 编辑器,具有轻量,可定制,注重用户体验等特点,开源基于 MIT 协议,允许自由使用和修改代码。
DjangoUeditor 安装
方法一:将 github 整个源码包下载回家,在命令行运行:
python setup.py install
方法二:使用 pip 工具在命令行运行(推荐):
pip install DjangoUeditor
settings.py
文件中注册此 app :
# settings.py
INSTALLED_APPS = [
...
'DjangoUeditor',
]
urls .py
文件中配置:
# urls.py
urlpatterns = [
...
url(r'^ueditor/',include('DjangoUeditor.urls' )), # 富文本相关URL
]
models.py
中配置:
# models.py
from DjangoUeditor.models import UEditorField
class Article(models.Model):
content = UEditorField(verbose_name='内容详情',width=750, height=300, imagePath="images/ueditor/", filePath="images/ueditor/", default='') # imagePath和filePath 为文件上传路径
...
adminx.py
中为需要富文本的字段配置:
class ArticleAdmin(object):
...
style_fields = {"content": "ueditor"}
到此,djangoueditor 配置完成。下面是将它作为 Xadmin 的插件步骤。
Xadmin 插件制作
找到 Xadmin 目录下的 plugins 文件夹,此文件下大多为 Xadmin 的插件,新建 ueditor.py
文件,代码及说明如下:
# ueditor.py 写法较为固定
import Xadmin
from Xadmin.views import BaseAdminPlugin
from DjangoUeditor.models import UEditorField
from DjangoUeditor.widgets import UEditorWidget
from django.conf import settings
from Xadmin.views import CreateAdminView
from Xadmin.views import UpdateAdminView
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): # 判断传入的是否为 ueditor ,然后返回相关的富文本内容
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 文件
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
文件,在代码中加入:
# __init__.py
PLUGINS = (
...
'ueditor'
)
这样,在 Xadmin 启动的时候,ueditor 会得到加载。
在后台页面中查看如下:
tips:在 ueditor 不同版本中,上传图片时会出现上传失败现象,解决方案:
找到项目中的 site-packages ,再找到 DjangoUeditor 下的 views.py
文件:
# views.py
@csrf_exempt # 查看是否有此行代码,如没有,添加此行代码
def get_ueditor_controller(request):
"""获取ueditor的后端URL地址 """
...
return reponseAction[action](request)
完成到这里,Xadmin 的插件就算制作完成。
参考资料:
django-ueditor 下载地址:https://github.com/zhangfisher/DjangoUeditor
ueditor 官网:http://ueditor.baidu.com/website/
Xadmin 官网:http://sshwsfc.github.io/Xadmin/
Xadmin 文档:http://Xadmin.readthedocs.io/en/docs-chinese/make_plugin.html
ueditor 官网:http://ueditor.baidu.com/website/