Django框架使用富文本编辑器Uedit的方法分析


Posted in Python onJuly 31, 2018

本文实例讲述了Django框架使用富文本编辑器Uedit的方法。分享给大家供大家参考,具体如下:

Uedit是百度一款非常好用的富文本编辑器

一、安装及基本配置

官方GitHub(有详细的安装使用教程):https://github.com/zhangfisher/DjangoUeditor

1. settings.py

INSTALLED_APPS = [
  ...
  'DjangoUeditor',
  ...
]

2. 配置urls

from django.conf.urls import url, include
urlpatterns = [
# 富文本相关url
  url(r'^ueditor/', include('DjangoUeditor.urls')),
]

3. 字段信息

在需要使用富文本的字段所在的models.py中

from DjangoUeditor.models import UEditorField
class Articles(models.Model):
  ...
  content = UEditorField(width=1200, height=600, imagePath="article/ueditor/",
              filePath="article/ueditor/",verbose_name=u"文章内容")
  ...

注意,在要使用ueditor的字段所在adminx.py的类中,添加

# 这样就指定了course的detail字段使用ueditor富文本编辑器
class ArticlesAdmin(object):
  ...
  style_fields = {"content":"ueditor"}

二、Ueditor插件制作

1. 插件代码

在extra_apps.xadmin.plugins中新建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)

2. xadmin中注册插件

在extra_apps.xadmin.plugins.__init__.py中添加

PLUGINS = (
  ...
  'ueditor',
)

友情提醒

在Django中使用富文本编辑器

在HTML页面中,Django处于安全考虑,将文本内容默认转义,我们需要关闭

来正常输出我们的文章

{% autoescape off %}
{{ article.abstract }}
{% endautoescape %}

记录一下,空格的转义字符分为如下几种:

1.  &160#;不断行的空白(1个字符宽度)

2. &8194#;半个空白(1个字符宽度)

3. &8195#;一个空白(2个字符宽度)

4. &8201#;窄空白(小于1个字符宽度)

平时一般用的是 但是在中文中也许有时候更适合用

希望本文所述对大家基于Django框架的Python程序设计有所帮助。

Python 相关文章推荐
Python实现多线程下载文件的代码实例
Jun 01 Python
跟老齐学Python之玩转字符串(3)
Sep 14 Python
Python数据抓取爬虫代理防封IP方法
Dec 23 Python
Python3.4学习笔记之类型判断,异常处理,终止程序操作小结
Mar 01 Python
Appium+python自动化怎么查看程序所占端口号和IP
Jun 14 Python
Python 使用指定的网卡发送HTTP请求的实例
Aug 21 Python
python日志模块logbook使用方法
Sep 19 Python
Python queue队列原理与应用案例分析
Sep 27 Python
Django框架模板用法入门教程
Nov 04 Python
flask框架url与重定向操作实例详解
Jan 25 Python
解决Tensorboard 不显示计算图graph的问题
Feb 15 Python
Virtualenv 搭建 Py项目运行环境的教程详解
Jun 22 Python
Windows下python3.6.4安装教程
Jul 31 #Python
windows下pycharm安装、创建文件、配置默认模板
Jul 31 #Python
win8下python3.4安装和环境配置图文教程
Jul 31 #Python
Win8.1下安装Python3.6提示0x80240017错误的解决方法
Jul 31 #Python
Win8下python3.5.1安装教程
Jul 29 #Python
win7下python3.6安装配置方法图文教程
Jul 31 #Python
win7+Python3.5下scrapy的安装方法
Jul 31 #Python
You might like
基于php下载文件的详解
2013/06/02 PHP
Yii2针对游客、用户防范规则和限制的解决方法分析
2016/10/08 PHP
laravel实现上传图片并在页面显示的例子
2019/10/14 PHP
javascritp实现input输入框相关限制用法
2007/06/29 Javascript
javascript入门·图片对象(无刷新变换图片)\滚动图像
2007/10/01 Javascript
js获取div高度的代码
2008/08/09 Javascript
javaScript 数值型和字符串型之间的转换
2009/07/25 Javascript
JavaScript中String和StringBuffer的速度之争
2010/04/01 Javascript
js location.replace与location.reload的区别
2010/09/08 Javascript
用Javascript评估用户输入密码的强度实现代码
2011/11/30 Javascript
js实现幻灯片播放图片示例代码
2013/11/07 Javascript
js中小数转换整数的方法
2014/01/26 Javascript
jQuery基础语法实例入门
2014/12/23 Javascript
js实现字符串转日期格式的方法
2015/05/20 Javascript
js下拉选择框与输入框联动实现添加选中值到输入框的方法
2015/08/17 Javascript
js自定义回调函数
2015/12/13 Javascript
Jquery on方法绑定事件后执行多次的解决方法
2016/06/02 Javascript
jQuery实现ToolTip元素定位显示功能示例
2016/11/23 Javascript
vuejs2.0实现一个简单的分页示例
2017/02/22 Javascript
js最简单的双向绑定实例讲解
2018/01/02 Javascript
JavaScript实现异步图像上传功能
2018/07/12 Javascript
js实现简单的无缝轮播效果
2020/09/05 Javascript
Django 连接sql server数据库的方法
2018/06/30 Python
python 画三维图像 曲面图和散点图的示例
2018/12/29 Python
Python3模拟登录操作实例分析
2019/03/12 Python
python从zip中删除指定后缀文件(推荐)
2019/12/05 Python
Python flask框架实现查询数据库并显示数据
2020/06/04 Python
python+django+selenium搭建简易自动化测试
2020/08/19 Python
美国女孩服装购物网站:Justice
2017/03/04 全球购物
英国大码女性时装零售商:Evans
2018/08/29 全球购物
应用化学专业本科生求职信
2013/09/29 职场文书
2014年公司迎新年活动方案
2014/02/24 职场文书
绿色环保口号
2014/06/12 职场文书
2016年大学生暑假爱心支教活动策划书
2015/11/26 职场文书
CSS 实现多彩、智能的阴影效果
2021/05/12 HTML / CSS
my.ini优化mysql数据库性能的十个参数(推荐)
2021/05/26 MySQL