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脚本将绝对url替换为相对url的教程
Apr 24 Python
Python中的os.path路径模块中的操作方法总结
Jul 07 Python
详解supervisor使用教程
Nov 21 Python
Python import与from import使用及区别介绍
Sep 06 Python
Python学习笔记之图片人脸检测识别实例教程
Mar 06 Python
python通过安装itchat包实现微信自动回复收到的春节祝福
Jan 19 Python
Python爬虫库requests获取响应内容、响应状态码、响应头
Jan 25 Python
tensorflow模型转ncnn的操作方式
May 25 Python
Python+Dlib+Opencv实现人脸采集并表情判别功能的代码
Jul 01 Python
10个python爬虫入门实例(小结)
Nov 01 Python
Python中常见的导入方式总结
May 06 Python
python中pycryto实现数据加密
Apr 29 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正则表达式中的非贪婪模式匹配的使用
2014/11/25 PHP
Thinkphp和Bootstrap结合打造个性的分页样式(推荐)
2016/08/01 PHP
PHP闭包定义与使用简单示例
2018/04/13 PHP
PHP中的self关键字详解
2019/06/23 PHP
firefo xml 读写实现js代码
2009/06/11 Javascript
Mootools 1.2教程 输入过滤第一部分(数字)
2009/09/15 Javascript
自己动手制作jquery插件之自动添加删除行的实现
2011/10/13 Javascript
在标题栏显示新消息提示,很多公司项目中用到这个方法
2011/11/04 Javascript
javascript和HTML5利用canvas构建猜牌游戏实现算法
2013/07/17 Javascript
JS 有趣的eval优化输入验证实例代码
2013/09/22 Javascript
jquery.form.js用法之清空form的方法
2014/03/07 Javascript
使用JQuery实现智能表单验证功能
2016/03/08 Javascript
基于vuejs+webpack的日期选择插件
2020/05/21 Javascript
Bootstrap的modal拖动效果
2016/12/25 Javascript
Angular的模块化(代码分享)
2016/12/26 Javascript
vue初尝试--项目结构(推荐)
2018/01/30 Javascript
vue slots 组件的组合/分发实例
2018/09/06 Javascript
vue+Element-ui实现分页效果实例代码详解
2018/12/10 Javascript
微信公众号开发之微信支付代码记录的实现
2019/10/16 Javascript
JS实现炫酷雪花飘落效果
2020/08/19 Javascript
[04:44]DOTA2 2017全国高校联赛视频回顾
2017/08/21 DOTA
python中的编码知识整理汇总
2016/01/26 Python
Python的语言类型(详解)
2017/06/24 Python
python 定时修改数据库的示例代码
2018/04/08 Python
Python基于递归和非递归算法求两个数最大公约数、最小公倍数示例
2018/05/21 Python
Python中xml和json格式相互转换操作示例
2018/12/05 Python
使用pandas实现csv/excel sheet互相转换的方法
2018/12/10 Python
Python&amp;&amp;GDAL实现NDVI的计算方式
2020/01/09 Python
德国百年厨具品牌WMF美国站:WMF美国
2016/09/12 全球购物
美国卡车、吉普车和SUV零件网站:4 Wheel Parts
2016/11/24 全球购物
eHarmony英国:全球领先的认真恋爱约会平台之一
2020/11/16 全球购物
经理秘书求职自荐信范文
2014/03/23 职场文书
汤姆索亚历险记读书笔记
2015/06/29 职场文书
民间借贷纠纷起诉书
2015/08/03 职场文书
Redis如何一键部署脚本
2021/04/12 Redis
解决Goland 同一个package中函数互相调用的问题
2021/05/06 Golang