集成富文本编辑器Ueditor

（1）下载

地址：https://github.com/twz915/DjangoUeditor3/

解压后，把DjangoUeditor文件夹拷贝到项目目录下面

注意：直接pip install DjangoUeditor的方法会出问题

集成富文本编辑器Ueditor

（2）settings中添加app

INSTALLED_APPS = [
    'DjangoUeditor',
]

（3）MxOnline/urls.py

 　　# 富文本编辑器url
    path('ueditor/',include('DjangoUeditor.urls' )),

（4）course/models.py中Course修改detail字段

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

（5）xadmin/plugs目录下新建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.min.js")
        nodes.append(js)

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

（6）xadmin/plugs/__init__.py里面添加ueditor插件

PLUGINS = (
   'ueditor',
)

（7）course/adminx.py中使用

class CourseAdmin(object):
    #detail就是要显示为富文本的字段名
    style_fields = {"detail": "ueditor"}

（8）course-detail.html

在模板中必须关闭Django的自动转义才能正常显示

<div class="tab_cont tab_cont1">
     {% autoescape off %}
     {{ course.detail }}
     {% endautoescape %}
     </div>

出处：https://www.cnblogs.com/derek1184405959/p/8682250.html

集成富文本编辑器Ueditor

相关推荐