CODEWITHSUNDEEP
javascripthtmleditorace-editor
puopg
puopg

Reputation: 573

Multiple Ace editors on a page without presetting elements

I am trying to integrate Ace editor into my application and I want to have multiple tabs. However, the only way I have gotten this to work is by defining the elements ahead of time. So for example:

HTML:

<div id='editors'>
  <div id='editor1'></div>
  <div id='editor2'></div>
</div>

And then the Javascript:

var editor1 = ace.edit('editor1');
var editor2 = ace.edit('editor2');

When I try to simply place the editor inside of the container, it replaces the old editor each time, along with any elements I added before. Since ace editor requires some element/element ID to hook to, is there some way to create the ace editor without hardcoding in my HTML places for the editors to go? Maybe something like appending a new spot and then using it?

Upvotes: 2

Views: 703

Answers (1)

puopg
puopg

Reputation: 573

So I realized exactly what I needed to do after asking this question. It was just as simple as appending an element dynamically and then using that as the container for the new ace editor.

JS:

 editor.id = 'editor' + id;
 $('#editors').append('<div class="editor active" id="'+ editor.id + '"></div>');

And then using the dynamically created id to tell ace to use that new element.

Upvotes: 1

Related Questions