我正在使用上传图片插件来实现“拖放以插入图片”功能。当我将图像放入编辑区域时,图像会上传到服务器,然后使用返回的 url 显示预览。
但我需要在不上传到服务器的情况下在编辑区显示图像预览。当我点击自定义提交按钮时,我想将包括图像在内的全部内容保存到服务器。
如果有人对此做过/有任何想法,请告诉我。
提前致谢。
湿婆
最佳答案
这很简单。 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据我所知,集成监听上传事件。如果您需要通知,则需要手动添加。
关于javascript - CKEditor - 无需上传到服务器的图像预览,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36678997/