在对后台进行编辑时,采用百度开源的富文本编辑器ueditor,本文采用djangoueditor。由于原作者不再对其进行维护Python3的版本安装 点此进入https://github.com/twz915/DjangoUeditor3。
建议将源码包下载下来,并直接放在项目下的extra_apps中,如下所示:
本文的开发环境如下:
- python352
- django1.10
- ubuntu16.04
配置步骤
- 1、将djangoueditor添加到setting.py中
INSTALLED_APPS = [
…
‘DjangoUeditor’,
]
- 2、添加一级路由配置urls.py
在项目的主urls.py文件中:
#富文本编辑器
url(r'^ueditor/',include('DjangoUeditor.urls' )),
- 3、models.py使用UEditorField字段
class Goods(models.Model):
"""
商品
UEditorField:
"""
goods_desc = UEditorField(verbose_name='内容',imagePath='goods/images/',width=1000,height=300,
filePath='goods/files/',default='')
)
关于UEditorField字段中的具体参数详情,可以参考文档https://github.com/twz915/DjangoUeditor3
- 4、xadmin中添加插件ueditor
由于已经将xadmin源文件拷贝到了项目下,本文为extra_apps/xadmin,即在extra_apps/xadmin/plugin/中新建一个ueditor.py文件,里面写入如下(这些代码github上都有,这里只不过写下了让文章更具有逻辑):
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、在extral_apps/xadmin/plugin下的init.py中添加上ueditor
PLUGINS = (
...
'ueditor',
)
- 6、在adminx.py中注册的表单中声明你的UEditorField字段的属性名字,我这里的是goods_desc(商品描述)
:
class CourseAdmin(object):
...
style_fields = {"goods_desc": "ueditor"} # 一定要声明,在models.py中的属性名字,
#不然xadmin不会生效
- 7 xadmin后台效果如下:
- 8、在前端显示的话,需要对html页面修改如下
{% autoescape off %}
{{ course.detail }}
{% endautoescape %}