美文网首页
4.Django+xadmin的富文本插件Ueditor的配置

4.Django+xadmin的富文本插件Ueditor的配置

作者: 阿古瓜 | 来源:发表于2017-06-01 19:32 被阅读0次

1.安装DjangoUeditor包

  pip install DjangoUeditor

2.settings.py加入DjangoUeditor

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

3.配置项目urls.py

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

4.在app中的models.py把字段类型改为UEditorField

  from DjangoUeditor.models import UEditorField

  class Course(models.Model):
              ...
          detail = UEditorField(verbose_name=u"详情", width=600, height=300, imagePath="courses/ueditor/",filePath="courses/ueditor/",default="")

5.在xadmin的插件管理包plugins文件中新建ueditor.py文件,然后在包的init中加入ueditor

## plugins/ueditor.py
# -*- 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.min.js")   #自己的静态目录
        nodes.append(js)

xadmin.site.register_plugin(UeditorPlugin, UpdateAdminView)
xadmin.site.register_plugin(UeditorPlugin, CreateAdminView)
##  plugins/__init__.py

PLUGINS = (
    ...
    'ueditor'
)

6.在app的adminx.py文件的相关admin类中添加style_fields


class CourseAdmin(object):
    list_display = ['name', 'desc', 'detail']
    search_fields = ['name', 'desc', 'detail',]
    list_filter = ['name', 'desc', 'detail']

    style_fields = {"detail": "ueditor"}

至此后台xadmin富文本配置完毕。

相关文章

  • 4.Django+xadmin的富文本插件Ueditor的配置

    1.安装DjangoUeditor包 2.settings.py加入DjangoUeditor 3.配置项目url...

  • 仿微信公众号富文本编辑器

    微信公众号富文本编辑器使用百度ueditor插件为基础加以封装 百度ueditor配置提供替换皮肤,只要添加相应的...

  • 工具集合

    富文本编辑器 UEditor百度提供的开源和免费的插件

  • 聊聊富文本编辑

    前端富文本编辑的场景还是挺多的,所以开发中就需要应用到各种富文本插件,比如百度的UEditor,kindedito...

  • 富文本插件ueditor的使用

    在后台编辑页中经常要用到富文本编辑器,比较常用的就是百度的开源插件ueditor,为了快速,没有看文档,直接百度,...

  • 百度富文本ueditor

    关于百度富文本使用备忘Vue 项目使用这个插件 vue-ueditor-wrap需要将 https://gitee...

  • Django富文本框,邮箱

    富文本框 先下载需要引入的富文本框插件,我用的是百度的Ueditor 下载请点击跳转 选择任意版本即可,我用的是j...

  • Django 富文本框,邮箱

    1.富文本框 先下载要引入的富文本框的文件,我用的是百度的UEditor下载地址:(http://ueditor....

  • vue 使用Ueditor富文本的配置

    1,首先把官网下载的Ueditor资源,放入静态资源src/static中。(我这下载的是1.4.3.3 Jsp ...

  • 关于富文本markdown编辑器

    几种知名开源富文本编辑器记录和对比(仅供参考) 1、UEditor 百度的。 优点:插件多,基本满足各种需求,类似...

网友评论

      本文标题:4.Django+xadmin的富文本插件Ueditor的配置

      本文链接:https://www.haomeiwen.com/subject/fvwefxtx.html