文档章节

django+xamdin集成UEditor

乐_然
 乐_然
发布于 2017/07/11 11:32
字数 623
阅读 194
收藏 0

xadmin采用的是源代码引入到项目中的方式集成

我们使用djangoUEditor这个插件
github地址:https://github.com/zhangfisher/DjangoUeditor

步骤:

##1、安装方法

* 方法一:将github整个源码包下载回家,在命令行运行:
	python setup.py install
* 方法二:使用pip工具在命令行运行(推荐):
    pip install DjangoUeditor

##2、在Django中安装DjangoUeditor 在INSTALL_APPS里面增加DjangoUeditor app,如下: INSTALLED_APPS = ( #........ 'DjangoUeditor', )

##3、配置urls url(r'^ueditor/',include('DjangoUeditor.urls' )),

##4、在models中的使用

Course中detail字段使用了UEditorField的类型,引入:

from DjangoUeditor.models import UEditorField
class Course(models.Model):
    name = models.CharField(max_length=20,verbose_name=u'课程名')
    desc = models.CharField(max_length=300,default=u'',verbose_name=u'课程描述')
    detail =UEditorField(verbose_name=u'课程详情',width=600, height=300, imagePath="ueditor/image", filePath="ueditor/file", upload_settings={"imageMaxSize":1204000},settings={},command=None,blank=True)
    degree=models.CharField(choices=(('cj',u'初级'),('zj',u'中级'),('gj',u'高级')),max_length=2,verbose_name='难度')
    learn_times = models.IntegerField(default=0,verbose_name=u'学习时长')
    students = models.IntegerField(default=0,verbose_name=u'学生人数')
    fav_num = models.IntegerField(default=0,verbose_name=u'收藏人数')
    image = models.ImageField(upload_to='courses/%Y/%m',verbose_name=u'课程图片',max_length=100)
    click_num = models.IntegerField(default=0,verbose_name=u'点击数')
    add_time = models.DateTimeField(default=datetime.now,verbose_name=u'添加时间')
    teacher = models.ForeignKey(Teacher,null=True,blank=True,verbose_name=u'老师')
    category = models.CharField(max_length=20,verbose_name='类别',default='后端开发')
    tag = models.CharField(max_length=20,verbose_name='标签',default='')
    must_know = models.CharField(max_length=100,verbose_name='课程须知',default='')
    teacher_tips = models.CharField(max_length=100,verbose_name='老师提示',default='')
    is_banner = models.BooleanField(verbose_name='是否显示在banner中',default=False)

##5、adminx.py中,对应的Course类的CourseAdmin下,增加style_fields = {'detail':'ueditor'}

class CourseAdmin(object):
    list_display = ['name', 'desc', 'degree', 'learn_times', 'students', 'fav_num','click_num'];
    search_fields = ['name', 'desc','detail', 'degree', 'students'];
    list_filter = ['name', 'desc', 'detail', 'degree', 'learn_times', 'students'];
    model_icon = 'fa fa-battery-three-quarters'
    ordering=['-learn_times']
    readonly_fields = ['fav_num']
    exclude = ['students']
    refresh_times = [2,5]
    inlines = [LessonInline]
    list_editable = ['desc']
    style_fields = {'detail':'ueditor'}

##6、在xadmin的plugins文件夹下,新增加ueditor.py插件脚本,脚本内容:
 

# _*_ coding:utf-8 _*_
__author__ = 'Bruse'
__date__ = '2017-01-27 14:48'

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)

##7、在plugins的__init__.py文件下,加入插件的名称:'ueditor',
这样就可以在xadmin后台看看该字段的样式了。
##8、假如在后台编辑UEditor字段,发现前台展现乱码时候,需要在模板该字段下,使用{% autoescape off %}来包裹。例如:

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

 

© 著作权归作者所有

乐_然
粉丝 12
博文 152
码字总数 36197
作品 0
南京
私信 提问
集成到 Django 的 Ueditor HTML 编辑器--DUEditor

DUEditor 是 Django 的 UEditor 插件。 本项目改造自DjangoUeditor,Ueditor HTML编辑器是百度开源的HTML编辑器。 本模块帮助在Django应用中集成百度Ueditor HTML编辑器,支持Python3,上传...

dhcn
2017/10/02
2.6K
1
fedkey/UEditor-KityFormula-for-wordpress

基本信息 UEditor-KityFormula for wordpress基于Ueditor,UEditor 是由百度「FEX前端研发团队」开发的所见即所得富文本web编辑器,轻量,可定制,用户体验好。本插件将wordpress与ueditor编辑...

fedkey
01/04
0
0
Alvin/UEditor-ThinkPHP3.2

一、简介 很多同学在用ThinkPHP做开发集成ueditor富文本编辑器很头疼,需要配置的东西太多,一时分不清各种前后台配置,思路顿时混乱,索性干脆直接用官方的demo,扩展性不说,但殊不知有很大...

Alvin
2016/08/26
0
0
网站如何集成百度UEditor编辑器

在平时的网站维护使用过程中,富文本编辑器是网站必不可少的元素之一。现在市面上各种编辑器功能设计参差不齐,自己做了几个网站都是用蝉知建站系统做的,而蝉知默认内置的编辑器是KindEdito...

it1000001001
2017/06/20
478
1
替换 WordPress 的编辑器为百度 UEditor 编辑器

不少国人吐槽 WordPress 自带的 TinyMCE 编辑器不好用,想要替换为百度的 UEditor 编辑器,好吧,今天倡萌就推荐一款 UEditor 编辑器插件,让你可以替换 WordPress 后台的编辑器为百度 UEdi...

james_laughing
2018/08/20
208
0

没有更多内容

加载失败,请刷新页面

加载更多

刚哥谈架构 (二) 我眼中的架构师

之前在公司,有小伙伴在向别人介绍我的时候,经常会有人这么说:“刚哥是我们的architcture”,如果来人是老外,心中一定是一惊,心中暗叹,“这位匪首看上去貌不惊人,难道已经做到了架构和...

naughty
34分钟前
2
0
OSChina 周日乱弹 —— 别问,问就是没空

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @tom_tdhzz :#今日歌曲推荐# 分享容祖儿/彭羚的单曲《心淡》: 《心淡》- 容祖儿/彭羚 手机党少年们想听歌,请使劲儿戳(这里) @wqp0010 :周...

小小编辑
今天
89
3
golang微服务框架go-micro 入门笔记2.1 micro工具之micro api

micro api micro 功能非常强大,本文将详细阐述micro api 命令行的功能 重要的事情说3次 本文全部代码https://idea.techidea8.com/open/idea.shtml?id=6 本文全部代码https://idea.techidea8....

非正式解决方案
今天
5
0
Spring Context 你真的懂了吗

今天介绍一下大家常见的一个单词 context 应该怎么去理解,正确的理解它有助于我们学习 spring 以及计算机系统中的其他知识。 1. context 是什么 我们经常在编程中见到 context 这个单词,当...

Java知其所以然
昨天
5
0
Spring Boot + Mybatis-Plus 集成与使用(二)

前言: 本章节介绍MyBatis-Puls的CRUD使用。在开始之前,先简单讲解下上章节关于Spring Boot是如何自动配置MyBatis-Plus。 一、自动配置 当Spring Boot应用从主方法main()启动后,首先加载S...

伴学编程
昨天
8
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部