xadmin 添加富文本编辑框UEditor的用法（坑是真的多）

2019-11-29

python3以上不能直接用pip install ueditor
python3 安装版本 ueditor 下载

有两种方式安装

1 直接解压后把DjangoUeditor这个目录直接拖进项目目录下
2 cd到你下载的目录

#直接写入pip 
 python setup.py install  
 #查看 安装的依赖包 可以看到已安装了DjangoUeditor
 pip list

将djangoueditor添加到setting.py中

INSTALLED_APPS = [
    ...
    'DjangoUeditor',
]

#富文本框的设置
UEDITOR_SETTINGS = {
                       "toolbars": {  # 定义多个工具栏显示的按钮，允行定义多个
                           "name1": [['source', '|', 'bold', 'italic', 'underline']],
                           "name2": []
                   },
                   "images_upload":{
                                       "allow_type": "jpg,png",  # 定义允许的上传的图片类型
                                       "max_size": "2222kb"  # 定义允许上传的图片大小，0代表不限制
                                   },
                                   "files_upload": {
    "allow_type": "zip,rar",  # 定义允许的上传的文件类型
    "max_size": "2222kb"  # 定义允许上传的文件大小，0代表不限制
},
"image_manager": {
    "location": ""  # 图片管理器的位置,如果没有指定，默认跟图片路径上传一样
},
}
MEDIA_URL='/upload/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'upload/')#这个是在浏览器上访问该上传文件的url的前缀

添加url

urlpatterns = [
    . . .
    path('ueditor/',include('DjangoUeditor.urls')),
]

修改model

将模型中需要改为富文本添加的字段，一般为TextField，改为如下：

from DjangoUeditor.models import UEditorField
class PostImg(models.Model):
    # UEditorField继承自models.TextField, 因此你可以直接将model里面定义的models.TextField直接改成UEditorField即可。
    # UEditorField提供了额外的参数：
    # toolbars: 配置你想显示的工具栏，取值为mini, normal, full, besttome, 代表小，一般，全部, 涂伟忠贡献的一种样式。如果默认的工具栏不符合您的要求，您可以在settings里面配置自己的显示按钮。参见后面介绍。
    # imagePath: 图片上传的路径, 如
    # "images/", 实现上传到
    # "{{MEDIA_ROOT}}/images"
    # 文件夹
    # filePath: 附件上传的路径, 如
    # "files/", 实现上传到
    # "{{MEDIA_ROOT}}/files"
    # 文件夹
    # scrawlPath: 涂鸦文件上传的路径, 如
    # "scrawls/", 实现上传到
    # "{{MEDIA_ROOT}}/scrawls"
    # 文件夹, 如果不指定则默认 = imagepath
    # imageManagerPath: 图片管理器显示的路径，如
    # "imglib/", 实现上传到
    # "{{MEDIA_ROOT}}/imglib", 如果不指定则默认 = imagepath。
    # options：其他UEditor参数，字典类型。参见Ueditor的文档ueditor_config.js里面的说明。
    # css: 编辑器textarea的CSS样式
    # width，height: 编辑器的宽度和高度，以像素为单位。
    # ————————————————
     detail = UEditorField(verbose_name = '内容', height=500, width=1000,
                           default=u'', imagePath="Article_img/%%Y/%%m/",
                           toolbars='full', filePath='%%Y/%%m/',
                           upload_settings={"imageMaxSize": 1204000},
                           settings={}, command=None,)

     class Meta:
         verbose_name = '图片管理'
         verbose_name_plural = verbose_name

     def __str__(self):
         return "图片"

xadmin中添加插件ueditor

在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.js")   #自己的静态目录
        nodes.append(js)

xadmin.site.register_plugin(UeditorPlugin, UpdateAdminView)
xadmin.site.register_plugin(UeditorPlugin, CreateAdminView)

这俩如果是直接拖进项目的话 此时不用管的静态目录了;如果不是的话把你刚刚下载的如下图

把ueditor 加入到static 目录下 最后文件目录如下

将ueditor添加到plugin下的_init_中

PLUGINS = (
    ...
    'ueditor',
)

将ueditor添加到adminx.py中

class PostImgAdmin(object):
    list_display = ['detail',]
    #添加富文本编辑框(注意这里的字段要与你上面定义的字段名一样否者显示不出来)
    style_fields = {"detail": "ueditor"}

在前端显示的话，需要对html页面修改如下来阻止字符的转义

就是前端界面使用PostImg.detail这个字段的时候

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

最后运行

评论