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

【问题标题】：ckeditor automatically visually resize dropped imageckeditor 自动在视觉上调整拖放图像的大小
【发布时间】：2020-03-16 11:50:24
【问题描述】：

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

【问题讨论】：

标签： ckeditor ckeditor4.x django-ckeditor

【解决方案1】：

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

【讨论】：

您在链接帖子中的解决方案是使用文件浏览器上传图片（点击图片图标，然后上传）。谢谢！我在这里问的是拖放图像。这似乎使用了不同的上传方法link andouse Json 响应。知道如何进行吗？

【解决方案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 here。

因此，在 django-ckeditor 中，我必须修改 ckeditor_uploader views.py 中的 ImageUploadView 以返回 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())

【讨论】：