Simplemde-markdown-editor: How to access the generated HTML?

Created on 10 Nov 2015  路  11Comments  路  Source: sparksuite/simplemde-markdown-editor

In the previews the markdown is already converted to html - how to access that generated html as string?

The value() method is returning the original markdown string. Since the editor is already generating the html for preview, exposing that generated string (or the generator method) would be helpful (instead of user explicitly trying to do the conversion again from the value() returns)

question

Most helpful comment

If you just want to render HTML in the same style as SimpleMDE's dialect:

import SimpleMDE from 'simplemde'

// more code to do what might be needed

const html = SimpleMDE.prototype.markdown( markdownFromSMDE );

in case someone, like me, will look at this later and will need this

All 11 comments

The developer will need to do the conversion when needed from the .value() return. The preview only renders the Markdown into HTML when it is displayed. For efficiency's sake, it does not constantly keep the preview up-to-date with the latest HTML after every single change. Therefore, it would be illogical to access the preview's HTML at random. Instead, the developer will need to grab the latest Markdown and render it as they see fit using their rendering library of choice.

No need to update the HTML after every single change. It is enough to expose the function that is rendering the html to the user so that they can get the same results on demand.

Imagine having to specify the custom preview rendering function only to realize that you have to do that rendering manually when you need the same HTML elsewhere !!

If you absolutely need to use SimpleMDE's own rendering function, you can use:

simplemde.options.previewRender("This is *example* Markdown");

I agree with @KrishnaPG that exposing the html-render function would streamline some use cases. Mine, for example, uses the rendered HTML for some DOM manipulation. To keep the manipulation and output strictly client side (it's really light weight and I prefer flat files anyway) I'm currently triggering the preview just to have jQuery grab the resulting HTML. That's not really the most flexible nor efficient way, I think. But still much leaner than installing and calling for a seperate rendering library. Can we reopen this issue, @WesCossick ?

// copy markdown-editor content into presentation area
$('#copy').click(function(){
    // toggle preview to render the latest input, copy html
    simplemde.togglePreview();
    $('#presentation').html($('.editor-preview').html());
});

see also #392 (would love to send HTML elsewhere by form)

The code that I commented above should work without having to render the preview and grab the HTML using jQuery.

When I use this code (onclick) preview _is_ getting rendered in the editor. Should I pass value() differently?

var render = simplemde.value();
var renderedHTML = simplemde.options.previewRender(render);
$('#presentation').html(renderedHTML);

Can you demonstrate with a JSFiddle? The code I provided in no way causes SimpleMDE to render the preview DOM element. It just takes and parses the Markdown, then returns the HTML.

Sorry, the problem is sitting in front of my computer :(

If you just want to render HTML in the same style as SimpleMDE's dialect:

import SimpleMDE from 'simplemde'

// more code to do what might be needed

const html = SimpleMDE.prototype.markdown( markdownFromSMDE );

in case someone, like me, will look at this later and will need this

how to get editor value? (example : hello world)

FUTURE USERS: simplemde.togglePreview();

Was this page helpful?
0 / 5 - 0 ratings

Related issues

garethrbrown picture garethrbrown  路  5Comments

libregeek picture libregeek  路  3Comments

liniu picture liniu  路  3Comments

rahulnjs picture rahulnjs  路  3Comments

andrelgarcia picture andrelgarcia  路  4Comments