diff --git a/README.md b/README.md index 3e8a0a4..a93009b 100644 --- a/README.md +++ b/README.md @@ -144,6 +144,7 @@ easyMDE.value('New input for **EasyMDE**'); - **indentWithTabs**: If set to `false`, indent using spaces instead of tabs. Defaults to `true`. - **initialValue**: If set, will customize the initial value of the editor. - **previewImagesInEditor**: - EasyMDE will show preview of images, `false` by default, preview for images will appear only for images on separate lines. +- **imagesPreviewHandler**: - A custom function for handling the preview of images. Takes the parsed string from the image markdown `![](string)` as argument and returns a string that serves as the `src` attribute of the `` tag in the preview (for ex. as base64). Enables dynamic previewing of images in the frontend without having to upload them to a server. - **insertTexts**: Customize how certain buttons that insert text behave. Takes an array with two elements. The first element will be the text inserted before the cursor or highlight, and the second element will be inserted after. For example, this is the default link value: `["[", "](http://)"]`. - horizontalRule - image diff --git a/src/js/easymde.js b/src/js/easymde.js index 050d05c..468bcb4 100644 --- a/src/js/easymde.js +++ b/src/js/easymde.js @@ -2207,8 +2207,13 @@ EasyMDE.prototype.render = function (el) { if (srcAttr && srcAttr.length >= 2) { var keySrc = srcAttr[1]; + if (options.imagesPreviewHandler) { - keySrc = options.imagesPreviewHandler(keySrc); + var newSrc = options.imagesPreviewHandler(srcAttr[1]); + // defensive check making sure the handler provided by the user returns a string + if (typeof newSrc === 'string') { + keySrc = newSrc; + } } if (!window.EMDEimagesCache[keySrc]) { diff --git a/types/easymde.d.ts b/types/easymde.d.ts index eb75699..3cf165c 100644 --- a/types/easymde.d.ts +++ b/types/easymde.d.ts @@ -195,6 +195,7 @@ declare namespace EasyMDE { placeholder?: string; previewClass?: string | ReadonlyArray; previewImagesInEditor?: boolean; + imagesPreviewHandler?: ((src: string) => string), previewRender?: (markdownPlaintext: string, previewElement: HTMLElement) => string; promptURLs?: boolean; renderingConfig?: RenderingOptions;