CKEditor - 将图像拖放到标题图像中
CKEditor - drag and drop image into captioned image
我正在使用 CKEditor 4.5 的拖放功能,它真的很酷,但是当图像成功上传时,它并没有像我想要的那样出现。
我希望图像直接显示为来自增强图像插件的标题图像,而不必双击图像和 select 标题图像。
我看过这个答案,但我想知道我们是否可以在 JSon 响应中精确设置一个小部件,以便按我们想要的格式设置图像格式。
或者,就像上面链接的答案一样,我是否应该覆盖 onUploaded 以匹配标题图片的格式?
是的,你可以这样覆盖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
和 replaceWith
只不过是上传完成后应该粘贴的 HTML 字符串。因为有太多方法可以用配置选项覆盖所有这些,所以最好的方法是替换该字符串以满足您的需要。
如果你也想在上传过程中有一个标题,你也可以覆盖fileToElement
方法。
我正在使用 CKEditor 4.5 的拖放功能,它真的很酷,但是当图像成功上传时,它并没有像我想要的那样出现。 我希望图像直接显示为来自增强图像插件的标题图像,而不必双击图像和 select 标题图像。
我看过这个答案
或者,就像上面链接的答案一样,我是否应该覆盖 onUploaded 以匹配标题图片的格式?
是的,你可以这样覆盖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
和 replaceWith
只不过是上传完成后应该粘贴的 HTML 字符串。因为有太多方法可以用配置选项覆盖所有这些,所以最好的方法是替换该字符串以满足您的需要。
如果你也想在上传过程中有一个标题,你也可以覆盖fileToElement
方法。