Django xadmin后台添加UEditor的用法，以及我遇到的BUG

关于django xadmin 后台集成UEditor 的一些注意事项

之前我用那个ckEditor 富文本编辑器，但是感觉功能特别弱，于是又去搜那些富文本好用，于是就找到了UEditor这款由百度开源的富文本插件。

我一开始是参照这位老哥 http://blog.csdn.net/geerniya/article/details/79114711 的博客去操作的，但是很遗憾针对于我的环境没有成功，有好多小坑，最终我终于成功了。

有关注《自强学堂》的小伙伴们应该知道涂伟忠吧 他的 Github 就有详细说明

据我所知，百度只有Python2版本的UEditor，感谢涂伟忠老哥，改成了兼容Python2和Python3的版本，兼容的UEditor可以去上面Github连接上直接clone

好现在直接看看我xadmin集成UEditor的效果，说到这里有的人博客写的真是……，照着他的步骤做完了，最后来个结论是: “我最终也没有实现效果…….”, 看到这简直要吐血。



首先说一下我的环境Ubuntu16.04 + Django 1.10.8 + Python3.5

好现在开始我们的依赖包说明

一 ，首先UEditor 好像是没有Python3版本的。 直接这样安装，要自己修改里面的一些Python2的语法

pip install DjangoUeditor

我是这样安装的，然后再去涂伟忠老哥的Github上把他修改好的UEditor Down下来，放到自己的项目中的扩展文件夹中,类似下图这样。



嗯…这个extra_apps是我看慕课网上的做法，新建的一个文件夹，用来放其他扩展的一些应用非常方便，还有apps也是，不过如果新建了extra_apps，就要去setting.py文件中去添加路径配置。 或者直接去site-packages 里面去替换也行。

import sys
# 设置 extra_apps 目录
# 项目文件夹下的setting文件
sys.path.insert(0, os.path.join(BASE_DIR, 'extra_apps'))

二， 将 DjangoUeditor 添加到setting.py配置文件中的APP里面

INSTALLED_APPS = [

# 配置另一个富文本
'DjangoUeditor',

]

三， 配置URL信息。

# 添加富文本url
# url(r'^ckeditor/', include('ckeditor_uploader.urls')),
url(r'^ueditor/', include('DjangoUeditor.urls')),

四，修改Model里面对应的字段, 注意有坑的问题

就比如之前的 imagePath=”Article_img/%Y/%m/ 我这样写的，表示的是一个上传的路径由时间去决定的，但是上传图片一直出错，报 ValueError: unsupported format character ‘Y’ (0x59) at index 70。困扰了我一下，于是我又看到了这篇 博客 解决的 ,产生原因:

因为python执行的sql中存在类似DATE_FORMAT(MAX(CREATE_TIME), ‘%Y-%m-%d’) 的写法, 其中%Y与python的参数%s冲突

from DjangoUeditor.models import UEditorField
class Article(models.Model):
# 尤其是这里的imagePath="Article_img/%%Y/%%m/"  这个路径要注意
content = UEditorField(verbose_name='内容', height=500, width=1000,
default=u'', imagePath="Article_img/%%Y/%%m/",
toolbars='full', filePath='Article_file/%%Y/%%m/',
upload_settings={"imageMaxSize": 1204000},
settings={}, command=None,)

五，在xadmin中添加插件UEditor的文件

由于已经将xadmin源文件拷贝到了项目下，本文为extra_apps/xadmin，(如没有新建extra_apps这个文件夹的可以在site-packages文件夹下找到xadmin文件夹也是一样的)在xadmin下的plugin中新建一个ueditor.py文件，里面写入如下：

#!/usr/bin/python3
# -*-coding:utf-8-*-

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.js")  # 自己的静态目录
nodes.append(js)

xadmin.site.register_plugin(UeditorPlugin, UpdateAdminView)
xadmin.site.register_plugin(UeditorPlugin, CreateAdminView)

六，将ueditor添加到plugin下的init中

PLUGINS = (
...
'ueditor',
)

七， 将ueditor添加到项目app里面的adminx.py， 比如我的目录结构如下

class ArticleAdmin(object):

# TODO 注意这里是content字段是你要换成ueditor的字段，我这里就被坑了，好长时间不知道BUG出现在哪
style_fields = {'content': 'ueditor'}

八， 在前端显示的话，需要对html页面修改如下

{% autoescape off %}
{{ course.detail }}
{% endautoescape %}

这一步我是复制的开始提到的那篇 Blog

目的是为了阻止字符的转义

通过以上设置就可以登录后台xadmin中，对内容进行富文本编辑，并显示在前端页面了

有什么BUG,问题的可以留言，我会在线解答，emm我的 Github 有感兴趣的可以点个start