diff --git a/README.md b/README.md index 3a7249d..4cbe36f 100644 --- a/README.md +++ b/README.md @@ -156,6 +156,10 @@ easyMDE.value('New input for **EasyMDE**'); - if the request was successfully processed (HTTP 200-OK): `{"data": {"filePath": ""}}` where *filePath* is the relative path of the image; - otherwise: `{"error": ""}`, where *errorCode* can be `noFileGiven` (HTTP 400), `typeNotAllowed` (HTTP 415), `fileTooLarge` (HTTP 413) or `importError` (see *errorMessages* below). If *errorCode* is not one of the *errorMessages*, it is alerted unchanged to the user. This allows for server side error messages. No default value. +- **imageUploadFunction**: A custom function for handling the image upload. Using this function will render the options `imageMaxSize`, `imageAccept`, `imageUploadEndpoint` and `imageCSRFToken` ineffective. + - The function gets the list of files as parameter. + - Calling the exposed `EasyMDE.afterImageUploaded` function with as parameters the editor and the url, will insert the correct markdown in the editor. + - Example: `function (files) { var url = upload(files[0]); EasyMDE.afterImageUploaded(editor, url); }` - **imageCSRFToken**: CSRF token to include with AJAX call to upload image. For instance used with Django backend. - **imageTexts**: Texts displayed to the user (mainly on the status bar) for the import image feature, where `#image_name#`, `#image_size#` and `#image_max_size#` will replaced by their respective values, that can be used for customization or internationalization: - **sbInit**: Status message displayed initially if `uploadImage` is set to `true`. Defaults to `Attach files by drag and dropping or pasting from clipboard.`. diff --git a/src/js/easymde.js b/src/js/easymde.js index 8beb664..7eeeefd 100644 --- a/src/js/easymde.js +++ b/src/js/easymde.js @@ -1640,11 +1640,19 @@ function EasyMDE(options) { this.codemirror.on('drop', function (cm, event) { event.stopPropagation(); event.preventDefault(); - self.uploadImages(event.dataTransfer.files); + if (options.imageUploadFunction) { + options.imageUploadFunction(event.dataTransfer.files); + } else { + self.uploadImages(event.dataTransfer.files); + } }); this.codemirror.on('paste', function (cm, event) { - self.uploadImages(event.clipboardData.files); + if (options.imageUploadFunction) { + options.imageUploadFunction(event.clipboardData.files); + } else { + self.uploadImages(event.clipboardData.files); + } }); } } @@ -2390,6 +2398,7 @@ EasyMDE.redo = redo; EasyMDE.togglePreview = togglePreview; EasyMDE.toggleSideBySide = toggleSideBySide; EasyMDE.toggleFullScreen = toggleFullScreen; +EasyMDE.afterImageUploaded = afterImageUploaded; /** * Bind instance methods for exports. diff --git a/types/easymde-test.ts b/types/easymde-test.ts index 12b0555..fa922ef 100644 --- a/types/easymde-test.ts +++ b/types/easymde-test.ts @@ -1,4 +1,6 @@ // Create new instance +import EasyMDE = require('./easymde'); + const editor = new EasyMDE({ autoDownloadFontAwesome: false, element: document.getElementById('mdEditor')!, @@ -40,7 +42,7 @@ const editor2 = new EasyMDE({ title: 'Bold', }, '|', { // Separator name: 'alert', - action: (editor) => { + action: (editor: EasyMDE) => { alert('This is from a custom button action!'); // Custom functions have access to the `editor` instance. }, @@ -80,6 +82,33 @@ const editorImages = new EasyMDE({ fileTooLarge: 'Image too big', importError: 'Something went oops!', }, + errorCallback: (errorMessage: string) => { + console.error(errorMessage); + }, +}); + +const editorImagesCustom = new EasyMDE({ + uploadImage: true, + imageAccept: 'image/png, image/bmp', + imageCSRFToken: undefined, + imageMaxSize: 10485760, + imageUploadFunction: (files: FileList) => { + console.log(files) + }, + imageTexts: { + sbInit: 'Drag & drop images!', + sbOnDragEnter: 'Let it go, let it go', + sbOnDrop: 'Uploading...', + sbProgress: 'Uploading... (#progress#)', + sbOnUploaded: 'Upload complete!', + sizeUnits: 'b,Kb,Mb' + }, + errorMessages: { + noFileGiven: 'Please select a file', + typeNotAllowed: 'This file type is not allowed!', + fileTooLarge: 'Image too big', + importError: 'Something went oops!', + }, errorCallback: (errorMessage) => { console.error(errorMessage); }, diff --git a/types/easymde.d.ts b/types/easymde.d.ts index 2a7db40..ca8fdab 100644 --- a/types/easymde.d.ts +++ b/types/easymde.d.ts @@ -135,6 +135,7 @@ declare namespace EasyMDE { imageMaxSize?: number; imageAccept?: string; imageUploadEndpoint?: string; + imageUploadFunction?: (files: FileList) => void; imageCSRFToken?: string; imageTexts?: ImageTextsOptions; errorMessages?: ImageErrorTextsOptions;