Django-使用富文本编辑器
title: Django-使用富文本编辑器
copyright: true
top: 0
date: 2019-07-14 19:57:15
tags:
categories: WEB 后端框架
permalink:
password:
keywords: Ckeditor
description: Django中使用CKeditor编辑器。
有些人认识了很久，也未必很熟，有些人看到对方的第一眼，就会觉得很亲近。
使用富文本编辑器Ckeditor
网站开发过程中，文本编辑器直接调用第三方的编辑器会省下很多事情，并且相对来说比较安全。
常见的编辑器有ewebeditor，fckeditor，ueditor等等，这里使用ckeditor编辑器
安装过程
使用命令即可完成安装：
pip3 install django-ckeditor
然后添加到配置文件
修改
LANGUAGE_CODE = 'zh-hans'
到这里ckeditor就安装配置完毕，但是是没法使用图片上传功能的，这个时候需要另行安装图片处理库pillow
pip3 install pillow
在settings文件中的INSTALLED_APPS中添加注册
INSTALLED_APPS = [# ...'ckeditor','ckeditor_uploader',
]
使用上传功能，需要设置上传位置。该文件是上传到media目录，所以也需要设置media。打开settings.py添加如下设置：
MEDIA_URL = '/media/'
# 放在django项目根目录，同时也需要创建media文件夹
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')CKEDITOR_UPLOAD_PATH = 'upload/'CKEDITOR_IMAGE_BACKEND = 'pillow'
使用linux的话，需要在根目录下执行下面两行命令
mkdir media
cd media
mkdir upload
chomd 777 midia
即在根目录下创建一个media的文件夹，然后在media文件夹下面创建一个upload的文件夹
如上完成：
- 设置 MEDIA_ROOT 和 MEDIA_URL，CKEDITOR_UPLOAD_PATH = ‘upload/’，图片将上传到项目下的media/upload路径下，图片的url是 /media/upload/
- 设置CKEDITOR_IMAGE_BACKEND = ‘pillow’, 用于生成图片缩略图，在编辑器里浏览上传的图片
配置上传url和media的访问
上传功能需要有地址可以请求，需要需要提供上传的url。打开全局的urls.py，添加设置到urlpatterns中：
path('ckeditor/', include('ckeditor_uploader.urls')),
另外，上传的图片是到media中，不是在static中。我们还需要设置media可被访问，如下设置可用于开发中使用，若部署到服务器可用服务器软件设置,继续在urls.py中添加如下内容：
from django.conf import settings
from django.conf.urls.static import staticurlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
如果使用nginx来配置静态资源，在nginx的配置文件里
location /media {alias /path-to/media;}
注意:在linux开发环境中，启动django的时候，需要加上sudo
使用过程
在需要用到编辑器的地方，比如自带的后台管理系统，以及自己在前端页面需要写文章的部分。使用django的models和forms两个自带的模型层和表单层进行修改即可使用富文本编辑器。
模型层
比如我之前的Mdoels是这样的
class Datas(models.Model):contet = models.TextField()
如果需要使用富文本编辑器，则需要进行如下修改
from ckeditor_uploader.fields import RichTextUploadingFieldclass Datas(models.Model):content = RichTextUploadingField(verbose_name='正文')
这样的话，在编辑content的部分就可以直接使用ckeditor编辑器，并且具有上传图片功能。
如果不想添加使用上传图片功能，使用下面的类即可
from ckeditor.fields import RichTextField
class Datas(models.Model):content = RichTextField()
这样就不能上传图片文件，只能引用远程图片
表单层
首先需要把settings文件进行如下更改设置
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(os.path.join(BASE_DIR, '/static/'))STATICFILES_DIRS = (os.path.join(os.path.join(BASE_DIR, 'static')),
)MEDIA_URL = '/media/'
# 放在django项目根目录，同时也需要创建media文件夹
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')CKEDITOR_UPLOAD_PATH = 'upload/'
然后执行命令
python3 manage.py collectstatic
接下就可以编写表单文件
from ckeditor.fields import RichTextFieldclass Comment(forms.Form):comment = RichTextField()from .forms import Comment
def index(request):return render(request,'comment.html',{'comment':Comment()})
然后每次调用ckeditor之前，都需要先引用编辑器所需要的文件，使用{{ form.media }}调入ckeditor静态文件(js, css和图片),最后在comment.html中编写如下
<form>COMMENT:{{ comment.media}}{{ comment|safe }}
</form>
还可以这么写
<form>COMMENT:{% load static %}
<script src="{% static 'ckeditor/ckeditor/ckeditor.js' %}"></script><textarea name="editor1"></textarea><script>CKEDITOR.replace( 'editor1' , {uiColor: '#9AB8F3'});</script></form>
如果嫌麻烦的话，或者不想写forms表单的内容熟悉，可以直接在前段远程调用ckeditor编辑器
<form>COMMENT:<script src="//cdn.ckeditor.com/4.5.9/standard/ckeditor.js"></script><textarea name="editor1"></textarea><script>CKEDITOR.replace( 'editor1' , {uiColor: '#9AB8F3'});</script></form>
配置文件
CKEDITOR_ALLOW_NONIMAGE_FILES = False 不允许非图片文件上传，默认为True
CKEDITOR_BROWSE_SHOW_DIRS = True 在编辑器里浏览上传的图片时，图片会以路径分组，日期排序
CKEDITOR_RESTRICT_BY_USER = True 限制用户浏览图片的权限，只能浏览自己上传的图片，图片会传到以用户名命名的文件夹下，超级管理员依旧可以看所有图片修改staff_member_required装饰器变为login_required。
这一点是在admin内和admin外使用ckeditor最的不同。如果需要使用文件上传，ckeditor默认只有员工(staff member)才有这个权限。如果你需要admin外的用户也能上传图片或文件，你需要将staff_member_required装饰器改为login_required。
你需要按site-packages - > ckeditor_uploader -> templates -> urls.py的源码，把staff_member_required装饰器改为login_required。
if django.VERSION >= (1, 8):urlpatterns = [url(r'^upload/', login_required(views.upload), name='ckeditor_upload'),url(r'^browse/', never_cache(login_required(views.browse)), name='ckeditor_browse'),]
欢迎关注公众号：【安全研发】获取更多相关工具，课程，资料分享哦~
Django-使用富文本编辑器相关推荐
- Django 3.2.5博客开发教程:使用富文本编辑器添加数据
在Django admin后台添加数据的时候,文章内容文本框想发布一篇图文并茂的文章需就得手写Html代码,这十分吃力,也没法上传图片和文件.这显然不是我等高大上程序猿想要的. 为提升效率,我们可以使 ...
- Django实现的博客系统中使用富文本编辑器ckeditor
操作系统为OS X 10.9.2,Django为1.6.5. 1.下载和安装 1.1 安装 ckeditor 下载地址 https://github.com/shaunsephton/django-c ...
- Django中使用富文本编辑器Uedit
Uedit是百度一款非常好用的富文本编辑器 一.安装及基本配置 官方GitHub(有详细的安装使用教程):https://github.com/zhangfisher/DjangoUeditor 1. ...
- vue获取编辑器纯文字_vue中使用富文本编辑器
前端使用富文本编辑器的插件有很多,今天献上wangeditor的使用教程,教你如何在vue中使用富文本编辑器 wangeditor是一个萌新富文本编辑器,基于js和css,重点在于它轻量,如果你需要的 ...
- CSDN使用富文本编辑器为所发布的文章生成右侧目录
如果我们想为我们的文章生成相应的目录,在不使用MD编辑器的情况下,我们使用富文本编辑器也是可以为我们的文章生成目录(特别提醒:最少需设置4个标题这样才能看出效果).我们可以假设需要发布的文章已经编辑好 ...
- 微信小程序-后台使用富文本编辑器返回数据，小程序编译富文本编辑器返回的数据
最近遇到一个功能,后台管理系统添加商品的时候,商品详情是使用富文本编辑器添加的.小程序获取的商品详情数据是含有<p>标签的. 后台管理系统 百度了多种方法,也试用了很多方法,最终觉得wxP ...
- 小程序使用富文本编辑器以及使用wxParse解析html结构
小程序使用富文本编辑器以及使用wxParse解析html结构 13小程序发布文章功能(富文本编辑器的使用和解析html结构数据的wxParse)
- 学习日志day46（2021-09-10）（1、使用富文本编辑器simditor）
学习内容:学习JavaWeb(Day46) 1.使用富文本编辑器simditor 1.使用富文本编辑器simditor (1)常见的富文本编辑器有simditor.CKEditor.tinymce.k ...
- 杨老师教你学会使用富文本编辑器KindEditor之添加页面设计
2018-12-06 进行整理本篇文章,主要是解决如何引入富文本编辑器的使用 2019-06-18 进行了二次完善,解决了富文本编辑器的图片上传和附件上传问题 本篇文章进行二次更新操作,完善了上传图片 ...
- 使用富文本编辑器wangEditor完成图片文件的上传
项目中一些特定的功能可能需要在页面中用到富文本编辑器来实现文件的输入上传等等,在这里用wangEditor来实现使用富文本编辑器进行文件图面的输入和上传保存,这里wangEditor也可以参考wang ...
最新文章
- php smarty继承,PHP Smarty 模板 模板继承 {extends}
- 使用meta来刷新网页效果
- NYOJ-111分数加减法
- flash百叶窗消失_Flash遮罩特效实例之百叶窗效果
- SharePoint下载服务器资源
- 以“数”防疫，快速实施，两周落地，天翎疫情管理系统
- 多个数求最小公倍数详解！
- 分机号 —— 蓝桥杯
- python驾到~障碍通通闪开，美女批量入内存~
- CC26xx([CortexM3)的Power Reset and Clock
- WinRAR 3.93 3.92 的注册码（已经测试）
- php开发rfid,rfid是什么？rfid技术详解
- PADS导出Gerber
- 艾永亮超级产品：企业家该如何培养自己的用户思维
- 中国举办的世界园艺博览会概览-web数据可视化(d3.js path)
- 李永乐复习全书高等数学 第五章 多元函数微分学
- 高层论坛︱王家耀院士：“互联网+”时空大数据与智慧城市（1）
- Android'图表MPAndroidchart 的BarChart
- 文本处理三剑客之 sed 流编辑器（基础部分）
- go中gomodule的使用