码迷,mamicode.com
首页 > 其他好文 > 详细

django——xadmin中集成富文本编辑器ueditor

时间:2018-08-11 19:33:45      阅读:297      评论:0      收藏:0      [点我收藏+]

标签:规则   http   logs   self   toolbar   course   har   上传   edit   

一、安装

  • pip命令安装,由于ueditor为百度开发的一款富文本编辑框,现已停止维护,如果解释器为python2,则直接pip install djangoueditor
  • 解压包安装,python3以上的版本需要下载压缩包解压安装 下载地址
    步骤
    1. 到下载地址下载并解压
    2. cmd进入该文件夹根目录python setup.py install直接安装到当前site-package中

二、添加app

将djangoueditor添加到setting.py中

INSTALLED_APPS = [
...
‘DjangoUeditor‘,]

三、添加url

将URL添加到urlpatterns中去:

#富文本编辑器
url(r‘^ueditor/‘,include(‘DjangoUeditor.urls‘ )),

四、修改model字段

django自带的富文本编辑框为models.Textfield()
from DjangoUeditor.models import UEditorField

class Course(models.Model):
    name = models.CharField(max_length=20, verbose_name='课程名称')
    desc = models.TextField(verbose_name='课程描述')
    detail = UEditorField(verbose_name='课程详情',width=600, height=300, toolbars="full", imagePath="course/ueditor/", filePath="course/ueditor/", upload_settings={"imageMaxSize":1204000},default='')

说明:
width,height :编辑器的宽度和高度,以像素为单位。imagePath :图片上传后保存的路径,如"images/",实现上传到"{{MEDIA_ROOT}}/images"文件夹。 注意:如果imagePath值只设置文件夹,则未尾要有"/" imagePath可以按python字符串格式化:如"images/%(basename)s_%(datetime)s.%(extname)s"。这样如果上传test.png,则文件会 被保存为"{{MEDIA_ROOT}}/images/test_20140625122399.png"。 filePath : 附件上传后保存的路径,设置规则与imagePath一样。更多用法

五、xadmin中添加插件ueditor

由于已经将xadmin源文件拷贝到了项目下,本文为extra_apps/xadmin,在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.min.js")   #自己的静态目录
    nodes.append(js)

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

六、将ueditor添加到plugin下的_init_中


PLUGINS = (
...
‘ueditor‘,
)

七、将ueditor添加到adminx.py中


class CourseAdmin(object):
...
style_fields = {"detail": "ueditor"}

八、前端页面转义

浏览器为了web安全在对后端传来的html代码会进行转义,会将<>等符号进行转义,因此要对页面设置过滤器防止字符转义,

{% autoescape off %}
{{ course.detail }}
{% endautoescape %}
过滤器更多用法

django——xadmin中集成富文本编辑器ueditor

标签:规则   http   logs   self   toolbar   course   har   上传   edit   

原文地址:https://www.cnblogs.com/welan/p/9460721.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!