CKEditor - 無需上傳到服務器的圖像預覽

Question

我使用上傳圖像插件來實現「拖放插入圖像」功能。當我將圖像拖放到編輯區域時，圖像被上傳到服務器，然後使用返回的URL顯示預覽。

但我需要在編輯區域顯示圖像預覽，而無需上傳到服務器。當我點擊自定義提交按鈕時，我想將包括圖像在內的全部內容保存到服務器。

請讓我知道，如果有人已經做過/有任何想法。

在此先感謝。

Siva

Answer 1

這很簡單。 UploadWidget是從下降的圖像創建內容的幫手：http://docs.ckeditor.com/#!/api/CKEDITOR.fileTools-method-addUploadWidget

有定義屬性loadMethod可以是load - 這正是選擇您需要： http://docs.ckeditor.com/#!/api/CKEDITOR.fileTools.uploadWidgetDefinition-property-loadMethod

然後，您可以覆蓋上傳圖像小工具或者根據UploadWidget的fileReader示例創建您自己的小部件。

代碼應該是這樣的：

CKEDITOR.fileTools.addUploadWidget(editor, 'imageReader', { 
    loadMethod: 'load', 
    supportedTypes: /image\/(jpeg|png|gif|bmp)/, 

    fileToElement: function(file) { 
     var img = new CKEDITOR.dom.element('img'); 
     img.setAttribute('src', loadingImage); 
     return img; 
    }, 

    onLoaded: function(loader) { 
     this.replaceWith('<img src="' + loader.data + '" '>'); 
    } 
}); 

// Black rectangle which is shown before the image is loaded. 
var loadingImage = 'data:image/gif;base64,R0lGODlhDgAOAIAAAAAAAP///yH5BAAAAAAALAAAAAAOAA4AAAIMhI+py+0Po5y02qsKADs='; 

只有一部分可能無法正常工作是notification整合是據我記得上傳事件監聽。如果您需要通知，則需要手動添加它們。