sparksuite / simplemde-markdown-editor Goto Github PK

The height for the fullscreen toolbar is fixed at 50px, so when it responsively shrinks, buttons move to the second row and are hidden.

See library here: https://github.com/chjj/marked

Not sure if this is intended by it would be nice if it was configurable.

Instead of mandating the full toolbar option be created like so:

var simplemde = new SimpleMDE({
    toolbar: [{
            name: "bold",
            action: toggleBold,
            className: "fa fa-bold",
            title: "Bold (Ctrl+B)",
        },
        "|", // Separator
        ...
    ],
});

Allow a simplified version that uses just the names available in the chosen order:

var simplemde = new SimpleMDE({
    toolbar: ["bold", "italic", "|", "code", "quote"],
});

Then use the default actions, class names, titles, etc. for the chosen icons in the chosen order.

https://jsfiddle.net/zjxnwroL/8/

1. Place cursor in the end of the first list item (i.e. after "indexation")
2. Type one character (e.g. "q")
3. Remove it (backspace)
4. Move cursor down one line using keyboard and type something

Note, after (3) cursor is already in wrong position, but if you proceed typing/deleting it will fix itself. Seems like (4) messes it up completely

Plain CodeMirror does not have this kind of bug https://jsfiddle.net/o335vwsw/6/

I've tried to compress CodeMirror to include 'gfm' mode and create a jsfiddle with it, but it does not work for me (see console output here)

It might be a problem related to gfm mode, but I'm not sure.

Do so using the new parsingConfig option to keep SimpleMDE's configuration as clean as possible, without relying on users knowing CodeMirror's details. To do:

• Fully document the available options in the README
• Fully test the implementation

E.g. https://jsfiddle.net/ehmt3yLw/

I believe this is due to these lines, but am not sure how to fix it right away.

The first thing that pops into my mind is:

var toolbar = wrap.parentElement.getElementsByClassName("editor-toolbar")[0];
toolbar.className += " fullscreen";

but this won't work if both editors are in the same parent, like in jsfiddle above.

Doesn't look great right now with mobile devices

Add spell checker as a default setting, with option to disable. Use plugin just developed for this purpose: https://github.com/NextStepWebs/codemirror-spell-checker

Hi, just spent a couple of hours looking at and comparing markdown editors, and SimpleMDE/lepture seems like the best.

Great to see that you're continuing to add to the project and keep it alive :-)

One concern I have with committing to SimpleMDE is that if you get busy with other things, the code isn't public to fork or submit pull-requests against. Do you have any plans to include the source in the repo?

A few of the features I'd be interested in, and would consider adding pull-requests for:

• More toolbar buttons (h1, h2, h3, hr, etc)
• tooltips (html title attribute) on the toolbar buttons

@WesCossick, I agree, if no element key is explicitly set in options array. But but if element is explicitly set in options, that suggests the user does not want default behaviour. If the user then makes an error selecting the element (as I did), there's no error in console to reflect erroneous element selector. Might I suggest a small tweak?

