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

然后，您可以根据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=';

唯一可能不起作用的部分是notification集成，就我记忆而言，它会监听上传事件。如果您需要通知，则需要手动添加。

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

1 个答案: