环境：

pycharm，django1.11，python2.7

第一种：直接 pip install DjangoUeditor，直接从网上安装到pycharm

由于是直接安装，ueditor.html，ueditor_old.html会显示无法加载，请到项目下面查到这两个文件，把它拷到 templates 文件夹下面 ，这边是venv/DjangoUeditor\templates下面，大家根据各自的要求进行查看。其它model、urls、settings配置跟第二种一样，请直接看下面

第二种：

1.首先，在项目下面随便新建文件夹名ex_blog，

2.从https://files.pythonhosted.org/packages/92/78/6a97dabce8ab394c78c8ede4bd65a9d740685d65b942641e5859408af102/DjangoUeditor-1.8.143.zip，

下载安装包，解压包，把最里面的那个文件夹,DjangoUeditor拷到ex_blog下面，

3.通过pycharm 选中ex_blog文件夹，点击鼠标右键选中菜单 mark directory as 选择 sources root ，就可以变成上面的蓝色文件夹目录，（这一部分重要，用于把整个文件夹提升为项目可直接调用文件，关系到后面程序的调用）

4.在settings.py的INSTALLED_APPS中引入 DjangoUeditor，并文件中下面添加代码，如下 ：

sys.path.insert(0, os.path.join(BASE_DIR, 'ex_blog'))

并在最后添加图片上传路径

MEDIA_URL = '/static/uepload/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'static/uepload')

5.在根的urls.py中添加（注意，并不是app中的urls.py）

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

6.在models.py中引入UEditorField（注意：models模版中不可以对宽高进行设置）

from DjangoUeditor.models import UEditorField

例如：

class Blogblog(models.Model):
　　content=UEditorField(verbose_name='内容')

7.在admin.py中注册，即可以在admin后台中使用富文本

from .models import Blogblog

class Blogblogadmin(admin.ModelAdmin):
　　list_display = ['pk','content']

admin.site.register(Blogblog,Blogblogadmin)

注意：（第1种和第2种）由于django1.11都会报patterns的错误，请到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)
]

HTML如何加载富文本

1.先在views.py中导入模块

from DjangoUeditor.forms import UEditorField
from django.forms import forms
from .models import Blogblog

2.定义一个forms(设置宽高，以及图片或文件上传的目录，根据上面设置是在uepload目录下面images和files)

class TestUEditorForm(forms.Form):
content = UEditorField('内容', width=600, height=300, toolbars="full", imagePath="images/", filePath="files/",upload_settings={"imageMaxSize":1204000},settings={})

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

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

4.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 %}

django安装DjangoUeditor富文本的更多相关文章

  1. django xadmin 集成DjangoUeditor富文本编辑器

    本文档记录自己的学习历程! 介绍 Ueditor HTML编辑器是百度开源的在线HTML编辑器,功能非常强大 额外功能 解决图片视频等无法上传显示问题 Ueditor下载地址 https://gith ...

  2. django2集成DjangoUeditor富文本编辑器

    富文本编辑器,在web开发中可以说是不可缺少的.django并没有自带富文本编辑器,因此我们需要自己集成,在这里推荐大家使用DjangoUeditor,因为DjangoUeditor封装了我们需要的一 ...

  3. Django中CKEditor富文本编译器的使用

    CKEditor富文本编辑器 1. 安装 pip install django-ckeditor 2. 添加应用 在INSTALLED_APPS中添加 INSTALLED_APPS = [ ... ' ...

  4. django后台集成富文本编辑器Tinymce的使用

    富文本编辑器Tinymce是使用步骤: 1.首先去python的模块包的网站下载一个django-tinymce的包 2.下载上图的安装包,然后解压,进入文件夹,执行: (pychrm直接运行命令pi ...

  5. django中ckeditor富文本编辑器使用

    1.安装模块 (pillow是python的一个图像处理库) pip install django-ckeditor pip install pillow 2.编辑seetings.py配置文件 IN ...

  6. Django使用tinymce富文本编辑器

    1 - 安装 pip install django-tinymce==2.6.0 2 - 注册app INSTALLED_APPS = ( ... 'tinymce', ) 3 - 在setting中 ...

  7. Django集成百度富文本编辑器uEditor

    UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码. 首先从ueEditor官网下载最新版本的包, ...

  8. Django中添加富文本编辑器

    使用的是CKeditor这个模块 1.安装: pip install django-ckeditor 2.将ckeditor注册到settings.py文件中, 并添加ckeditor的url到你项目 ...

  9. django配置Ueditor富文本编辑器

    1.https://github.com/twz915/DjangoUeditor3下载包,进入包文件夹,找到DjangoUeditor包拷贝到项目下,和xadmin同级目录 2.找到项目的setti ...

随机推荐

  1. SQL Server 判断数据库中是否存在表

    使用场景 可以反复的执行相同脚本 方式1:查询sysobjects表 if EXISTS (SELECT * from sysobjects WHERE name='test_table') DROP ...

  2. 「TJOI2019」唱、跳、rap 和篮球 题解

    题意就不用讲了吧-- 鸡你太美!!! 题意: 有 \(4\) 种喜好不同的人,分别最爱唱.跳. \(rap\).篮球,他们个数分别为 \(A,B,C,D\) ,现从他们中挑选出 \(n\) 个人并进行 ...

  3. C#基础知识---装箱与拆箱

    一.定义 装箱:将值类型转化为引用类型,装箱一般会在堆上分配一块内存,用于存储要转换的值. 拆箱:将引用类型转化为值类型 注:.NET 2.0 引入的泛型其实在很大的程度上解决了装拆箱产生的类型转换问 ...

  4. Linux虚拟机系统中进行redis的哨兵模式配置

    一.配置步骤 开一台虚拟机1.创建三个redis配置文件:/etc/redis下pidfile "/var/run/redis6380.pid" redis的id号port 638 ...

  5. UWP AppConnection.

    https://www.cnblogs.com/manupstairs/p/14582794.html

  6. 【mysql】mysql逻辑框架简介及show profile说明

    1.mysql逻辑框架简介 和其它数据库相比,MySQL 有点与众不同,它的架构可以在多种不同场景中应用并发挥良好作用.主要体现在存储引擎的架构上,插件式的存储引擎架构将查询处理和其它的系统任务以及数 ...

  7. Mybatis的分页工具

    配置拦截器插件 特别注意,新版拦截器是 com.github.pagehelper.PageInterceptor. com.github.pagehelper.PageHelper 现在是一个特殊的 ...

  8. STM32+Air202+Air530+HXDZ-30102-ACC心率血氧GPS采集上传到阿里云

    所有资料都在QQ群1121445919 主要功能 HXDZ-30102-ACC采集心率血氧数据 STM32通过串口将数据转发到air202模块 air202将数据上传到阿里云平台进行展示与处理 整合合 ...

  9. 设置Sublime插件快捷键--实现CSS颜色选取

    安装插件ColorPicker 如果你经常要查看或设置颜色值,这个插件可以很方便地调用你本机的调色板应用.(译者扩充:)这是一个双向的功能,你既可以在调色板中选择一个颜色,然后按"确定&qu ...

  10. 原来：HTTP可以复用TCP连接

    问题 线上的一个项目会和微信服务器有API请求(目的是获取用户的微信信息),但会有偶发的报错: 'Connection aborted.', ConnectionResetError(104, 'Co ...