Как поставить несколько редакторов кода ace на страницу?

Question

[Данил Шитов]

есть такой замечательный редактор ace, и надо поставить редактор js кода и html, но возникла небольшая проблема, редактор инициализирует тег по id , и только одно имя id, имя 'editor' , вот такой прикол редактора.
Так будет работать:

<div id="editor">
              &lt;p class="layer"&gt;привет&lt;/p&gt;
	</div>

editor = ace.edit("editor");
      editor.setTheme("ace/theme/monokai");
      editor.session.setMode("ace/mode/html");

Так не будет :

<div id="htmleditor">
              &lt;p class="layer"&gt;привет&lt;/p&gt;
	</div>

editor = ace.edit("htmleditor");
      editor.setTheme("ace/theme/monokai");
      editor.session.setMode("ace/mode/html");

Объясните что за прикол, и как это обойти, ведь мне надо хотя бы 2 id что бы сделать 2 редактора на стр.

Answer 1

[Антон Неверов]

Вам не обязательно передавать ID в .edit(). Вы можете передавать элемент:

let editors = document.querySelectorAll('.editor'); //Парсим все элементы с классом "editor"

editors.forEach(function(e) { //Каждому такому элементу создаём редактор
    const editor = ace.edit(e);
    editor.setTheme("ace/theme/monokai");
    editor.session.setMode("ace/mode/html");
});

Вместо id просто указываете class="editor".

Comments

[Данил Шитов]

не работает, я же говорю что только с id editor

[Антон Неверов]

Вы что-то не то делаете, значит.
Вот рабочий пример: https://jsbin.com/wiziquneqe/edit?html,output

[Данил Шитов]

Антон Неверов, сарян, со стилями у себя накосячил, в верстке поменял id на класс, а в css нет, и просто не отображались редакторы :)

Answer 2

[Eobard Thawne]

На крайняк есть Codemirror.