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

Question

我正在使用Upload Image插件來實現“拖放以插入圖像”功能。 當我將圖像放入編輯區域時，圖像將被上傳到服務器，然后使用返回的URL顯示預覽。

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

請讓我知道是否有人對此做過/任何想法。

提前致謝。

濕婆

Answer 1

那很簡單。 UploadWidget是從拖放的圖像創建內容的助手： http : UploadWidget

有一個可以load的定義屬性loadMethod正是您需要的選項： http : loadMethod

然后，您可以覆蓋上傳圖像的小部件或創建自己的小部件的基礎上， fileReader從例子UploadWidget 。

該代碼應如下所示：

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=';

可能不起作用的唯一部分是通知集成，據我所知，該集成監聽上載事件。 如果需要通知，則需要手動添加。