1、在模型类中设置字段为富文本类型,这里需要注意引入的是RichTextUploadingField,以允许上传图片,需要和RichTextField区分开

from ckeditor_uploader.fields import RichTextUploadingField
class spit_model(models.Model):
"""模型类"""
user = models.ForeignKey(User, on_delete=models.CASCADE,verbose_name='吐槽发布者')
content = RichTextUploadingField(verbose_name='吐槽内容', max_length=200)

2、项目中ckeditor的安装及配置

pip install django-ckeditor
INSTALLED_APPS = [
...
  'ckeditor', # 富文本编辑器
  'ckeditor_uploader', # 富文本编辑器上传图片模块
...
]
# 富文本编辑器ckeditor配置
CKEDITOR_CONFIGS = {
'default': {
'toolbar': 'full', # 工具条功能
'height': 300, # 编辑器高度
'width': 300, # 编辑器宽
},
}

 CKEDITOR_UPLOAD_PATH = ''  # 图片ckeditor文件上传路径,这里使用七牛云存储,不填

2、html页面中加入textarea标签

<div>
<textarea id="editor_id"></textarea>
</div>

3、页面中引入控制html页面的JS和ckeditor的JS文件, 在django的installed_app中注册应用时,会自动在虚拟环境中生成应用信息/home/python/.virtualenvs/django_1.11.16_py3/lib/python3.5/site-packages/ckeditor/static/ckeditor/ckeditor/

在js路径前加上域名,否则服务器会在live-server的默认端口下进行网络通讯,查找js
<script type="text/javascript" src="js/spit-submit.js"></script>
<script src="http://127.0.0.1:8000/static/ckeditor/ckeditor/ckeditor.js"></script>

4、在vue变量的mounted方法中加入

let vm = new Vue({
  ...
mounted:function () {
CKEDITOR.replace('editor_id', { filebrowserUploadUrl:'http://127.0.0.1:8000/ckeditor/upload/' }); // 将id选择器的文本域替换成为富文本,并手动设置文件上传的请求路径,默认请求路径为live-server的路径,必须设置为服务器的域名和端口
},
});

5、后端设置总路由,'ckeditor_uploader.urls'中会将接收到的请求进行csrf校验免除,并限制了只有登录用户才可以上传图片,ckeditor默认应用的是django-admin的用户校验方法,django-admin的校验方法不允许跨域请求,我们需要使上传图片的类试图函数继承自django-restframework的APIVIew,

   # url(r'^ckeditor/', include('ckeditor_uploader.urls')),  # 为富文本编辑器添加总路由
# url(r'^ckeditor/upload/', ImageUploadView.as_view()), # 为富文本编辑器添加总路由
# url(r'^ckeditor/upload/', csrf_exempt(ImageUploadView.as_view())), # 为富文本编辑器添加总路由
url(r'^ckeditor/', csrf_exempt(ImageUploadView.as_view())), # 为富文本编辑器添加总路由

6、在应用中改写路由和类视图,使用permission_classes对请求权限进行限制

# 配置路由
urlpatterns = [
url(r'^upload/$', ImageUploadView.as_view()),
] from ckeditor_uploader import image_processing,utils
from django.conf import settings
from django.http import HttpResponse
from django.http import JsonResponse
from rest_framework.permissions import IsAuthenticated
from rest_framework.views import APIView
from django.utils.html import escape class ImageUploadView(APIView):
permission_classes = [IsAuthenticated]
http_method_names = ['post'] def post(self, request, **kwargs):
"""
Uploads a file and send back its URL to CKEditor.
"""
uploaded_file = request.FILES['upload'] backend = image_processing.get_backend() ck_func_num = request.GET.get('CKEditorFuncNum')
if ck_func_num:
ck_func_num = escape(ck_func_num) # Throws an error when an non-image file are uploaded.
if not getattr(settings, 'CKEDITOR_ALLOW_NONIMAGE_FILES', True):
try:
backend.image_verify(uploaded_file)
except utils.NotAnImageException:
return HttpResponse("""
<script type='text/javascript'>
window.parent.CKEDITOR.tools.callFunction({0}, '', 'Invalid file type.');
</script>""".format(ck_func_num)) saved_path = self._save_file(request, uploaded_file)
if len(str(saved_path).split('.')) > 1:
if(str(saved_path).split('.')[1].lower() != 'gif'):
self._create_thumbnail_if_needed(backend, saved_path)
url = utils.get_media_url(saved_path) if ck_func_num:
# Respond with Javascript sending ckeditor upload url.
return HttpResponse("""
<script type='text/javascript'>
window.parent.CKEDITOR.tools.callFunction({0}, '{1}');
</script>""".format(ck_func_num, url))
else:
retdata = {'url': url, 'uploaded': '',
'fileName': uploaded_file.name}
return JsonResponse(retdata)

