2

I'm trying to do all of the following things, at the same HTML page:

  1. Put more than one ACE editor in the same page
  2. There will be no need to define each editor its own ID tags
  3. There will be no need to define each editor its own HEIGHT
  4. The height of each editor will automatically initialized according to its default text
  5. The height of each editor will automatically grow when adding it text and reduced automatically when deleting from it text

I used this code: https://stackoverflow.com/a/27114508/5354360 for 1. and 2.

I used this code: https://stackoverflow.com/a/13579233/5354360 for 3. 4. 5.

Each of the codes works great by itself, but when I try to combine them and create more than one editor in the same page, the height set according to the last editor.

How should I fix the code?

Thanks!

my code:

<script type = "text/javascript" src = "http://code.jquery.com/jquery.min.js"></script>
<script src = "https://ace.c9.io/build/src/ace.js" type = "text/javascript" charset = "utf-8"></script>
<script>
$(document).ready(function()
{
 $('.ace_editor').each(function()
 {
  var editor = ace.edit(this);
  editor.setTheme("ace/theme/monokai");
  editor.getSession().setMode("ace/mode/c_cpp");

  var heightUpdateFunction = function()
  {
   var newHeight = editor.getSession().getScreenLength() * editor.renderer.lineHeight;
   editor.setOptions({ maxLines: Infinity });
   editor.resize();
  };
  heightUpdateFunction();
  editor.getSession().on('change', heightUpdateFunction);
 });
});
</script>

<pre class = "ace_editor" style = "width:50%;">
#include < iostream >
usimg namespcse std;

int main ()
{
 for (int i = 0; i < 10; i++)
  printf ("%d", i);

 return 0;
}
</pre>

<br>

<pre class = "ace_editor" style = "width:50%;">
for (int i = 0; i < 10; i++)
 printf ("%d", i);
}
</pre>
Community
  • 1
  • 1
Y.S.
  • 157
  • 1
  • 11
  • (See also: [Automatically adjust height to contents in Ace editor](http://stackoverflow.com/a/13579233/3789665)) – greybeard Dec 13 '16 at 12:11
  • (There seem to be words missing from your question: use "backticks" to present what might otherwise be handled as an HTML tag.) – greybeard Dec 13 '16 at 12:14

2 Answers2

1

You are using global editor variable, so heightUpdateFunction always works on the last editor.

But it is better to use built in method for resizing 

editor.setAutoScrollEditorIntoView(true);
editor.setOption("maxLines", 30);

https://github.com/ajaxorg/ace/blob/v1.2.6/demo/autoresize.html#L40-L41

a user
  • 23,300
  • 6
  • 58
  • 90
  • You are right, but I would like that the editor height will be dynamic and will not be limited by amount of lines. – Y.S. Dec 14 '16 at 22:04
  • you can set maximum to be larger, but setting it more than 1000 will make editor too slow if user actually adds more than 1000 lines – a user Dec 14 '16 at 22:54
0

Ok, I found my mistake. Just replaced: $('.editor').height(newHeight.toString() + "px"); with: editor.setOptions({ maxLines: Infinity }); and all fixed out.

Y.S.
  • 157
  • 1
  • 11