Set value in ACE editor - scala

Question

I am new to Selenium automation as well as Javascript. I am trying to write a Selenium test that should insert some txt into an ACE editor.
The element (inspect element) looks like
<div class="editor ng-pristine ng-untouched ng-valid ng-scope ace_editor ace-chrome emacs-mode ng-empty paragraph-text--dirty" ui-ace="{ onLoad : onLoad, require : ['ace/ext/language_tools'] }" ng-model="paragraph.text" ng-class="{'paragraph-disable': paragraph.status == 'RUNNING' || paragraph.status == 'PENDING' || revisionView === true, 'paragraph-text--dirty' : dirtyText !== originalText && dirtyText !== undefined}" id="20190722-172811_773233816_editor" style="height: 16px; font-size: 9pt;">
<textarea class="ace_text-input" wrap="off" autocorrect="off" autocapitalize="off" spellcheck="false" style="opacity: 0; left: 4px; height: 16px; width: 7.20117px; top: 0px;"/>
<div class="ace_gutter" aria-hidden="true" style="display: none;">
<div class="ace_layer ace_gutter-layer" style="margin-top: 0px; height: 48px; width: 34px;">
<div class="ace_gutter-cell " style="height: 16px;">1</div>
</div>
<div class="ace_gutter-active-line" style="top: 0px; height: 16px;"/>
</div>
<div class="ace_scroller" style="left: 0px; right: 0px; bottom: 0px;">
<div class="ace_content" style="margin-top: 0px; width: 1214px; height: 48px; margin-left: 0px;">
<div class="ace_layer ace_print-margin-layer">
<div class="ace_print-margin" style="left: 580px; visibility: visible;"/>
</div>
<div class="ace_layer ace_marker-layer"/>
<div class="ace_layer ace_text-layer" style="padding: 0px 4px;">
<div class="ace_line_group" style="height:16px">
<div class="ace_line" style="height:16px"/>
</div>
</div>
<div class="ace_layer ace_marker-layer"/>
<div class="ace_layer ace_cursor-layer ace_hidden-cursors">
<div class="ace_cursor" style="left: 4px; top: 0px; width: 7.20117px; height: 16px;"/>
</div>
</div>
</div>
<div class="ace_scrollbar ace_scrollbar-v" style="display: none; width: 20px; bottom: 0px;">
<div class="ace_scrollbar-inner" style="width: 20px; height: 16px;"/>
</div>
<div class="ace_scrollbar ace_scrollbar-h" style="display: none; height: 20px; left: 0px; right: 0px;">
<div class="ace_scrollbar-inner" style="height: 20px; width: 1214px;"/>
</div>
<div style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; font: inherit; overflow: hidden;">
<div style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; font: inherit; overflow: visible;"/>
<div style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; font-style: inherit; font-variant: inherit; font-stretch: inherit; font-size: inherit; line-height: inherit; font-family: inherit; overflow: visible;">XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</div>
</div>
</div>
I did some searching and found the way to add txt is via a JS script
20190722-172811_773233816_editor.setValue("abcd")
Is this correct?
How do I find the Id for editor in an automated way?
I tried this in Dev console and it tells me 20190722-172811_773233816_editor is not a valid name (var can't start with numbers).
Thanks!

Answer 1

You can try this,
var aceEditorElement = document.getElementsByClassName('ace_editor')[0].id; // Gets the Id of the ace editor; If you have multple editors in your page choose the required one from the list
var editorContainer = document.find("#" + aceEditorElement); // Gets the container through the Id
var editor = ace.edit(editorContainer ["0"]);
editor.session.setValue("Hello World"); // Sets the value into the editor