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. javascript20150124

    表达式与运算符 表达式 与数学中的定义相似,表达式是指具有一定的值的.用运算符把常数和变量连接起来的代数式.一个表达式可以只包含一个常数或一个变量.运算符可以是四则运算符.关系运算符.位运算符.逻辑运 ...

  2. MySQL中MyISAM与InnoDB区别

    原文:https://blog.csdn.net/frycn/article/details/70158313?utm_source=copy InnoDB:支持事务处理等不加锁读取支持外键支持行锁不 ...

  3. java 的序列化与反序列化

    前言: 一直很不理解java的序列化的概念,为什么java对象的序列化要实现 Serializable的接口?或者要实现Externalizable的接口?而且Externalizable 的父类还是 ...

  4. Codeforces Round #479 (Div. 3) F. Consecutive Subsequence (简单dp)

    题目:https://codeforces.com/problemset/problem/977/F 题意:一个序列,求最长单调递增子序列,但是有一个要求是中间差值都是1 思路:dp,O(n)复杂度, ...

  5. Docker环境下的Mysql8 实现主从数据库数据同步方案

    本文记录下通过MySQL Replication在Docker环境下,通过多个容器 实现数据库主从配置. MySQL Replication就不多解释了,简单说就是MySQL非常出色的一个功能,该功能 ...

  6. Shell 有类型变量

    1.通过 declare 和 typeset 命令 declare 和 typeset 两者等价 declare 和 typeset 都是用来定义变量类型的 下面以 declare 进行总结 2.de ...

  7. mysql知识点拾遗梳理

    mysql卸载重装过程: sudo apache2ctl stop sudo apt-get --purge remove mysql-client mysql-server mysql-common ...

  8. git和github的第一次接触

    我的github的helloworld链接: https://github.com/xuziqian111/hello-world/blob/master/helloworld.java 我的gith ...

  9. 使用lua读文件并输出到stdin

    io.input("c:\\AudioCom.log") t= io.read("*all") io.write(t) 三行代码搞定,简洁的不像话 io.rea ...

  10. 1--Test NG--常见测试和注解

    第一:注解 (1)@test (2)@BeforeMethod,@AfterMethod (3)@BeforeClass,@AfterClass (4)@BeforeSuite,@AfterSuite ...