效果图:

步骤:

1.利用命令:pip install DjangoUeditor,安装DjangoUeditor,但由于DjangoUeditor没有python3版本的,从的Github上把修改好的UEditor Down下来,然后放在自己的extra_apps文件夹中

并在setting.py文件中去添加路径配置

import os
import sys
# Build paths inside the project like this: os.path.join(BASE_DIR, ...)
# 设置 extra_apps 目录
# 项目文件夹下的setting文件 BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
sys.path.insert(0, os.path.join(BASE_DIR, 'extra_apps'))

2.将DjangoUeditor 添加到settings.py文件的APP 里边

INSTALLED_APPS = [
....
# 配置富文本编辑器
'DjangoUeditor',
]

3.在urls.py文件中配置路由信息

#添加富文本路径信息
url(r'^ueditor/', include('DjangoUeditor.urls')),

4.修改models对应的字段


from DjangoUeditor.models import UEditorField
class Article(models.Model):
....
content = UEditorField(verbose_name='内容', height=400, width=800,
default=u'', imagePath="Article_img/%%Y/%%m/",
toolbars='full', filePath='Article_file/%%Y/%%m/',
upload_settings={"imageMaxSize": 1204000},
settings={}, command=None, )

5.在settings.py 设置 static 和 media

# 公共的 static 文件,比如 jquery.js 可以放这里,这里面的文件夹不能包含 STATIC_ROOT
STATICFILES_DIRS = (
os.path.join(BASE_DIR, "common_static"),
) # upload folder
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

6.在urls.py 文件添加:

from django.conf import settings
...
if settings.DEBUG:
from django.conf.urls.static import static
urlpatterns += static(
settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

6.在xadmin中添加Ueditor文件

在xadmin下的plugin中新建ueditor.py文件(我的是在extra_apps/xadmin,也可以在site_packages中找到对应的文件夹)添加如下代码:

#!/usr/bin/python3
# -*-coding:utf-8-*- 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.js") # 自己的静态目录
nodes.append(js) xadmin.site.register_plugin(UeditorPlugin, UpdateAdminView)
xadmin.site.register_plugin(UeditorPlugin, CreateAdminView)
7.将ueditor添加到plugin下的init中
PLUGINS = (
.....
'ueditor',
)

8.将ueditor添加到项目app里面的adminx.py中(!!!之前由于没有添加一直无法显示)

class ArticleAdmin(object):
style_fields = {'content': 'ueditor'}
......

7.在前端显示的话,需要对html页面修改如下

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

本博客参考:https://blog.csdn.net/wgpython/article/details/79585205

Django xadmin后台添加富文本编辑器UEditor的用法的更多相关文章

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

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

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

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

  3. django xadmin 集成DjangoUeditor富文本编辑器

    本文档记录自己的学习历程! 介绍 Ueditor HTML编辑器是百度开源的在线HTML编辑器,功能非常强大 额外功能 解决图片视频等无法上传显示问题 Ueditor下载地址 https://gith ...

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

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

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

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

  6. springboot+layui 整合百度富文本编辑器ueditor入门使用教程(踩过的坑)

    springboot+layui 整合百度富文本编辑器ueditor入门使用教程(踩过的坑) 写在前面: ​ 富文本编辑器,Multi-function Text Editor, 简称 MTE, 是一 ...

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

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

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

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

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

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

随机推荐

  1. Java ssl认证记录

    听到有人在用,所以自己随便搜了搜试了下,这里就是简单记录 就是操作了一遍这篇博文 https://blog.csdn.net/a495614205/article/details/12648939 i ...

  2. MySQL更新优化(转)

    通常情况下,当访问某张表的时候,读取者首先必须获取该表的锁,如果有写入操作到达,那么写入者一直等待读取者完成操作(查询开始之后就不能中断,因此允许读取者完成操作).当读取者完成对表的操作的时候,锁就会 ...

  3. Delphi XE8 中TIdTCPClient的WriteLn编码变化!

    //XE2中正常的代码: IdTCPClient1.IOHandler.WriteLn(sendData,TEncoding.ANSI); //XE8中不行了,解决方法: //,引入“IdGlobal ...

  4. Tcp连接的七次握手浅析

    LINUX 查看tcp连接数及状态 # netstat -n | awk '/^tcp/ {++S[$NF]} END {for(a in S) print a, S[a]}' TIME_WAIT 8 ...

  5. dependencies与dependencyManagement的区别

    1.DepencyManagement应用场景 当我们的项目模块很多的时候,我们使用Maven管理项目非常方便,帮助我们管理构建.文档.报告.依赖.scms.发布.分发的方法.可以方便的编译代码.进行 ...

  6. ASP.NET 身份验证机制

    ASP.NET提供了3种认证方式:windows身份验证:IIS根据应用程序的设置执行身份验证.要使用这种验证方式,在IIS中必须禁用匿名访问.Forms验证          :用Cookie来保存 ...

  7. 【原创】利用Office宏实现powershell payload远控

    本文将演示使用Veil-Evasion生成远控所需要的payload以及监听器,然后使用MacroShop生成payload 相关的VBA代码,最后演示将VBA代码写入.doc文本文档的宏中. 环境: ...

  8. 14.连接池.md

    目录 连接池定义 常用开源连接池: DBCP: C3P0 连接池定义 使用统一的规范:javax.sql.DataSource实现统一编程 常用开源连接池: DBCP:tomcat C3P0:hibe ...

  9. 【deep learning】斯坦福CS231n—深度学习与计算机视觉(资料汇总)

    官网 链接:CS231n: Convolutional Neural Networks for Visual Recognition Notes: 链接:http://cs231n.github.io ...

  10. C# 监测每个方法的执行次数和占用时间(测试3)

    原文:http://www.cnblogs.com/RicCC/archive/2010/03/15/castle-dynamic-proxy.html 在Nuget引用 Castle.Dynamic ...