EasyMDE: A simple, beautiful, and embeddable JavaScript Markdown editor. Delightful editing for beginners and experts alike. Features built-in autosaving and spell checking.
Home Page: https://stackblitz.com/edit/easymde
License: MIT License
I'm an ambitious full-stack developer and Scrum Master from the Netherlands that specialises in frontend, however I do not shy away from non-web programming.
Timezone: Europe/Amsterdam
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
Hey Guys,
I'm having issue with easy-markdown implementation for responsive version of the editor on mobile, So after adding some text if you move around the the texts it starts blinking on a word and make it impossible to move around any further.
Steps:
Please if anyone can guide me on this.
Browser type and version:
EasyMDE version: 4
Im curios how i can set the editor to render in preview mode? I only want the editor to be editable when the admin is using it, other users should only see the preview
After adding
inputStyle: "contenteditable",
spellcheck: trueto the CodeMirror initialisation at https://github.com/Ionaru/easy-markdown-editor/blob/master/src/js/easymde.js#L1584, I was able to get spellchecking within the browser (at least Google Chrome) functional without any apparent issues. If we could pass these options (or arbitrary options that just had defaults) to the CodeMirror initialisation, that would be awesome.
PS. Thanks so much for this fork of simplemde. It powers our internal CMS and our staff love using it.
When doing a block quote, i hit enter twice, I expect the last one to disappear i.e.
> fubar
>
qqeqweqw
You end up with a stray >
Lists work fine, just blockquote
https://jsfiddle.net/vo1g3kue/
Browser type and version: IE 11.471.17134.0
EasyMDE version: any?
is it possible to add left, center, and right alignment ?
I would like to redefine some actions. The only way I found to do this is to use the toolbar option, but this one overwrite all default items, so I need to set all default icons and create a new icon with the same values instead the custom action, like this:
toolbar: [
'bold', 'italic', 'heading', '|', 'quote', 'unordered-list', 'ordered-list', '|', 'link',
{
name: 'image',
action: function customFunction(editor){
alert('Hey!')
},
className: 'fa fa-image',
title: 'Insert image'
},
'|', 'preview', 'side-by-side', 'fullscreen', 'guide'
]Is there an easier way to do this?
If not, I would suggest a toolbarAction option, which could work like this:
new EasyMDE({
toolbarAction: {
image: function customFunction(editor){
alert('Hey!')
},
}
});I don't find how is that useful to commit the dist folder, since it's generated with gulp.
Some drawbacks:
gulp;I'm looking the way to highlight some text in the editor, for example when I write ???category I want to apply some CSS style to that part of the text, it's possible ?
Thank you!
EDIT:
Here some code for what I want to do, for example if I write &Hello the text parsed and styled to
<span class="cm-formatting cm-my-style1">&</span>
<span class="cm-my-style2">Hello</span>
When passing custom toolbar icons, the no-disable class previously used in SimpleMDE is not respected.
Check this JSFiddle: https://jsfiddle.net/myv5wgh0/.
Due to a change in early v2 (7b147b3#diff-510834ebe67771ad1adc3336cb7fd314R16116), element.classList is now used instead of the element.className previously in use which results in a loss of classnames.
Also, the changes in v2 resulted in changes in the shape of the toolbar objects, which makes it a breaking change with SimpleMDE (need to add the noDisableproperty in EasyMDE).
So, no big bad breaking change, but I think it's worth mentioning it.
I found this "bug" because in a project of ours we use a different set of toolbar icons (material) and we needed to customize the actions.
EasyMDE version: >2.0.0
Hi, it's a copy of the original issue :
sparksuite/simplemde-markdown-editor#663
All is in the title !
Seems all these icons are using fa-header which doesn't exist in FontAwesome.
Should they also have fa-heading?
Displaying those buttons by default will result in the FontAwesome 'missing icon question mark' displaying instead.
On a similar note, the "H1, H2, H3" is currently added using css :after, but FontAwesome 5 has inbuilt support for fa-h1, etc, which looks cleaner.
It would be great to have another type of list (in addition to generic and numbered) that starts each line with - [ ] for easy building of to-do lists and other such things.
Does EME support PlantUML or DITA (or how to add support)?
When setting the value to a markdown string that includes newline characters the entire string is displaying as one line when using myEditor.value('myMarkdownString').
Either I'm doing it wrong or it's not parsing the newlines correctly. Any help appreciated
EasyMDE version: 2.5.1
It would be great to have a mode, like preview - but with editing.
Some of my users are non-technical, so I could show them a version of the editor that doesn't have the markdown available.
is codemirror-spell-checker really necessary?
it brings in lots of other dependencies i don't want/need (it seems to only be english wish my website don't use).
I think it should be an optional dependency. Also, isn't possible to use the native spell checker somehow?
(related: cfinke/Typo.js#68, cross-js#dont-use-buffer)
or
or
EasyMDE version: 2.5.1
Ä = \u00c4
Ö = \u00d6
Ü = \u00dc
ä = u00e4
ö = \u00f6
ü = \u00fc
ß = \u00df
We would like to give our users the ability to upload images and files, and I think that GitHub has solved this really nice. In order to implement this, I would love it if there was some way to register hooks for when a file is dropped onto the editor.
To be clear, I would not like the editor to do anything regarding the actual uploading of the files. Just a hook that calls my own function when a file has been dropped.
My own code could then upload the file, and insert the correct markdown syntax for it to be displayed
I'd be happy to help contribute code for this, please let me know what you think!
User a Android device and start typing. Each character is on a new line
Browser type and version: Chrome, Firefox on Android
EasyMDE version: 2.1.0
The current autosave feature periodically stores contents to the local storage. It would be great if a function for autosave can be passed to option so that the autosave handler may be overridden for feature like server-side autosave,
I'm submitting a... Bug report..
I am using it as a replacement for simplemde.
Browser type and version: Chrome
EasyMDE version: v2.1.0
Browser type and version: latest Chrome
EasyMDE version: 2.5.1
Hi, thank you for the awesome plugin and big thanks for the regular updates.
I'm here to ask you about "disabling" feature. I've used your plugin in Formik (Reactjs) and in some cases, I should disable all fields in the form and EasyMDE too.
My feature request is: Can we have "disable" option or not.
Thank you.
Browser type and version:
EasyMDE version: 2.4.1
Font Awesome 5 has changed the way they do their classing from Font Awesome 4. No longer can you simply use fa, rather you need to use fas, far, etc... It appears that your autoloaded version actually uses FA 4.7.0, does not behave this way, so when using EasyMDE on a site that already uses FontAwesome 5, the icons do not show.
It seems to me that the solution is to simply add far or fas to the corresponding icon classes, as it won't affect people who still use FA4, and the extra fa won't affect people using FA5.
It would be nice if there was a possibility to have functions that are called before and after the rendering of the preview render function. It creates a possibility to render custom text within the preview without me having to also to the markdown rendering, i.e. think of having mentions inside the text.
Browser type and version: Latest Android Chrome
EasyMDE version: Latest from unpkg
This also happens on the demo version of EasyMDE.
The typings from here should be adapted for EasyMDE and included in this repo.
Please add role="button" to toolbar buttons. Otherwise they are by default treated as submit buttons which causes weird behaviour when SimpleMDE is inside a form with other inputs. Instead of submitting the form when I press <enter>, first button (SimpleMDE's bold button) is pressed.
See this fiddle: https://jsfiddle.net/ge9hfkaL/2/
Browser type and version: all?
EasyMDE version: all?
npm install easymde --saveimport EasyMDE from 'easymde'Node: 8.9.4
NPM: 5.6.0
EasyMDE version: 2.0.1
Issue:
I currently have webpack set up as my app's bundler, and I've had no problems so far with any other modules, but after installing and trying to use easymde, babel-loader freaks out and says it cannot find the module, even though I confirmed it's present in node_modules. I tested with another module and it worked fine. Could it be because your package.json main field points to the dev build of the module?
When creating an unordered list like so:
- One
- Two
entering a newline at the end of line - One (i.e., inserting a new item between One and Two) results in the following:
- One
-
NaNundefinedTwo
Note: This does not occur with ordered list. Also, the old SimpleMDE 1.11.2 doesn't have this problem.
The editor currently forces the user to go full screen with codemirror when the side by side mode is enabled. It would be nice to be able to disable this functionality as it's fairly opinionated by the original devs.
A quick option and if check here would resolve this.
When you hold control to select multiple words to apply a style like bold, they are grouped and repeated in place of each word. Maybe selections should be limited to concurrent words?
I found this fork after going through the network on the original project and as stated in #1 you said that you planned to continue the development of the original project since it seems that the original has stopped.
As noted in the title I would like to pass my own markedjs renderer to simplemde for rendering the previews since marked is what does it in the first place. I think that this should be done with a config property like such:
// Init the default renderer
var renderer = new marked.Renderer();
// Custom table rendering (in this case bootstrap table)
renderer.table = function (header, body) {
return `<table class="table">${header} ${body}</table>`
};
new SimpleMDE({
element: document.getElementById('simplemde-box'),
// Pass the custom renderer
renderer: renderer
});You will notice that the keyboard does not dynamically or automatically change. Ever. When you first tap on the text input box it should automatically be in Caps mode, and after typing a single character it should automatically become uncapitalised. This does not happen. Another issue double-tapping space does not produce a full-stop. If you need any reminder of how the keyboard should be behaving, just open the notes app and type for a bit.
I believe that it must be because the keyboard isn't able to find any information on the contents of the text input box, though I'm speaking with no knowledge in the area.
Note: If you remove show from the URL of the JSFiddle, it will take you to the code.
Browser type and version: Safari (latest version), Chrome (latest version)
EasyMDE version: 2.4.0
Hi there, looks like you've been adding some good stuff to simplemde, while the main simplemde project hasn't been updated for 2 years (unless I'm reading it wrong). Any chance you could post some information about this fork? Thanks
Many issues on simple-mde was about an XSS vulnerability, allowing the user to execute JS code in the preview.
While the never trust the user is a common practice in web development, I think that we should avoid this and set the marked sanitize option to true by default.
I don't really find use-cases where injecting JS in a markdown viewer is useful.
Note that of course we can easily set this option with renderingConfig like below, this issue is just about choosing the default behavior.
new EasyMDE({
element: ...,
renderingConfig: {
markedOptions: {
sanitize: true
}
}
});(well, not sure here...)
Just type this in the text area:
<div onclick="alert('oops!')">Click here, please</div>
Then activate the preview and click on the text.
Any browser, any version
Browser type and version: Chrome (Desktop) - Latest version
EasyMDE version: NA
N/A
EasyMDE version: hopefully the next one ;)
i would like to have a callback (as part of the config options) which gets called when the editor/previewer wants to render a link. The callback should get the link URI and the label as arguments and should return the "rendered" form of the link as an HTML string (or, if the internal API supports it, as a DOM element - that would give us more flexibility). If the callback is not set, or returns the undefined value, the previewer should use its current default behaviour.
Concrete use case: i'd like to replace an old custom blog/wiki of mine which uses the Google Code Wiki format. It runs as a one-page app and loads new wiki pages (in the same app session) when a user clicks on a link to a wiki page (yet treats external links "as usual"). That is only possible because the Google Code Wiki parser allows me to replace (via a callback) its default link generator with one which i use to check "is this a link to a wiki page, and if so, create a custom link". Such a callback also makes it possible to replace anchor tags with, e.g., spans with on-click handlers, which might conceivably be useful as an anti-bot/spider method.
As an example:
https://fossil.wanderinghorse.net/wikis/cson
The "TableOfContents" link on the first page is a link to another wiki page, which the Google Code Wiki parser has allowed me to customize the link for. Tapping the link loads the requested page via ajax and feeds it into the app.
Hi, I've been looking for a (maintained) replacement to SimpleMDE and found this and InscrybMDE - what is the relation between the forks? I would really like to have my cake and eat it all :D
Be able to paste text in preview mode to not lose text transformation. Is there a plan or chance to support this feature?
Actual:
Expected:
Browser type and version: Chrome Version 70.0.3538.77
EasyMDE version: 2.5.1
The minimal markdown input required to reproduce the bug is the following:
- unordered
1. ordered
It displays the following:
Github displays it correctly:
Two newlines still counts as one list and displays the buggy behaviour:
- unordered
1. ordered
When there are three newlines, it stops exhibiting the behaviour:
- unordered
1. ordered
Browser type and version: Chrome, Version 72.0.3626.96 (Official Build) (64-bit)
EasyMDE version: Unsure, it is present on https://easymde.tk/
Browser type and version: Chrome 65
SimpleMDE version: Latest
Currently developers are forced to include the css file as an external link through HTML. In my opinion this is bad practice and should be rather packed with the module itself, so that whenever I require or import this module I don't need the extra link. In the meantime, it would be pretty useful to explicitly say so, cause as per docs you only need this when you include the module via CDNs.
toolbar: falsetoggleSideBySide or toggleFullscreenTypeError: Cannot read property 'side-by-side' of undefined hereBrowser type and version: Android Chrome 70
EasyMDE version: latest
Screenshot :
Video: https://streamable.com/eke9f
var easyMDE = new EasyMDE({element: $('#my-text-area')});Should be:
var easyMDE = new EasyMDE({element: $('#my-text-area')[0]});I'm submitting a...
npm install --save easymdeimport "easymde" or import { EasyMDE } from "easymde" or import * as EasyMDE from "easymde"CodeMirror.commands is undefined in browser console.If I import the minified js file (see below) it works fine, so I guess the issue is related to the bundling, perhaps some dependency or something that have to be set in the webpack config file that is not specified?
const EasyMDE = require('easymde/dist/easymde.min.js');
Browser type and version: Chrome/Firefox
EasyMDE version: 2.4.2
I read the text and it mentions being able to have images.
Do we have to upload to imgur ourselves, or does the product accept a copy & paste into screen and uploads to imgur for us?
While working on #41 I noticed it is necessary define button classes and icon classes in the same field, this is a result of changes made to have FontAwesome 5 compatibility.
This behaviour is confusing for developers working with the editor and error prone because the editor has to figure out which classes to add to the icon and which ones to add to the button.
I want to mark className as deprecated and introduce iconClass and buttonClass, those fields combined will facilitate the same functionality.
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.