If no element key is explicitly set in options, revert to your default (first textarea in DOM).
If an explicit element key is set in options, override default (but throw error in console if user's selector is erroneous).

—@jesseleite

Greetings!

This is probably something I am doing wrong but am stuck ATM, help!

When I define toolbar like like this:

toolbar: ["bold", "italic", "strikethrough", "heading", "|", "code", "quote", "unordered-list", "numbered-list", "|", "link", "image", "horizontal-rule", "|", "preview", "side-by-side", "guide"]

strikethrough, numbered-list, and side-by-side are blank. (when moused over they look like what the red arrow is pointing to in the screenshot, when clicked on nothing happens)

There is nothing in console for any of the process.

Instantiation HTML:

<textarea id="comment-1" form="form-1441391701-0" name="comment" class="form-control" placeholder="" >initial content</textarea>
<script type="text/javascript">
    $( document ).ready(function() {
        var simplemde = new SimpleMDE({ 
            element: $("#comment-1")[0],
            toolbar: ["bold", "italic", "strikethrough", "heading", "|", "code", "quote", "unordered-list", "numbered-list", "|", "link", "image", "horizontal-rule", "|", "preview", "side-by-side", "guide"]
        });
        simplemde.render(); 
    });
</script>

Can you add to the readme a block of html for running SME without using cdn.jsdelivr.net? Specifically for testing - I wasn't sure if all the source files were needed, and in what order (and TBH, was a bit too lazy to copy each file name and work it out 😉).

Something like:

<script src="//your-domain-here.com/js/codemirror/codemirror.js"></script>
<script src="//your-domain-here.com/js/codemirror/overlay.js"></script>
<script src="//your-domain-here.com/js/codemirror/markdown.js"></script>
<script src="//your-domain-here.com/js/marked.js"></script>
<script src="//your-domain-here.com/js/spell-checker.js"></script>
<script src="//your-domain-here.com/js/typo.js"></script>
<script src="//your-domain-here.com/js/simplemde.js"></script>

The README lists numbered-list as a toolbar item, but it doesn't work. It should be ordered-list instead.

How do you catch a keypress event on simplemde? is it something to do with:

simplemde_letterBodyEdited.codemirror.on()

Or something to do with this? https://codemirror.net/doc/manual.html#events

Most users won't have heard of markdown, and might need some help with how to use it.

I'd suggest a help (question-mark?) button on the toolbar that opens http://markdowntutorial.com/ in a new tab.

I've run into this ~3 weeks ago in 1.4.0, but it seems like it was not been fixed.

Browser tab eats ~1Gb of memory on a page with ~10 of editors with spell checker enabled and it grows the more editors on a page you have.

I didn't look very closely into that, but with profiling enabled in Chrome I see a lot of calls to Typo._parseDIC. My understanding is that every editor fetches it's own spell checking dictionary, so memory consumption grows linearly with the number of editors. They should share one dictionary, probably.

It would be helpful to have an ability to add toolbar buttons to insert custom markup. It is possible now to extend toolbar with custom buttons, but to define custom markup you'll need to use helpers _toggleBlock, _toggleLine, etc. The problem is they are not exposed in the public API, so the only option is copy&paste them into own code, but that's really hard to maintain.

It would be great for _toggleBlock, _toggleLine (and whatever you think also might be necessary) to be exposed for outside usage.

Add basic title attribute tooltips to toolbar button, along with option to enable/disable.

Again thank you Wes, great lib. Here is my approach of the only thing missing heh... (actually 3).

https://jsfiddle.net/xb0rbkvk/9
A split button goes to fullscreen where left is editor, right is preview. 50/50.
Preview is live updated and scrolls are synced (roll code, preview rolls too).

Not creating a PR to consult you first, JS ain't my forte. And... I (and my editor) share massive OCD, so I removed all blanks and changed tabs by spaces.
Also added strike through (github markdown but marked supported) and tables.

Hi! You can create editor as jquery plugin?

Example:

$('#editor').simpleMDE({
  toolbar: false
});

$('#editor').simpleMDE('value', '# text');
$('#editor').simpleMDE('value');
# => '# text'

$('#editor').on('simple_mde:change', function(e) { console.log(e) })

I try setting like this:

indentWithTabs: false,
tabSize: 4

but don't work for me, check this: http://jsfiddle.net/kspr/rbkybz3b/ indentation is on 2 spaces.

EDIT: solved to me with:

simplemde.codemirror.setOption('indentUnit', 4)

There doesn't seem to be a way to set different heights for multiple textareas.

Any chance of an option being added for this instead of it being entirely controlled by a single CSS class?

First of all - thank you for the incredible editor, it is amazing. I need this thing very much, and I'm sure a lot of people will too. This is an extremely valuable project.

I have noticed a bug, or maybe I'm just not using it right.

I have a nested commenting system on my website(like reddit). Each comment has a textarea for typing in the reply. I'm trying to render the editor in each of the areas.

$('textarea').each(function() {
        var simplemde = new SimpleMDE(this);
        simplemde.render(); 
 })

But it ends up rendering the 2nd editor right after the first one, not inside the correct text area.

Can you help me out with this?

Latest version is 5.6.x

I tried out the very basic setup of this plugin but am getting this error:

Here's what the code looks like:

    <link rel="stylesheet" media="screen" href="//maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" />
    <link rel="stylesheet" media="screen" href="//cdn.jsdelivr.net/simplemde/latest/simplemde.min.css" />
    <script src="//cdn.jsdelivr.net/simplemde/latest/simplemde.min.js"></script>
    <script>
      var simplemde = new SimpleMDE();
      simplemde.render();
    </script>

It's outdated, take a new one.

• icons at the top lack tooltips
• active state of the preview toggle button should be more obvious
• the buttons should be deactivated in preview mode (they actually still work!)
• preview and edit mode disagree when it comes to escaping (e.g. ## foo)
• images in edit mode could show a preview when hovered or something like that

See: https://docs.npmjs.com/misc/developers. Then, update the README.

Not sure if this is a limitation on SimpleMDE's end or CodeMirror's end (since CodeMirror does all the editing in pre>span tags, but getting At.js to work is just too lofty a goal today it seems.

Any insight you can provide on how this might be possible?

You mention this in your readme:

// Customize only the order of existing buttons
var simplemde = new SimpleMDE({
    toolbar: ["bold", "italic", "heading", "|", "quote"],
});

When I do this, my icons and tooltips disappear. Is this intentional, or bug?

For the record, here's my exact code:

var simplemde = new SimpleMDE({
    element: document.getElementById("#description"),
    tabSize: 4,
    toolbar: ["bold", "italic", "heading", "|", "quote"],
});
simplemde.render();

Notice the background showing through under the toolbar icons.

PS. The new side-by-side fullscreen mode is amazing! Thank you guys!

I think this is rarely desirable from an end user standpoint. If the markdown standard itself doesn't support single line breaks, could we have an option to force a double line breaks when a user presses enter?

Assuming it's an optional opt-in / opt-out thing, the only downside I can think of is removing these line breaks will require two backspace presses... though I suppose you could get clever there as well so that it's one enter press to force double line break, and one backspace press to delete double line break (if one is detected).

Your thoughts on this?

@madmax stated:

You can easly make nice h1 icon using font-awesome:

http://mad.xan.pl/s/1GoHSZQ77L/

className: "fa fa-header fa-header-1",

.fa-header-1:after {
  font-size: 50%;
  vertical-align: text-bottom;
  content: "1";
}

Either make a hybrid function or add a new option for handling async.

I'm getting the error:

Uncaught TypeError: Cannot read property 'className' of null

In the last line of this block:

SimpleMDE.prototype.createSidebyside = function() {
    var cm = this.codemirror;
    var wrapper = cm.getWrapperElement();
    var preview = wrapper.nextSibling;

    if(!/editor-preview-side/.test(preview.className)) {

I have the old/normal preview enabled, and when I click it, I get this error:

Uncaught TypeError: Cannot read property 'singleLineBreaks' of undefined

(I don't have singleLineBreaks defined in the options when I initialize the object.)

Possible causes, or steps to reproduce:

• I don't have the side-by-side enabled in the toolbar buttons.
• The textarea I'm targeting does not have any siblings.
• I'm getting SME from cdn.jsdelivr.net

I'm not sure if it's related, or a separate problem, but I have a change event defined that used to work, but is no longer firing (apart from that and preview, everything else seems to work fine.)

In particular, improve the bigger/smaller dedicated icons.

• Add option to customize the toolbar icons
• Expand the toolbar icons
  • Code
  • Horizontal rule

Title says it all. Sass is more organized. Will need to update the gulp file.

Just demo'ed SME to a colleague, and they had a suggestion:

Toolbar button to resize the editor to the full size of the window.

(Github textarea's have it, if you want an idea of how it looks.)

Just released a new version today

First off, excellent editor field, thanks!

It'd be smashing if the code blocks could be syntax highlighted.

FWiW, Git hub uses https://github.com/github/linguist

Toolbar buttons for h1, h2, h3, hr

Is this an issue with numbered sub-list handling in the editor view (notice the numbering inconsitency between editor and preview)?

for example simpleMDE support ```,
however django_markdown does not support that.

it looks django_markdown used a old markdown grammer.
What version of markdown is simpleMDE using?

Was just playing around with the new toolbar settings (thanks for that!) and found something odd.

    var simplemdeObj = new SimpleMDE({
        element: byId("<?=$name?>"),
        status: false,
        lineWrapping: true
    });
    console.log(simplemdeObj.toolbar);

In the console output there is no property for image, and the object inside quote is actually the image button.

• Side by side preview does not look good on small screens
• Fade edges of mobile toolbar to indicate scroll left/right. Also make sure it scrolls whether fullscreen or not.
• Prevent scrolling behind editor when fullscreen. Especially when it taps to start editing.

Firstly, what an amazing Markdown editor. I love the visual feedback given by inline styling, and the wysiwyg-like toolbar... yet this thing is NOT a wysiwyg editor, so it doesn't come with any of the buggy baggage that most wysiwyg editors struggle with. THANK YOU <3

Anyway, regarding my issue: I've noticed inconsistent behaviour between links and images. Here's a screencast to show what I mean: http://recordit.co/VeU4EJQeWP

I would like to be able to have a div that contains markdown be editable without using a textarea.

Add option to specify a callback, which will return rendered markdown instead of using default editor.constructor.markdown

It can be useful in cases when editor is used with richer markdown superset, than it supports by default. For example, callback can make request to a server, which can render this richer subset properly and display that.

We're using this approach already in allura but it requires copy&pasting togglePreview method, which requires synchronization whenever new version is released.

Also, events or custom callbacks for preview open/close events would be useful, e.g. to add some custom styles to the editor.