raulbaros raulbaros - 27 days ago 6
jQuery Question

Simple MDE Editor for multiple IDs

I am trying to make this plugin work for multiple IDs on a single form.

The plugin... Simple MDE Editor

The code is following...



<!-- Include the required files -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.css">
<script src="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.js"></script>

<!-- Start simple MDE -->
<script>
var simplemde = new SimpleMDE({
element: document.getElementById("MyID")
});
</script>





So far I tried:
1 - getElementsByClassName... no luck
2 - querySelectorAll... no luck
3 - listing the elements one-by-one...



document.getElementById("id1") ,
document.getElementById("id2") ,
document.getElementById("id3") ,
document.getElementById("id4")





Also no luck. How to do this for multiple elements in the same form?

Answer Source

element: The DOM element for the textarea to use. Defaults to the first textarea on the page

This means you need to instantiate multiple SimpleMDE for each element:

var simplemde = {};

$('#id1, #id2, id3').each(function(idx, ele) {
    simplemde[ele.id] = new SimpleMDE({
        element: ele
    });
})

var simplemde = {};

$('[id^="MyID"]').each(function(idx, ele) {
    simplemde[ele.id] = new SimpleMDE({
        element: ele
    });
})
.CodeMirror {
    height: 50px !important;
    min-height: 50px !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.css">
<script src="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.js"></script>


<textarea id="MyID1">MyID1</textarea>
<textarea id="MyID2">MyID2</textarea>
<textarea id="MyID3">MyID2</textarea>