django安装DjangoUeditor富文本
环境:
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富文本的更多相关文章
- django xadmin 集成DjangoUeditor富文本编辑器
本文档记录自己的学习历程! 介绍 Ueditor HTML编辑器是百度开源的在线HTML编辑器,功能非常强大 额外功能 解决图片视频等无法上传显示问题 Ueditor下载地址 https://gith ...
- django2集成DjangoUeditor富文本编辑器
富文本编辑器,在web开发中可以说是不可缺少的.django并没有自带富文本编辑器,因此我们需要自己集成,在这里推荐大家使用DjangoUeditor,因为DjangoUeditor封装了我们需要的一 ...
- Django中CKEditor富文本编译器的使用
CKEditor富文本编辑器 1. 安装 pip install django-ckeditor 2. 添加应用 在INSTALLED_APPS中添加 INSTALLED_APPS = [ ... ' ...
- django后台集成富文本编辑器Tinymce的使用
富文本编辑器Tinymce是使用步骤: 1.首先去python的模块包的网站下载一个django-tinymce的包 2.下载上图的安装包,然后解压,进入文件夹,执行: (pychrm直接运行命令pi ...
- django中ckeditor富文本编辑器使用
1.安装模块 (pillow是python的一个图像处理库) pip install django-ckeditor pip install pillow 2.编辑seetings.py配置文件 IN ...
- Django使用tinymce富文本编辑器
1 - 安装 pip install django-tinymce==2.6.0 2 - 注册app INSTALLED_APPS = ( ... 'tinymce', ) 3 - 在setting中 ...
- Django集成百度富文本编辑器uEditor
UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码. 首先从ueEditor官网下载最新版本的包, ...
- Django中添加富文本编辑器
使用的是CKeditor这个模块 1.安装: pip install django-ckeditor 2.将ckeditor注册到settings.py文件中, 并添加ckeditor的url到你项目 ...
- django配置Ueditor富文本编辑器
1.https://github.com/twz915/DjangoUeditor3下载包,进入包文件夹,找到DjangoUeditor包拷贝到项目下,和xadmin同级目录 2.找到项目的setti ...
随机推荐
- Java中Lambda表达式基础及使用详解
概述 Lambda 是JDK 8 的重要新特性.它允许把函数作为一个方法的参数(函数作为参数传递进方法中),使用 Lambda 表达式可以使代码变的更加简洁紧凑,使Java代码更加优雅. 标准格式 三 ...
- NOIP 模拟 $25\; \rm queen$
题解 \(by\;zj\varphi\) 这是一道纯分类讨论,然后推式子的题,细节挺多,挺麻烦,但是很考验数学能力 不讲了,官方题解给的很清楚 Code: %: pragma GCC optimize ...
- Qt多窗口编程详解
常用的窗体基类是 QWidget.QDialog 和 QMainWindow,在创建 GUI 应用程序时选择窗体基类就是从这 3 个类中选择. QWidget 直接继承于 QObject,是 QDia ...
- MVVMLight学习笔记(二)---MVVMLight框架初探
一.MVVM分层概述 MVVM中,各个部分的职责如下: Model:负责数据实体的结构处理,与ViewModel进行交互: View:负责界面显示,与ViewModel进行数据和命令的交互: View ...
- 关于MYSQL5.7:Access denied for user 'root'@'localhost' (using password:YES)解决
这一类解决要提供远程服务,需要进入mysql的my.ini文件中进行修改,但是在win10系统中,my.ini不再放在MYSQL安装目录的根目录中了,需要到一类应用缓存目录中寻找MYSQL的详细配置文 ...
- mysql主要的两个索引Innodb和MyIASM。
参考:https://www.cnblogs.com/xiaohaillong/p/6079551.html 1. a.Innodb引擎,Innodb引擎提供了对数据库ACID事务的支持.并且还提供了 ...
- promise链式调用的应用
then在链式调用时,会等前一个then或者函数执行完毕,返回状态,才会执行回调函数. (1)代码顺序执行,第一步调用了函数cook ,cook执行返回了一个promise,promise返回的是成功 ...
- 你的域名是如何变成 IP 地址的?
我的 个人网站 上线了,上面可以更好的检索历史文章,并且可以对文章进行留言,欢迎大家访问 可能大家都知道或者被问过一个问题,那就是很经典的「从浏览器输入 URL 再到页面展示,都发生了什么」.这个问题 ...
- Ubuntu 16.04 + Win10双系统 启动Ubuntu进入命令行 无界面
Ubuntu 16.04 + Win10双系统,启动Ubuntu时候报错,并入命令行(无界面). 原因:可能是双系统兼容性问题 解决办法: 重启系统,进入Win10 然后在Win10中重启电脑. 重启 ...
- CentOS 7.3安装Zabbix3.2
一.ZABBIX概述 Zabbix是一个基于Web界面的分布式系统监控的企业级开源软件.可以监视各种系统与设备的参数,保障服务器及设备的安全运营. Zabbix的功能和特性: 1.安装与配置简单: ...