CKEditor - サーバーにアップロードしないで画像プレビュー

Question

"画像を挿入するためのドラッグドロップ"を実装するために、画像をアップロードするプラグインを使用しています。イメージを編集エリアにドロップすると、イメージがサーバーにアップロードされ、返されたURLを使用してプレビューが表示されます。

しかし、私はサーバーにアップロードせずに編集領域に画像のプレビューを表示する必要があります。カスタム送信ボタンをクリックすると、イメージを含むコンテンツ全体をサーバーに保存します。

誰かがこれについて何かやっていれば教えてください。

ありがとうございます。

シバ

Answer 1

これはかなり簡単です。 http://docs.ckeditor.com/#!/api/CKEDITOR.fileTools.uploadWidgetDefinition-property-loadMethod

次に、あなたがアップロード画像ウィジェットを上書きすることができます - あなたが必要とする正確にオプションであるhttp://docs.ckeditor.com/#!/api/CKEDITOR.fileTools-method-addUploadWidget

はloadすることができ、定義プロパティloadMethodあり：UploadWidgetが低下した画像から、コンテンツを作成するためのヘルパーですまたは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統合です。通知が必要な場合は、手動で追加する必要があります。