django使用ckeditor上传图片的更多相关文章

  1. Ckeditor上传图片返回的JS直接显示出来,未执行!!!

    Ckeditor上传图片网上有很多教程. 下面是我今天下午遇到的一个坑...自己挖的坑. 在conotroller里 我开始习惯性的 response.setContentType("app ...

  2. 去除ckeditor上传图片预览中的英文字母

    去除ckeditor上传图片预览中的英文字母 CKEDITOR.replace('text', { filebrowserImageUploadUrl : 'upload_img.do', langu ...

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

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

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

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

  5. 如何去除 ckeditor 上传图片后在原码中留下的 style="width: 100%;height:100px"之类的代码呢?

    ckeditor编辑器在上传图片的时候,会神奇的加上一段诡异的代码: 这导致上传的小图也是被拉伸到100%,我根本就没有定义它,找来找去也找不到element.style,原来这是在system.cs ...

  6. ckeditor上传图片的注意点

    1.要在 ckeditor的  config.js 文件中加上 CKEDITOR.editorConfig = function( config ) { config.filebrowserImage ...

  7. Django添加ckeditor富文本编辑器

    源码 https://github.com/django-ckeditor/django-ckeditor 通过pip安装. pip3 install django-ckeditor pip3 ins ...

  8. 记一次ckeditor上传图片到服务器问题

    package com.util;import java.io.IOException; import java.io.PrintWriter; import java.util.List;impor ...

  9. 使用 CKEditor 上传图片, 粘贴屏幕截图

    之前写过wangEditor,那真是好用,文档也清晰,半天就搞定了,无奈没有对应license,只好选择别的. 外语一般,阅读理解都靠蒙.CKEditor官方文档看的我云里雾里,国内的博客比较少,经过 ...

随机推荐

  1. UVa-156 Ananagrams(map映射)

    #include <iostream> #include <algorithm> #include <cmath> #include <cstdio> ...

  2. Java语法基础学习DayTwentyOne(网络编程)

    一.IP地址和端口号 1.作用 通过IP地址,唯一的定位互联网上一台主机. 端口号标识正在计算机上运行的进程,不同进程有不同的端口号,被规定为一个16位的整数0~65535,其中0~1023被预先定义 ...

  3. selenium的三种等待方式

    selenium有三种等待方式 1.time.sleep() 设置等待最简单的方法就是强制等待,但一般不建议使用,可以在调试的时候进行使用 2.隐性等待 driver.implictily_wait( ...

  4. MNIST机器学习进阶

    # -*- coding: utf-8 -*-"""Created on Wed Oct 17 08:49:28 2018 @author: Administrator& ...

  5. 简单透析cookies,sessionStorage和localStorage

    首先大致说一下 1.sessionStorage是会话层的一种存储方式,当会话关闭或者退出,sessionStorage就会被清除,有效期较短 2.localStorage是浏览器提供的本地存储方式, ...

  6. Angular 2/4/5+ 重复点击菜单刷新界面

    记一下,网上没找到方法 自己搞了好久  通过跳转到别的界面在跳回来的方式进行实现             //再次点击刷新界面       if (this.router.url == item.ur ...

  7. excel2013 打开为灰色空白 左下角显示就绪 要把文件拖进去才能打开!

    最近电脑excel2013 打开总是为灰色空白 左下角显示就绪 要把文件拖进去或者在此再打开一个才能打开! 在网上搜了一下,我是使用下面这个方法解决的: 步骤一:请您在“开始”菜单的搜索框中输入“re ...

  8. 在Linux系统上安装Oracle数据库

    前期准备:我用的是虚拟机上的CentOS 64位系统.所以需要设置网卡,时间,EPEL源,安装一些必备的软件. 1.1在虚拟机上安装好Linux系统后选择虚拟机设置—>网络适配器—>网络连 ...

  9. Sublime Text 3利用Snippet创建Getter和Setter

    1. Tools -> Developer -> New Snippet. 2. 复制以下内容并保存: <snippet> <content><![CDATA ...

  10. 运维脚本while语法

    循环的意思就是让程序重复地执行某些语句; whiler循环就是循环结构的一种,当事先不知道循环该执行多少次,就要用到while循环; while循环语句的运行过程 使用while循环语句时,可以根据特 ...