django使用ckeditor上传图片

py3study

发布于 2020-01-22 22:14:46

2.4K0

发布于 2020-01-22 22:14:46

文章被收录于专栏：python3python3

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': '1',
                       'fileName': uploaded_file.name}
            return JsonResponse(retdata)

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2019-04-23 ，如有侵权请联系 cloudcommunity@tencent.com 删除

django