Simplemde-markdown-editor: Is there any API to get an instance of SimpleMDE?

Created on 18 Oct 2016  路  13Comments  路  Source: sparksuite/simplemde-markdown-editor

Apologies if this is not the right place to ask this question...

My use case is pretty simple. I have one textarea on my page, on pageload I create a new instance of SimpleMDE (new SimpleMDE({element: $('#markdown-editor')[0]});).

In my integration test I'd like to programmatically set the contents of the SimpleMDE. Is there a way to retrieve the instance of SimpleMDE that is already on the page? Maybe something like var simplemde = SimpleMDE.get({element: $('#markdown-editor')[0]});

question

Most helpful comment

Can we implement this feature to get an existing instance of an editor rather than creating a new one?

All 13 comments

You can save a reference when you create it: var simplemde = new SimpleMDE({element: $('#markdown-editor')[0]});

Understood, but I'd like to be able to access the instance outside the scope of where I create it.

I know I could create my own map of jquery selectors to SimpleMDE instances and store it on window, but it would be nice if this was done by the library.

Trying to access a variable outside of the scope where you created it sounds more like a JavaScript problem than a SimpleMDE question. Can you elaborate on how this relates to SimpleMDE specifically?

In the past I have used TinyMCE (a popular editor), which keeps track of all active editors and has an API to access them by ID. https://www.tinymce.com/docs/api/tinymce/root_tinymce/#get

My specific use case is that I use selenium to test my website. I'd like to be able to edit the content of a SimpleMDE instance in my test. It would be very easy for my test to execute some javascript like SimpleMDE.get('#markdown-editor').value('My new awesome text');.

It looks like the answer to my question is "no" - which is totally fine. I just wanted to be sure I wasn't missing anything.

@kdeggelman,

inside the scope:

var element = $(selector).get(0);
var editor = new SimpleMDE({element: element});
$(selector).data({editor: editor});

and outside the scope:

$(selector).data('editor').value()

Can we implement this feature to get an existing instance of an editor rather than creating a new one?

+1 need this.

+1. Preferably we could access the existing instance attached to an element with $(selector).SimpleMDE() but this functionality does not currently exist. Then you could simply chain .value() or any other SimpleMDE method.

Any chance this functionality could be added?

+1, It would help me

+1

I need it.

@kdeggelman,

inside the scope:

var element = $(selector).get(0);
var editor = new SimpleMDE({element: element});
$(selector).data({editor: editor});

and outside the scope:

$(selector).data('editor').value()

I couldn't initially get this to work (I'm not great with javascript) but eventually, success. Works. Thank you.

It seems like SimpleMDE is built on top of CodeMirror.

There is no API for SimpleMDE to get its instance yet, but you can get the CodeMirror instance instead.

You can try this way to set the value to CodeMirror instance.

const textArea = document.getElementById('text-area-id');
const editor = CodeMirror.fromTextArea(textArea);
editor.getDoc().setValue('Hakuna Matata');
Was this page helpful?
0 / 5 - 0 ratings

Related issues

IonicaBizau picture IonicaBizau  路  3Comments

prologic picture prologic  路  3Comments

jasonlewis picture jasonlewis  路  4Comments

christianmalek picture christianmalek  路  5Comments

nivv picture nivv  路  4Comments