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

时间:2023-01-07 16:39:44

一、安装

  • pip命令安装,由于ueditor为百度开发的一款富文本编辑框,现已停止维护,如果解释器为python2,则直接pip install djangoueditor
  • 解压包安装,python3以上的版本需要下载压缩包解压安装 下载地址

    步骤
    1. 到下载地址下载并解压
    2. cmd进入该文件夹根目录python setup.py install直接安装到当前site-package中

二、添加app

将djangoueditor添加到setting.py中



INSTALLED_APPS = [

...

'DjangoUeditor',

]

三、添加url

将URL添加到urlpatterns中去:

富文本编辑器

url(r'^ueditor/',include('DjangoUeditor.urls' )),

四、修改model字段

django自带的富文本编辑框为models.Textfield()

    from DjangoUeditor.models import UEditorField

    class Course(models.Model):
name = models.CharField(max_length=20, verbose_name='课程名称')
desc = models.TextField(verbose_name='课程描述')
detail = UEditorField(verbose_name='课程详情',width=600, height=300, toolbars="full", imagePath="course/ueditor/", filePath="course/ueditor/", upload_settings={"imageMaxSize":1204000},default='')

说明:

width,height :编辑器的宽度和高度,以像素为单位。imagePath :图片上传后保存的路径,如"images/",实现上传到"{{MEDIA_ROOT}}/images"文件夹。 注意:如果imagePath值只设置文件夹,则未尾要有"/" imagePath可以按python字符串格式化:如"images/%(basename)s_%(datetime)s.%(extname)s"。这样如果上传test.png,则文件会 被保存为"{{MEDIA_ROOT}}/images/test_20140625122399.png"。 filePath : 附件上传后保存的路径,设置规则与imagePath一样。更多用法

五、xadmin中添加插件ueditor

由于已经将xadmin源文件拷贝到了项目下,本文为extra_apps/xadmin,在xadmin下的plugin中新建一个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)

六、将ueditor添加到plugin下的_init_中


PLUGINS = (
...
'ueditor',
)

七、将ueditor添加到adminx.py中


class CourseAdmin(object):
...
style_fields = {"detail": "ueditor"}

八、前端页面转义

浏览器为了web安全在对后端传来的html代码会进行转义,会将<>等符号进行转义,因此要对页面设置过滤器防止字符转义


{% autoescape off %}
{{ course.detail }}
{% endautoescape %}

过滤器更多用法

django—xadmin中集成富文本编辑器ueditor的更多相关文章

  1. Django xadmin后台添加富文本编辑器UEditor的用法

    效果图: 步骤: 1.利用命令:pip install DjangoUeditor,安装DjangoUeditor,但由于DjangoUeditor没有python3版本的,从的Github上把修改好 ...

  2. Django项目中添加富文本编辑器django-ckeditor

    django-ckeditor库的使用步骤: 1.在命令行下安装django-ckeditor这个库: 命令:pip install django-ckeditor 2.安装成功后,配置Django项 ...

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

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

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

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

  5. 百度Web富文本编辑器ueditor在ASP&period;NET MVC3项目中的使用说明

    ====================================================================== [百度Web富文本编辑器ueditor在ASP.NET M ...

  6. 百度富文本编辑器UEditor安装配置全过程

    网站开发时富文本编辑器是必不可少的,他可以让用户自行编辑内容的样式然后上传到后台!下面我们来介绍如何安装使用百度富文本编辑器 一.下载并且设置百度富文本编辑器的样式     你可以去百度UEditor ...

  7. 百度富文本编辑器ueditor使用总结

    最近做的项目用到了ueditor这个东东,但是他的一些配置文档对初次使用者来说很难以理解,故作此总结 相关详细操作链接地址: http://blog.csdn.net/wusuopubupt/arti ...

  8. 富文本编辑器UEditor自定义工具栏(二、插入图片、音频、视频个性化功能按钮和弹层及自定义分页符)

    导读:本篇将简单探讨插入图片.音频.视频的功能按钮实现方式 传送门:富文本编辑器UEditor自定义工具栏(一.基础配置与字体.背景色.行间距.超链接实现) 一.效果图 1.UEditor自定义工具栏 ...

  9. 富文本编辑器UEditor自定义工具栏(三、自定义工具栏功能按钮图标及工具栏样式简单修改)

    导读 富文本编辑器UEditor提供丰富了定制配置项,如果想设置个性化的工具栏按钮图标有无办法呢?答案是肯定的!前两篇博文简要介绍了通过将原工具栏隐藏,在自定义的外部按钮上,调用UEditor各命令实 ...

随机推荐

  1. 基于C&sol;S架构的3D对战网络游戏C&plus;&plus;框架&lowbar;【不定期更新通知】

    由于笔者最近有比赛项目要赶,这个基于C/S架构的3D对战网络游戏C++框架也遇到了一点瓶颈需要点时间沉淀,所以近一段时间不能保证每天更新了,会保持不定期更新.同时近期笔者也会多分享一些已经做过学过的C ...

  2. CSS中伪类及伪元素用法详解

    CSS中伪类及伪元素用法详解   伪类的分类及作用: 注:该表引自W3School教程 伪元素的分类及作用: 接下来让博主通过一些生动的实例(之前的作业或小作品)来说明几种常用伪类的用法和效果,其他的 ...

  3. 支持自动切换的tab标签代码札记

    html代码如下: <!-- tab标签代码begin --> <div class="tab1" id="tab1"> <div ...

  4. Unity3D SceneView Camera

    http://forum.unity3d.com/threads/moving-scene-view-camera-from-editor-script.64920/

  5. docker和shipyard使用问题

    http://blog.csdn.net/cuisongliu/article/details/49178461 Docker启动如果随服务一起启动? docker run -ti -d --rest ...

  6. Using Friendly URLs in ASP&period;NET Web Forms

    Introduction Websites often need to generate SEO friendly URLs. In ASP.NET Web Forms applications, a ...

  7. Ubuntu 14&period;04 LTS 64bit 编译SDL的问题

    http://blog.csdn.net/jhting/article/details/38523945 Ubuntu 14.04 LTS 64bit 编译SDL的问题 分类: C/C++2014-0 ...

  8. Oozie的安装过程

    依赖CDH5,JDK和关系数据库 集群规划 主机名   IP                      Ooize节点 CHD1    XX.XX.XX.XX  oozie server,oozie ...

  9. 温故知新——json

    Json简介 Json(JavaScript Object Notation)是一种轻量级的数据交换格式.它是基于javascript(Standard ECMA-262 3rd Edition - ...

  10. WebService调用http&colon;&sol;&sol;www&period;webxml&period;com&period;cn中的一些服务示例

    1.打开http://www.webxml.com.cn网站下的“全部WebService”,会看到如下图的图片 2.点击打开WSDL连接,如下图,并保存为一个后缀名为wsdl文件,放在项目的根目录下 ...