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

Question

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

Answer 1

如果您使用 Enhanced Image plugin, checkout my suggestion/answer at

Answer 2

事实证明，ckeditor4（可能在 4.7 版之后？）具有默认功能，可以在 Json 响应中获取服务器-returned 图像宽度和高度（如 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 仅响应 returns uploaded、filename 和 url doc here。

所以，在django-ckeditor中，我不得不将ckeditor_uploader views.py中的ImageUploadView修改为returnwidth和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())

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

ckeditor automatically visually resize dropped image

ckeditor

django-ckeditor

ckeditor4.x