ckeditor - ckeditor 自动在视觉上调整拖放图像的大小

Question

有没有办法在ckeditor4（我使用的是4.7）中自动视觉调整丢弃图像的大小？通常，拖动的图像尺寸太大。没错，它是可以调整大小的，但是用户需要一直到右下角来调整它的大小。我想要的是：一旦图像被丢弃，它会自动调整为 max_width: 600px，并且高度会相应地改变。这可能吗？顺便说一句，我正在使用 django-ckeditor。谢谢。

Answer 1

如果您使用的是增强图像插件，请在https://stackoverflow.com/a/54081025/2073776查看我的建议/答案

Answer 2

事实证明，ckeditor4（可能在 4.7 版之后？）具有默认功能，可以在 Json 响应中获取服务器返回的图像宽度和高度（如在uploadimage plugin.js中）。

                onUploaded: function( upload ) {
                    // Width and height could be returned by server (https://dev.ckeditor.com/ticket/13519).
                    var $img = this.parts.img.$,
                        width = upload.responseData.width || $img.naturalWidth,
                        height = upload.responseData.height || $img.naturalHeight;

但默认情况下，Json 响应仅在此处返回uploaded,filename和url doc。

所以，在 django-ckeditor 中，我不得不修改ImageUploadViewinckeditor_uploader views.py以返回width和height. 我实现这一点的方式有点难看。如果有人有更好的主意，请编辑我的答案。顺便说一句，这种方法适用于丢弃的图像和粘贴的图像。

修改views.py如下：

添加 from PIL import Image到顶部。

修改 ImageUploadView 如下：

class ImageUploadView(generic.View):
    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 = registry.get_backend()

        ck_func_num = request.GET.get('CKEditorFuncNum')
        if ck_func_num:
            ck_func_num = escape(ck_func_num)

        filewrapper = backend(storage, uploaded_file)
        allow_nonimages = getattr(settings, 'CKEDITOR_ALLOW_NONIMAGE_FILES', True)
        # Throws an error when an non-image file are uploaded.
        if not filewrapper.is_image and not allow_nonimages:
            return HttpResponse("""
                <script type='text/javascript'>
                window.parent.CKEDITOR.tools.callFunction({0}, '', 'Invalid file type.');
                </script>""".format(ck_func_num))

        filepath = get_upload_filename(uploaded_file.name, request.user)

        saved_path = filewrapper.save_as(filepath)

        url = utils.get_media_url(saved_path)

######to get width and height of image

        image = Image.open(filewrapper.file_object)
        print(image)

        if image.width > 800:
            factor = 800/image.width
            new_width = int(image.width*factor)
            new_height = int(image.height*factor)

            width = new_width
            height = new_height
        else: 
            width = image.width
            height = image.height

##############
        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:
            _, filename = os.path.split(saved_path)
            retdata = {'url': url, 'uploaded': '1',
                       'fileName': filename,
########## return width and height
                       'width': width, 'height': height} 
            return JsonResponse(retdata)


upload = csrf_exempt(ImageUploadView.as_view())