Netsyms/easy-markdown-editor
2
0
Fork 0
mirror of https://github.com/Ionaru/easy-markdown-editor synced 2025-07-18 23:44:29 -06:00
Code Issues Releases Wiki Activity

Merge pull request #253 from devforth/master

Browse Source 
Bugfixes for preview images in editor
This commit is contained in:
Jeroen Akkerman 2020-11-11 22:57:08 +01:00 committed by GitHub
commit 6209e53c69
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 49 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
View File

@ -136,7 +136,7 @@ easyMDE.value('New input for **EasyMDE**');
- **hideIcons**: An array of icon names to hide. Can be used to hide specific icons shown by default without completely customizing the toolbar.
- **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, `true` by default, use `false` to disable.
- **previewImagesInEditor**: - EasyMDE will show preview of images, `false` by default, preview for images will appear only for images on separate lines.
- **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

2
src/css/easymde.css
View File

@ -374,7 +374,7 @@
display: block;
}
span[data-img-src]::before{
span[data-img-src]::after{
content: '';
background-image: var(--bg-image);
display: block;

78
src/js/easymde.js
View File

@ -2086,41 +2086,61 @@ EasyMDE.prototype.render = function (el) {
});
}
function calcHeight(naturalWidth, naturalHeight) {
var height;
var viewportWidth = window.getComputedStyle(document.querySelector('.CodeMirror-sizer')).width.replace('px', '');
if (naturalWidth < viewportWidth) {
height = naturalHeight + 'px';
} else {
height = (naturalHeight / naturalWidth * 100) + '%';
}
return height;
}
var _vm = this;
function assignImageBlockAttributes(parentEl, img) {
parentEl.setAttribute('data-img-src', img.url);
parentEl.setAttribute('style', '--bg-image:url('+img.url+');--width:'+img.naturalWidth+'px;--height:'+calcHeight(img.naturalWidth, img.naturalHeight));
_vm.codemirror.setSize();
}
function handleImages() {
if (!options.previewImagesInEditor) {
return;
}
function calcHeight(naturalWidth, naturalHeight) {
var height;
var viewportWidth = window.getComputedStyle(document.querySelector('.CodeMirror-sizer')).width.replace('px', '');
if (naturalWidth < viewportWidth) {
height = naturalHeight + 'px';
} else {
height = (naturalHeight / naturalWidth * 100) + '%';
}
return height;
}
easyMDEContainer.querySelectorAll('.cm-formatting-image').forEach(function(e) {
easyMDEContainer.querySelectorAll('.cm-image-marker').forEach(function(e) {
var parentEl = e.parentElement;
if (!parentEl.innerText.match(/^!\[.*?\]\(.*\)/g)) {
// if img pasted on the same line with other text, don't preview, preview only images on separate line
return;
}
if (!parentEl.hasAttribute('data-img-src')) {
var srcAttr = parentEl.innerText.match('\\((.*)\\)'); // might require better parsing according to markdown spec
if (srcAttr && srcAttr.length >= 2) {
var img = document.createElement('img');
img.onload = function() {
parentEl.setAttribute('data-img-src', srcAttr[1]);
parentEl.setAttribute('data-img-width', img.naturalWidth);
parentEl.setAttribute('data-img-height', img.naturalHeight);
parentEl.setAttribute('style', '--bg-image:url('+srcAttr[1]+');--width:'+img.naturalWidth+'px;--height:'+calcHeight(img.naturalWidth, img.naturalHeight));
};
img.src = srcAttr[1];
if (!window.EMDEimagesCache) {
window.EMDEimagesCache = {};
}
if (srcAttr && srcAttr.length >= 2) {
var keySrc = srcAttr[1];
if (! window.EMDEimagesCache[keySrc]) {
var img = document.createElement('img');
img.onload = function() {
window.EMDEimagesCache[keySrc] = {
naturalWidth: img.naturalWidth,
naturalHeight: img.naturalHeight,
url: keySrc,
};
assignImageBlockAttributes(parentEl, window.EMDEimagesCache[keySrc]);
};
img.src = keySrc;
} else {
assignImageBlockAttributes(parentEl, window.EMDEimagesCache[keySrc]);
}
}
} else {
// handle resizes case
var src = parentEl.getAttribute('data-img-src');
var naturalWidth = +parentEl.getAttribute('data-img-width');
var naturalHeight = +parentEl.getAttribute('data-img-height');
parentEl.setAttribute('style', '--bg-image:url('+src+');--width:'+naturalWidth+'px;--height:'+calcHeight(naturalWidth, naturalHeight));
}
});
}
@ -2128,12 +2148,6 @@ EasyMDE.prototype.render = function (el) {
handleImages();
});
this.onWindowResize = function() {
handleImages();
};
window.addEventListener('resize', this.onWindowResize, true);
this.gui.sideBySide = this.createSideBySide();
this._rendered = this.element;