CKEditor -拖放图像到字幕图像

CKEditor - drag and drop image into captioned image

本文关键字：图像 字幕 拖放 CKEditor      更新时间：2023-09-26

我正在使用CKEditor 4.5的拖放功能，它真的很酷，但是当图像成功上传时，它没有像我想的那样出现。我希望图像直接从增强的图像插件显示为标题图像，而无需双击图像并选择标题图像。

我已经看到这个答案CKEditor 4.5拖放图像上传-如何返回json响应的新维度?但是我想知道我们是否可以在JSon响应中精确地设置一个小部件，这样图像就会像我们想要的那样格式化。

或者，像上面链接的答案一样，我应该覆盖onupload以匹配标题图像的格式吗?

是的，您可以像这样覆盖onUploaded:

editor.on( 'instanceReady', function() {
    editor.widgets.registered.uploadimage.onUploaded = function( upload ) {
        this.replaceWith( '<figure class="image">' +
            '<img src="' + upload.url + '" ' +
            'width="' + this.parts.img.$.naturalWidth + '" ' +
            'height="' + this.parts.img.$.naturalHeight + '">' +
            '<figcaption>Your caption</figcaption>' +
            '</figure>' );
    };
} );

onUploaded with replaceWith只不过是HTML字符串，应该在上传完成后粘贴。因为有太多的方法来覆盖所有的配置选项，最好的方法是替换字符串，以满足您的需要。

如果你想在上传过程中也有一个标题，你也可以覆盖fileToElement方法

相关文章：