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

可能不起作用的唯一部分是通知集成，据我所知，该集成监听上载事件。 如果需要通知，则需要手动添加。