此文为前一篇文章的续写: Django 插件之 Xadmin

Ueditor 介绍

UEditor 是由百度 web 前端研发部开发所见即所得富文本 web 编辑器,具有轻量,可定制,注重用户体验等特点,开源基于 MIT 协议,允许自由使用和修改代码。

DjangoUeditor 安装

方法一:将 github 整个源码包下载回家,在命令行运行:

python setup.py install

方法二:使用 pip 工具在命令行运行(推荐):

pip install DjangoUeditor

方法三:直接到github上下载源码包(非常推荐,python3环境下pip的方式听说会有问题):

https://github.com/twz915/DjangoUeditor3/

下载后解压拿到一个名为DjangoUeditor3-master的文件夹,拿出子目录中的DjangoUeditor文件夹

放到python环境中的site-packages文件夹中

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 为文件上传路径,需提前开放media文件夹接口,如不知,右转百度,这里不再赘余

adminx.py 中为需要富文本的字段配置(该adminx.py文件是你应用文件夹下创建的):

class ArticleAdmin(object):  # 这里的类名以  表名+Admin 的形式命名
...
style_fields = {"content": "ueditor"} # content 就是你要用富文本编辑器编写内容的字段 xadmin.site.register(models.Article, ArticleAdmin) # 这里在xadmin中注册该表,并指定是上面写的类名,否则富文本编辑器不生效

到此,djangoueditor 配置完成。下面是将它作为 xadmin 的插件步骤。

xadmin 插件制作

找到 xadmin 目录下的 plugins 文件夹,此文件下大多为 xadmin 的插件,新建 ueditor.py 文件,代码及说明如下:

# 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 文件,在代码中加入:

# __init__.py
PLUGINS = (
...
'ueditor'
)

这样,在 xadmin 启动的时候,ueditor 会得到加载。

在后台页面中查看如下:

tips:如果你的csrf没有注释掉,上传图片时会出现上传失败现象

如果你的django项目是前后端不分离的,csrf中间件必须需要用到,你可以采用下面的方式

解决方案:

找到项目中的 site-packages ,再找到 DjangoUeditor 下的 views.py 文件:

# views.py
@csrf_exempt # 查看是否有此行代码,如没有,添加此行代码,表示对这个视图不检验csrf
def get_ueditor_controller(request):
"""获取ueditor的后端URL地址 """
...
return reponseAction[action](request)

完成到这里,Xadmin 的插件就算制作完成。

可能会遇到错误:

render() got an unexpected keyword argument 'renderer'

报错93行:boundfield.py in as_widget, line 93
解决方法:注释掉!
如图:

参考资料:

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/


Django 插件之 Xadmin实现富文本编辑器的更多相关文章

  1. Django的media配置与富文本编辑器使用的实例

    效果预览 文章列表 添加文章 编辑文章|文章详情|删除文章 项目的基本文件 项目的Model from django.db import models # 导入富文本编辑器相关的模块 from cke ...

  2. Xadmin集成富文本编辑器ueditor

    在xadmin中通过自定义插件,实现富文本编辑器,效果如下: 1.首先,pip安装ueditor的Django版本: pip install DjangoUeditor 2.之后需要添加到项目的set ...

  3. django项目中使用KindEditor富文本编辑器。

    先从官网下载插件,放在static文件下 前端引入 <script type="text/javascript" src="/static/back/kindedi ...

  4. django项目中使用KindEditor富文本编辑器

    先从官网下载插件,放在static文件下 前端引入 <script type="text/javascript" src="/static/back/kindedi ...

  5. Django学习---py3下的富文本编辑器的使用

    背景说明: Ueditor HTML编辑器是百度开源的HTML编辑器,但是在Python3下调用报错,找不到widgets模块,经查发现,DjangoUeditor是基于Python 2.7的,对Py ...

  6. Django使用xadmin集成富文本编辑器Ueditor(方法二)

    一.xadmin的安装与配置1.安装xadmin,其中第一种在python3中安装不成功,推荐第二种或者第三种 方式一:pip install xadmin 方式二:pip install git+g ...

  7. Django Admin后台使用tinymc 富文本编辑器

    1.CDN地址 <script src="//cdn.tinymce.com/4/tinymce.min.js"></script> 2.修改base.ht ...

  8. django2集成DjangoUeditor富文本编辑器

    富文本编辑器,在web开发中可以说是不可缺少的.django并没有自带富文本编辑器,因此我们需要自己集成,在这里推荐大家使用DjangoUeditor,因为DjangoUeditor封装了我们需要的一 ...

  9. django—xadmin中集成富文本编辑器ueditor

    一.安装 pip命令安装,由于ueditor为百度开发的一款富文本编辑框,现已停止维护,如果解释器为python2,则直接pip install djangoueditor 解压包安装,python3 ...

随机推荐

  1. 转载 | Python AI 教学│k-means聚类算法及应用

    关注我们的公众号哦!获取更多精彩哦! 1.问题导入 假如有这样一种情况,在一天你想去某个城市旅游,这个城市里你想去的有70个地方,现在你只有每一个地方的地址,这个地址列表很长,有70个位置.事先肯定要 ...

  2. Leetcode Majority Element系列 摩尔投票法

    先看一题,洛谷2397: 题目背景 自动上次redbag用加法好好的刁难过了yyy同学以后,yyy十分愤怒.他还击给了redbag一题,但是这题他惊讶的发现自己居然也不会,所以只好找你 题目描述 [h ...

  3. ubuntu之路——day8.4 Adam自适应矩估计算法

    基本上讲,Adam就是将day8.2提到的momentum动量梯度下降法和day8.3提到的RMSprop算法相结合的优化算法 首先初始化 SdW = 0 Sdb = 0 VdW = 0 Vdb = ...

  4. vue+elementui搭建后台管理界面(5递归生成侧栏路由)

    有一个菜单树,顶层菜单下面有多个子菜单,子菜单下还有子菜单... 这时候就要用递归处理 1 定义多级菜单 修改 src/router/index.js 的 / 路由 { path: '/', redi ...

  5. 在Oracle Sql Developer中查看oracle版本

    输入select * from v$version; 执行即可. --END-- 2019-11-29 12:34

  6. layui 鼠标悬停单元格显示全部

    {field : 'subjectId',title : '主题id',align: 'center',edit : 'text',templet:'<div><span title ...

  7. Dart 自增++自减--和循环语句

    void main(){ /* ++ -- 表示自增 自减 1 在赋值运算里面 如果++ -- 写在前面 这时候先运算 再赋值,如果++ --写在后面 先赋值后运行运算 var a=10; var b ...

  8. git merge 结果是 git merge Already up-to-date. 该怎么解决?

    git将主干合并到当前分支时,出现如下结果: 原因在于:执行git merge前,主干的代码没有更新 正确的操作步骤如下: 1 .切换到主干 $ git checkout master 2. 更新主干 ...

  9. 十九款web漏洞扫描工具

    1. Arachni Arachni是一款基于Ruby框架搭建的高性能安全扫描程序,适用于现代Web应用程序.可用于Mac.Windows及Linux系统的可移植二进制文件. Arachni不仅能对基 ...

  10. QML注意color小写

    1.用的时候大小写一样的 如: color="#3D3D3D" 和 color="#3d3d3d"都是同一个颜色 2.判断的时候,QML默认是小写 如:if(c ...