Xadmin集成富文本编辑器ueditor

2021-08-24 01:44:59

在xadmin中通过自定义插件，实现富文本编辑器，效果如下：

1、首先，pip安装ueditor的Django版本：

pip install DjangoUeditor

2、之后需要添加到项目的settings.py文件的INSTALLED_APPS下面

3、在urls.py文件中加入用于处理富文本的网址：

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

4、在model中使用UEditorField字段

from DjangoUeditor.models import UEditorField

class Blog(models.Model):

    Name=models.CharField(,max_length=100,blank=True)

    Content=UEditorField(u'内容    ',width=600, height=300,toolbars="full", imagePath="", filePath="",upload_settings={"imageMaxSize":1204000},settings={},command=None,event_handler=myEventHander(),blank=True)

UEditorField继承自models.TextField,因此你可以直接将model里面定义的models.TextField直接改成UEditorField即可。定义UEditorField时除了可以直接传入models.TextField提供的参数外，还可以传入UEditorField提供的额外的参数来控制UEditorField的外观、上传路径等。 UEditorField的参数如下：

width，height :编辑器的宽度和高度，以像素为单位。
toolbars :配置你想显示的工具栏，取值为mini,normal,full，代表小，一般，全部。如果默认的工具栏的按钮数量不符合您的要求，您可以在settings里面配置自己的显示按钮。参见后面介绍。
imagePath :图片上传后保存的路径,如"images/",实现上传到"{{MEDIA_ROOT}}/images"文件夹。注意：如果imagePath值只设置文件夹，则未尾要有"/" imagePath可以按python字符串格式化：如"images/%(basename)s_%(datetime)s.%(extname)s"。这样如果上传test.png，则文件会被保存为"{{MEDIA_ROOT}}/images/test_20140625122399.png"。 imagePath中可以使用的变量有：
- time :上传时的时间，datetime.datetime.now().strftime("%H%M%S")
- date ：上传时的日期，datetime.datetime.now().strftime("%Y%m%d")
- datetime ：上传时的时间和日期，datetime.datetime.now().strftime("%Y%m%d%H%M%S")
- year : 年
- month : 月
- day : 日
- rnd : 三位随机数，random.randrange(100,999)
- basename ：上传的文件名称，不包括扩展名
- extname : 上传的文件扩展名
- filename : 上传的文件名全称
filePath : 附件上传后保存的路径，设置规则与imagePath一样。
upload_settings : 字典值, 例:upload_settings={ imagePathFormat:"images/%(basename)s_%(datetime)s.%(extname)s", imageMaxSize:323232 fileManagerListPath:"files" }
- upload_settings的内容就是ueditor/php/config.json里面的配置内容，因此，你可以去看config.json或者官方文档内容来决定该如何配置upload_settings,基本上就是用来配置上传的路径、允许上传的文件扩展名、最大上传的文件大小之类的。
- 上面的imagePath和filePath被单独提取出来配置，原因是因为这两个参数是最常使用到的，imagePath就相当于upload_settings里面的 imagePathFormat，filePath就相当于upload_settings里面的filePathFormat。
- 您upload_settings里面设置了imagePathFormat,也可以在UeditorField里面设置imagePath，效果是一样的。但是如果两者均设置，则imagePath优先级更高。
- 涂鸦文件、截图、远程抓图、图片库的xxxxPathFormat如果没有配置，默认等于imagePath.
- 远程文件库的xxxxPathFormat如果没有配置，默认等于filePath.
settings : 字典值,配置项与ueditor/ueditor.config.js里面的配置项一致。
command : 可以为Ueditor新增一个按钮、下拉框、对话框,例：

  Description = UEditorField(u'描述', blank=True, toolbars="full",imagePath="cool/", settings={"a": 1},command=[myBtn(uiName="mybtn1", icon="d.png", title=u"1摸我",ajax_url="/ajaxcmd/"),myCombo(uiName="myCombo3",title=u"ccc",initValue="aaa")])

5、创建ueditor插件

在项目中xadmin/Plugins中创建插件ueditor.py，写入下面代码：

# -*- coding: utf-8 -*-

import xadmin

from django.db.models import TextField

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_fiels_style(self, attrs, db_field, style, **kwargs):

        """

        接收adminx中的style_fields键值对，分别赋值给db_field,style

        """

        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文件

        """

        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)