zoukankan      html  css  js  c++  java
  • Xadmin集成富文本编辑器ueditor

    在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)

    6、将ueditor写入xadmin/Plugins/__init__.py文件中,__init__.py文件中有一个元组,存放xadmin的所有插件:

    7、在某一个app的adminx.py文件中指明哪个字段使用ueditor样式:

    8、有一个问题,当我们在富文本中写入非文本的内容时,页面不能正常显示内容:

    加入了一个表情,显示的确实一段HTML代码。这是Django的CSRF防范的一种机制,它会对用户输入的字符进行转义

    实际的网页源码是这样的。如果要正常显示这部分的内容,需要用到Django模板一个过滤器:

    DjangoUeditor源码地址:https://github.com/zhangfisher/DjangoUeditor

    参考:http://coding.imooc.com/class/78.html

  • 相关阅读:
    【Anagrams】 cpp
    【Count and Say】cpp
    【Roman To Integer】cpp
    【Integer To Roman】cpp
    【Valid Number】cpp
    重构之 实体与引用 逻辑实体 逻辑存在的形式 可引用逻辑实体 不可引用逻辑实体 散弹式修改
    Maven项目聚合 jar包锁定 依赖传递 私服
    Oracle学习2 视图 索引 sql编程 游标 存储过程 存储函数 触发器
    mysql案例~tcpdump的使用
    tidb架构~本地化安装
  • 原文地址:https://www.cnblogs.com/thunderLL/p/6810252.html
Copyright © 2011-2022 走看看