zoukankan      html  css  js  c++  java
  • xadmin使用富文本

    环境:pycharm django1.11.20 python2.7 后台xadmin(根据网络各种资料实现)

    本教程接上篇如何安装 xadmin,如何不清楚,请看上一篇(django安装xadmin) 

    下载:https://files.pythonhosted.org/packages/92/78/6a97dabce8ab394c78c8ede4bd65a9d740685d65b942641e5859408af102/DjangoUeditor-1.8.143.zip

    1.解压上面的文件,把DjangoUeditor(注意下载包里不止1个文件,请只考此文件夹)文件拷到项目下的extra_apps文件下面,该文件上一篇已经提升为蓝色,即不再重复,可以直接调用。

    2.在settings.py文件中,INSTALLED_APPS中添加加  'DjangoUeditor' 

    并在最底下添加以下两条代码用于图片访问及上传地址

    MEDIA_URL = '/static/uepload/'     #用于图片或者文件访问的路径
    MEDIA_ROOT = os.path.join(BASE_DIR, 'static/uepload')      #用于图片或者文件上传的路径

    还需要设定static的搜索路径,就是注意1中选择一种,否则富文本上传的图片或者文件无法正常用会报错。

    注意1:项目设定的static必须是如下一种,

    STATIC_URL = '/static/'
    STATICFILES_DIRS=(os.path.join(BASE_DIR,'static'))或STATICFILES_DIRS=[os.path.join(BASE_DIR,'static')]

    或者STATICFILES_DIRS=(os.path.join(BASE_DIR,'static'),直接再最后加个逗号,即是元组

    STATICFILES_DIRS这个必须是元组或者列表, 如果不是会报错,并且跟上面的MEDIA_URL及MEDIA_ROOT冲突

    注意2:由于django版本比较低,请到DjangoUeditor目录下面urls.py中的patterns去除掉,换url,如下:

    #coding:utf-8
    from django import VERSION
    if VERSION[0:2]>(1,3):
    from django.conf.urls import  url
    else:
    from django.conf.urls.defaults import url

    from views import get_ueditor_controller

    urlpatterns = [
    url(r'^controller/$',get_ueditor_controller)
    ]

    3.在根的urls.py文件中,添加一条配置 

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

    4.在model中类举例设定如下:

    from DjangoUeditor.models import UEditorField

    class blogblog(models.Model):
      content=UEditorField(imagePath='images/',width=600,height=300,filePath='files/',default='',verbose_name='内容')

    5.在项目里extra_apps中的xadmin文件夹里的plugins文件夹下面新建一个 ueditor.py 内容编辑如下:

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

    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)

    6.plugins文件夹下面的__init__.py文件,里面PLUGINS=()中添加'ueditor', 注意上下间隔必须是逗号。

    7.至此,已经配置完成,现在开始后台测试一下,

    (1)项目文件中adminx.py文件,

    import xadmin
    from .models import blogblog

    class blogadmin(object):
    style_fields = {'content': 'ueditor'}
    list_display=['pk','content']
    xadmin.site.register(blogblog,blogadmin)

    注意:

    style_fields = {'content': 'ueditor'}

    这个是一个声明,必须要加的,如果model中定义的类不是content,那你就要更为你定义的,我这边定义的是content

    8.把数据库内容渲染到页面

    class Index(View):
    def get(self,request):
    form=TestUEditorForm()
    blogIndex=blogblog.objects.get(pk=1)
    context=blogIndex.content
    return render(request,'index.html',{'form':form,'context':context})

    9.HTML页面的举例设置

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Title</title>
    {{ form.media }}    
    </head>
    <body>
    {{ form }}
    </body>
    </html>

    注意:{{ form.media }}    和 {{ form }}  都必须加载,才可以使用富文本

    另外:如果数据库中加载出来的数据是html代码,

    可以使用 {{ context|safe }} 直接转义.

    或者使用 

    {% autoescape off %}
    {{ context }}
    {% endautoescape %}

     

  • 相关阅读:
    docker知识复习
    记住left join最简单的方式(转)
    ingress rewrite 配置文件的结构 + server_name和location这两条指令的配置来匹配要 虚拟主机
    PAM unable to dlopen(/lib/security/pam_limits.so): /lib/security/pam_limits.so: wrong ELF class: ELFCLASS32
    iRedMail退信问题的解决(转)
    curl NSS error -8179 (SEC_ERROR_UNKNOWN_ISSUER)
    看进程的启动时间长度 + vmstat + jstack 应用
    Nginx日志中的金矿
    php-fpm参数优化
    PHP扩展--opcache安装及配置
  • 原文地址:https://www.cnblogs.com/weilaibuxiangshuo/p/10385593.html
Copyright © 2011-2022 走看看