Medium.js（WYSIWYG）のサンプルページにおいて1つしか無いid（1個の入力フォーム）を複数idでも動作するようにしたい

Question

こちらのページがMedium.jsの本家です。ここのサンプルページについての質問です。
http://jakiestfu.github.io/Medium.js/docs/

このページの中で、Rich with Invoke Elementを採用したいと考えました。

そして私の作っているWebページに適用させようとしたところ、問題が発生しました。
私のWebページでは、この入力フォームが1ページあたり複数あるのです。
つまり、<div id="rich_with_invoke_element">がページ内に1個であれば、問題なくできるのですが、複数あると動作しなくなるようです。

調べたところ、このタグの動作に関与していると考えられる該当ファイルが見つかり、2行目のところに
document.getElementById('rich_with_invoke_element')
と書いてありました（下のコード参照、ファイル一部ではなく全体です）。

該当ファイルは、検証によって、「rich_with_invoke_element.js」ファイルであることがわかりました。

(function() {
	var article = document.getElementById('rich_with_invoke_element'), container = article.parentNode, medium = new Medium({
		element : article,
		mode : Medium.richMode,
		placeholder : 'Your Article',
		attributes : null,
		tags : null,
		pasteAsText : false
	});

	article.highlight = function() {
		if (document.activeElement !== article) {
			medium.select();
		}
	};

	container.querySelector('.bold').onmousedown = function() {
		article.highlight();
		medium.invokeElement('b', {
			title : "I'm bold!",
			style : "color: #66d9ef"
		});
		return false;
	};

	container.querySelector('.underline').onmousedown = function() {
		article.highlight();
		medium.invokeElement('u', {
			title : "I'm underlined!",
			style : "color: #a6e22e"
		});
		return false;
	};

	container.querySelector('.italic').onmousedown = function() {
		article.highlight();
		medium.invokeElement('i', {
			title : "I'm italics!",
			style : "color: #f92672"
		});
		return false;
	};

	container.querySelector('.strike').onmousedown = function() {
		article.highlight();
		medium.invokeElement('strike', {
			title : "I've been struck!",
			style : "color: #e6db74"
		});
		return false;
	};
})();

例えばですが、idを複数作り、

#rich_with_invoke_element_001
#rich_with_invoke_element_002
#rich_with_invoke_element_003

のようにして複数の入力フォーム（実際にはinputではなくdivタグ）を作り、jqueryでいう

$('[id^="rich_with_invoke_element"]')

のように書き換えることはできないのでしょうか？

ご教示いただけますと幸いです。よろしくおねがいします。

Answer 1

適用の仕方は下記ですよね。

            new Medium({
                element: document.getElementById('editor')
            });

それこそ複数newすれば良いのでは？（未検証）

   <div id="editor1"></div>
   <div id="editor2"></div>
   <div id="editor3"></div>

            new Medium({
                element: document.getElementById('editor1')
            });

            new Medium({
                element: document.getElementById('editor2')
            });

            new Medium({
                element: document.getElementById('editor3')
            });

クラス振ってもいけそうに思います。（未検証）

   <div id="editor1" class="editor"></div>
   <div id="editor2" class="editor"></div>
   <div id="editor3" class="editor"></div>

editorList = Document.querySelectorAll(".editor");
for(i=0;i<editorList.length;i++){
    new Medium({
        element:editorList[i]
    });
}

Comments

[tiqua_nibio]

ありがとうございます。うまくいきました。
難しい質問かと思いますが、わざわざお答えいただき恐縮です。