javascript - CKEditor - 无需上传到服务器的图像预览

Question

我正在使用上传图片插件来实现“拖放以插入图片”功能。当我将图像放入编辑区域时，图像会上传到服务器，然后使用返回的 url 显示预览。

但我需要在不上传到服务器的情况下在编辑区显示图像预览。当我点击自定义提交按钮时，我想将包括图像在内的全部内容保存到服务器。

如果有人对此做过/有任何想法，请告诉我。

提前致谢。

湿婆

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据我所知，集成监听上传事件。如果您需要通知，则需要手动添加。