环境：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 %}

xadmin使用富文本的更多相关文章

  1. Django中使用富文本编辑器Uedit

    Uedit是百度一款非常好用的富文本编辑器 一.安装及基本配置 官方GitHub(有详细的安装使用教程):https://github.com/zhangfisher/DjangoUeditor 1. ...

  2. iOS开发小技巧--即时通讯项目:使用富文本在UILabel中显示图片和文字;使用富文本占位显示图片

    Label借助富文本显示图片 1.即时通讯项目中语音消息UI的实现,样式如图: 借助富文本在UILabel中显示图片和文字 // 1.创建一个可变的富文本 NSMutableAttributedStr ...

  3. 在微信小程序中使用富文本转化插件wxParse

    在微信小程序中我们往往需要展示一些丰富的页面内容,包括图片.文本等,基本上要求能够解析常规的HTML最好,由于微信的视图标签和HTML标签不一样,但是也有相对应的关系,因此有人把HTML转换做成了一个 ...

  4. 使用富文本OHAttributedLabel

    OHAttributedLabel 富文本标签 https://github.com/AliSoftware/OHAttributedLabel 以下是我渲染出来的效果 OHAttributedLab ...

  5. django-应用中和amdin使用富文本编辑器kindeditor

    文章描述.新闻详情和产品介绍等,都需要大量的文字描述信息或图片.视频.文字的编辑等,这个时候我们就需要介绍第三方富文本编辑器. 今天介绍的是django中绑定和应用kindeditor编辑器: 效果如 ...

  6. Django使用富文本编辑器

    1.下载kindeditor 网址:http://kindeditor.net/demo.php2.解压到项目中 地址:\static\js\kindeditor-4.1.103.删除没用的文件 例如 ...

  7. [Xcode 实际操作]九、实用进阶-(14)使用富文本CoreText框架创建丰富多彩的文本

    目录:[Swift]Xcode实际操作 本文将演示如何使用富文本CoreText框架创建丰富多彩的文本图形. 在项目导航区,打开视图控制器的代码文件[ViewController.swift] imp ...

  8. Django实现的博客系统中使用富文本编辑器ckeditor

    操作系统为OS X 10.9.2,Django为1.6.5. 1.下载和安装 1.1 安装 ckeditor 下载地址 https://github.com/shaunsephton/django-c ...

  9. 使用富文本编辑器Kindeditor

    今天在做需求的时候,遇到有一个字段,需要保存带有格式的内容,决定使用富文本框编辑器Kindeditor来实现,解决方法如下: 登录官网下载控件包: http://kindeditor.net/down ...

随机推荐

  1. com.github.ulisesbocchio:jasypt-spring-boot-starter:2.0.0引用了sping cloud Finchley.M8版本，一直报错说不能从阿里云下载

    解决方法: 1.找到idea或者eclipase中maven插件引向得settings.xml文件 2.修改文件中<mirror/>标签(配置仓库镜像用得)中<mirrorOf/&g ...

  2. SpringBoot获取请求的参数

    说明 SpringBoot 为我们封装了许多,简便的获取请求参数的方法! 1.获取无注解获取请求参数 请求地址:http://192.168.0.115:8080/myproject/test/noA ...

  3. Linux放大缩小字体的快捷键

    linux终端窗口字体缩放快捷键 环境:linux, 打开终端, 'ctrl' + '-'字体缩小,一行显示更多的内容 'ctrl' + 'shift' + '+'字体变大 ctl+shift+(+) ...

  4. vs2019编写c++的静态链接库并自己使用

    参考网址:https://blog.csdn.net/flame333/article/details/108346305 静态链接库1.新建一个静态库项目,其中有两个头文件,两个源文件 其中比较重要 ...

  5. (2)hadoop之-----配置免密码登录

    ssh-keygen -t rsa 然后一路回车 在家目录下会生成 .ssh 目录           ls -la   查看 进入   .ssh            cd .ssh cp ~/.s ...

  6. bt面板安装邮局系统

    前些日子阿里云优惠就顺便买了个服务器,今天想在阿里云的服务器上试着安装一个邮件服务,突然发现之前安装的好好的邮件服务插件不能正常安装了,一直报错. 点击该链接享受本文章的纯净无广告版 查看了下出错的地 ...

  7. 使用Visual Studio分析dump

    最近系统是不是CPU会飙升的百分之九十多甚至百分百,在本地又很难复现问题,无法定位问题出现在哪. 可以用转储文件来保存现场,然后通过分析dump文件可以大概分析出问题的所在 生成转存文件 在CPU飙升 ...

  8. GO的GC辣鸡回收（一）

    用户程序通过内存分配器(Allocator)在堆上申请内存,而垃圾收集器(Collector)负责回收堆上的内存空间,内存分配器和垃圾收集器共同管理程序中的堆内存空间. 基本概念 垃圾分类 语义垃圾: ...

  9. Springcloud轻松上手

    Springcloud技术分享 Spring Cloud 是一套完整的微服务解决方案,基于 Spring Boot 框架,准确的说,它不是一个框架,而是一个大的容器,它将市面上较好的微服务框架集成进来 ...

  10. C# Dapper基本三层架构使用 （四、WinForm UI层）

    UI层主要功能是显示数据和接受传输用户的数据,可以在为网站的系统运行提供交互式操作界面,表示层的应用方式比较常见,例如Windows窗体和Web页面. 在项目中增加WinForm应用程序,结构如下 添 ...