ckeditor 4.4 响应式图像上传与旧图像插件和自定义文件管理器添加 srcset， size 属性

Question

我有ckeditor 4.4，旧图像插件(不是Image2(，并且我正在使用自定义filamanager上传文件。

如何将响应式图像添加到 ckeditor。 我的意思是，我必须自动将大小和 srcset 属性添加到 img 标签。

图像预览也应该有效。

Answer 1

1(在Ckeditor配置中.js处理onOk和onShow事件

CKEDITOR.on('dialogDefinition', function (ev) {
var dialogDefinition = ev.data.definition;
var editor = ev.editor;
var sizes = '(min-width: 36em) 33.3vw, 100vw';
//Check if its image dialog only
if (ev.data.name == 'image') {
//whenever image dialog is shown, show srcset urls in it (if a image has) and disable unnecessory styling fields
dialogDefinition.dialog.on('show', function(e){
var imgElement = editor.getSelection().getStartElement();
var dialogBox = e.sender;
var srcOrSrcset = '';
if ((srcOrSrcset = imgElement.getAttribute('srcset'))) {
//This line is very important to handle show event, because there is no originalElement in dialogBox
//Other wise it will throw `called setCustomData on null` from original Image.js @ line 306 plugin
//https://github.com/ckeditor/ckeditor-dev/blob/master/plugins/image/dialogs/image.js
dialogBox.originalElement = imgElement;
dialogBox.originalElement.data('cke-saved-src', srcOrSrcset);
//disable content elements, because no use of inline style in case of responsive image
dialogBox.getContentElement('info','txtHeight').disable();
dialogBox.getContentElement('info','txtWidth').disable();
dialogBox.getContentElement('info','txtBorder').disable();
dialogBox.getContentElement('info','txtHSpace').disable();
dialogBox.getContentElement('info','txtVSpace').disable();
dialogBox.getContentElement('info','cmbAlign').disable();
//dialog.preview is not exists yet, so delaying execution. meanwhile original image.js show handler will attach preview dialogBox
window.setTimeout(function () {
dialogBox.preview.setAttribute('srcset', srcOrSrcset);
}, 0);
}
});
//on click of ok button of image dialog, add srcset attribute to the selected img
//srcset should be in specific format i.e. img1.jpg, img2.jpg, img3.jpg
//images should be seperated by comma followed by space (, )
//default src will be first url of srcset
dialogDefinition.onOk = function (e) {
var dialogBox = e.sender;
var imgUrl = dialogBox.getContentElement('info','txtUrl').getValue();
var altTxt = dialogBox.getContentElement('info','txtAlt').getValue();
var imgHtml = '';
var indexOfFirstUrlEnd;
//If entered url is like srcset
if((indexOfFirstUrlEnd = imgUrl.indexOf(', ')) > -1) {
imgHtml = '<img src="' + imgUrl.substr(0, indexOfFirstUrlEnd) + '"' +
'srcset="' + imgUrl + '"' +
'alt="' + altTxt + '"' +
'sizes="' + sizes + '"/>';
} else {
//if its normal src url
var style = dialogBox.getContentElement('advanced','txtdlgGenStyle').getValue();
imgHtml = '<img src="' + imgUrl + '" alt="' + altTxt + '" style="' + style + '" />';
}
editor.insertElement(CKEDITOR.dom.element.createFromHtml(imgHtml));
};
}
});

2(在我的自定义文件管理器中.js我有

var imageSrcOrSrcset = '';
if(urls.length > 1) {
for (var key in urls) {
imageSrcOrSrcset += ', ' + urls[key];
}
dialog.getContentElement('info','txtHeight').disable();
dialog.getContentElement('info','txtWidth').disable();
dialog.getContentElement('info','txtBorder').disable();
dialog.getContentElement('info','txtHSpace').disable();
dialog.getContentElement('info','txtVSpace').disable();
dialog.getContentElement('info','cmbAlign').disable();
} else {
imageSrcOrSrcset = urls['0'];
dialog.getContentElement('info','txtHeight').enable();
dialog.getContentElement('info','txtWidth').enable();
dialog.getContentElement('info','txtBorder').enable();
dialog.getContentElement('info','txtHSpace').enable();
dialog.getContentElement('info','txtVSpace').enable();
dialog.getContentElement('info','cmbAlign').enable();
}

//pass url/urls to image properties dialog
window.opener.CKEDITOR.tools.callFunction(params.CKEditorFuncNum, imageSrcOrSrcset);
//set preview in case of srcset (multiple urls)
if(urls.length > 1) {
window.opener.CKEDITOR.dialog.getCurrent().preview.setAttribute('srcset', imageSrcset);
}
window.close();