Django 插件之 Xadmin实现富文本编辑器
此文为前一篇文章的续写: 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实现富文本编辑器的更多相关文章
- Django的media配置与富文本编辑器使用的实例
效果预览 文章列表 添加文章 编辑文章|文章详情|删除文章 项目的基本文件 项目的Model from django.db import models # 导入富文本编辑器相关的模块 from cke ...
- Xadmin集成富文本编辑器ueditor
在xadmin中通过自定义插件,实现富文本编辑器,效果如下: 1.首先,pip安装ueditor的Django版本: pip install DjangoUeditor 2.之后需要添加到项目的set ...
- django项目中使用KindEditor富文本编辑器。
先从官网下载插件,放在static文件下 前端引入 <script type="text/javascript" src="/static/back/kindedi ...
- django项目中使用KindEditor富文本编辑器
先从官网下载插件,放在static文件下 前端引入 <script type="text/javascript" src="/static/back/kindedi ...
- Django学习---py3下的富文本编辑器的使用
背景说明: Ueditor HTML编辑器是百度开源的HTML编辑器,但是在Python3下调用报错,找不到widgets模块,经查发现,DjangoUeditor是基于Python 2.7的,对Py ...
- Django使用xadmin集成富文本编辑器Ueditor(方法二)
一.xadmin的安装与配置1.安装xadmin,其中第一种在python3中安装不成功,推荐第二种或者第三种 方式一:pip install xadmin 方式二:pip install git+g ...
- Django Admin后台使用tinymc 富文本编辑器
1.CDN地址 <script src="//cdn.tinymce.com/4/tinymce.min.js"></script> 2.修改base.ht ...
- django2集成DjangoUeditor富文本编辑器
富文本编辑器,在web开发中可以说是不可缺少的.django并没有自带富文本编辑器,因此我们需要自己集成,在这里推荐大家使用DjangoUeditor,因为DjangoUeditor封装了我们需要的一 ...
- django—xadmin中集成富文本编辑器ueditor
一.安装 pip命令安装,由于ueditor为百度开发的一款富文本编辑框,现已停止维护,如果解释器为python2,则直接pip install djangoueditor 解压包安装,python3 ...
随机推荐
- SDOI R2 咕咕记
Day 0 路上堵车,\(5\)点才到宾馆 \(BCT\)为什么在山上啊!!!! 试机的时候敲了一下多项式求逆的板子 回到宾馆订了\(KFC\)的外卖 Day 1 爬山的时候跟\(asuldb\)说 ...
- 洛谷P2456 二进制方程
题目 字符串模拟+并查集 建立两个并查集分别存放每个变量的每一位数的祖先,一个是1一个是2 考虑每个字母的每一位的数都是唯一的,先模拟,记录每一个变量的每一位. 一一映射到方程中去,最后将两个方程进行 ...
- CodeForeces 842d Vitya and Strange Lesson ——(带lazy标记的01字典树)
给一个序列,每次操作对这个序列中的所有数异或一个x,问每次操作完以后整个序列的mex值. 做法是去重后构建01字典树,异或x就是对root加一个x的lazy标志,每次pushDown时如果lazy的这 ...
- namenode 优化 mv慢的问题
问题现象 问题描述 公司业务程序需求每30分钟mv 一万多个文件,如果三十分钟之内当前的文件内容没有全部移动,程序报错并且停止. 分析 通过分析,发现在启动balancer和不启动balancer的情 ...
- go中的方法以及自定义类型代码示例
package main import "fmt" type user struct { name string age int sex string } type admin s ...
- 判断一个数组的长度用 Length 还是 SizeOf ?
最近发现一些代码, 甚至有一些专家代码, 在遍历数组时所用的数组长度竟然是 SizeOf(arr); 这不合适! 如果是一维数组.且元素大小是一个字节, 这样用看不出错误, 譬如: var arr ...
- CESIUM内置shader变量和函数[转]
cesium中内置了一些常量.变量和函数,在vs和fs中可直接使用. 内置uniform 内置uniform主要置于AutomaticUniforms类里面,该类私有未开放文档. czm_backgr ...
- variant变异 | Epigenome表观基因组 | Disease-susceptible gene 疾病易感基因
paper:cepip: context-dependent epigenomic weighting for prioritization of regulatory variants and di ...
- 微信小程序带cookie的request请求代码封装(小程序使用session)
微信小程序带cookie的request请求可,以使服务端知道是同一个客户端请求. session_id会不变,从而很好的使用服务端的session. 写一个工具函数,直接导入使用即可,接口同 wx. ...
- 人脸替换(FaceSwap)的一些思考
本文链接:https://blog.csdn.net/cy1070779077/article/details/85224347人脸替换(FaceSwap)的一些思考 最一开始,我使用了openCV( ...