[Django学习] Django基础(8)

一. 简单的文本编辑

# models.pycontent = TextField()

　　content在后台页面显示的就是一个简单的文本编辑器。如果想在前端页面中实现诸如“换行”，“加粗”等样式，可在相应部位直接添加HTML标签，同时在前端的html文件中通过相应方式解析这些标签。

# blog_detail.html
<div class="blog-content">{{ blog.content|safe }}</div># blog_list.html
<p>{{ blog.content|striptags|truncatechars:200 }}</p>

二. 富文本编辑

# models.py
content = RichTextField()

　　content在后台页面中显示的是一个富文本编辑器。它提供类似于 Microsoft Word 的编辑功能，用户不需要编写 HTML标签，可直接根据需要设置各种文本格式。

三. 如何实现富文本编辑

（一）安装django-ckeditor　　　

pip install django-ckeditor

（二）配置settings.py

# 注册应用
INSTALLED_APPS = ['django.contrib.admin','django.contrib.auth','django.contrib.contenttypes','django.contrib.sessions','django.contrib.messages','django.contrib.staticfiles','blog','ckeditor',
]# 修正语言为中文简体('zh-hans')或者中文繁体('zh-Hans')
LANGUAGE_CODE = 'zh-hans'

（三）修改models.py

# models.pyfrom ckeditor.fields import RichTextFieldcontent = RichTextField()

四. 实现图片上传功能

　　常规的ckeditor没有图片上传功能，因此需要为其增加该功能。

（一）安装pillow

＃ 安装pillow
pip install pillow

（二）配置setting.py

# 注册应用
INSTALLED_APPS = [    'django.contrib.admin','django.contrib.auth','django.contrib.contenttypes','django.contrib.sessions','django.contrib.messages','django.contrib.staticfiles','blog','ckeditor','ckeditor_uploader',
]# 配置media, 保存需要存储的文件
# 2-1.配置上传的URLMEDIA_URL = '/media/'# 2-2.在mysite根目录下新建一个文件夹“media”
# 2-3.配置文件上传的路径为新建的文件夹MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

（三）配置urls.py

# 对应2-1，配置urls.py
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

（四）配置models.py

# 更新models.py中相应字段的数据类型
from ckeditor_uploader.fields import RichTextUploadingFieldcontent = RichTextUploadingField()

（五）迁移数据

python manage.py makemigrations
python manage.py migrate

注明：学习资料来自“再敲一行代码的个人空间”以及“杨仕航的博客”

转载于:https://www.cnblogs.com/AngryZe/p/9284092.html

[Django学习] Django基础(8)_富文本编辑器相关推荐

android 富文本编辑器_富文本编辑器，还是Tinymce好一点？Angular/Vue集成最新版
以前jQuery.PC网页时代,富文本编辑器一直就是百度Ueditor.KindEditor.现在使用Angular.Vue.React等MVVM架构以及最新的大前端工程模式下,老的编辑器显然不更新 ...
kind富文本编辑器_富文本编辑器原理探索
经常在做企业网站的管理系统的时候需要用到富文本编辑器,之前基本上都是直接去 npm 或者 github 上面搜找一些排名考前或者 readme 写的好的库,直接拿来用.万变不离其宗,是时候探索下本质了 ...
android 富文本编辑器_富文本编辑器原理探索
经常在做企业网站的管理系统的时候需要用到富文本编辑器,之前基本上都是直接去 npm 或者 github 上面搜找一些排名考前或者 readme 写的好的库,直接拿来用.万变不离其宗,是时候探索下本质了 ...
kindeditor java上传_富文本编辑器kindeditor上传图片的配置方法
[导读]这篇文章主要介绍了使用富文本编辑器上传图片实例详解的相关资料,需要的朋友可以参考下富文本编辑器上传图片一.导入kindeditor的js 二.将kindeditor与一个文本域textar ...
fastnest怎么一键排版_富文本编辑器的一键排版功能
在做CMS系统的时候,用户常常会从word粘贴一些东西到编辑器中,早起的富文本编辑器也都提供了去除word格式的功能(尽管有时候比较难用),甚至有时候用户要求打开一个本地的word文件的时候系统能够直 ...
java富文本如何转义_富文本编辑器wangEditor中转义字符的问题
前段时间做项目的时候,要使用富文本编辑器,采用的是wangEditor,结果当用户在为文本添加样式的时候,发现居然无法直接保存,遂查看后台数据.发现很多样式都被过滤掉了,后台接受的数据中根本没有样式. ...
java pdf 富文本_富文本编辑器保存的html内容使用itextpdf转PDF文件（css提取，内容重叠）问题解决...
html格式处理使用itextpdf的XMLWorkerHelper组件转换过程当中,html格式要求比较多,下面作下格式的简单处理以保证转换成功.css //div格式转换过程当中,有概率会使内容 ...
富文本框让最大四百像素_富文本编辑器 CKeditor 配置使用
http://www.cnblogs.com/tylerdonet/ 本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,如有问题,可以通过以下邮箱 ...
edui 富文本编辑_富文本编辑器wangEditor添加本地上传视频功能
最近做一个考试系统,编辑题目要用到富文本编辑,要求可以添加图片.视频和pdf.此前项目中用的都是wangEditor,使用的时候发现只可以上传本地图片,视频只能添加链接,找了其他插件,也没发现比较好用 ...
（转）学习淘淘商城第二十二课（KindEditor富文本编辑器的使用）
http://blog.csdn.net/u012453843/article/details/70184155 上节课我们一起学习了怎样解决KindEditor富文本编辑器上传图片的浏览器兼容性问题 ...

[Django学习] Django基础(8)_富文本编辑器