javascript - 适用于多个 ID 的简单 MDE 编辑器

Question

我正在尝试让这个插件适用于单个表单上的多个 ID。

插件... Simple MDE Editor

代码如下...

<!-- 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>

到目前为止我尝试过:1 - getElementsByClassName...不走运2 - querySelectorAll...不走运3 - 逐一列出元素...

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

也没有运气。如何对同一表单中的多个元素执行此操作？

Answer 1

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

这意味着您需要为每个元素实例化多个SimpleMDE:

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>