how to add an auto expand to ace editor

Question

im using the ace editor and im unable to modify it to autoexpand when the user input is longer than the current size: here is how i have it currently (it has a handler for shift+enter), and it does not work.

Typist.prototype.heightUpdateFunction = function() {
          var newHeight =
              ac.getSession().getScreenLength()
              * ac.renderer.lineHeight
              + ac.renderer.scrollBar.getWidth();
           $(settings.id).height(newHeight.toString() + "px");
           ac.resize();
           };

Typist.prototype.createinput = function(settings,handler) {
    var that = this;
    var $typepad = $("<div/>" ,{
          id  : settings.id,
           }).css({position:'relative', height: '40px'}) ;
    $(that.place).append($typepad);
    var ac = ace.edit(settings.id);
    ac.commands.addCommand({
          name : 'catchKeys',
          bindKey : { win : 'Shift-Enter',  mac : 'Shift-Enter' },
          exec : function (ac) {
          if (typeof handler === "function") {
                     handler(ac);
              }
          },
          readOnly : false
          });
    that.heightUpdateFunction();
    ac.getSession().on('change', that.heightUpdateFunction);

    return true;
};

how would i get it to work? this current code does not. How would i access the object that called the height update? (or the "id" of the div containing the ace editor, since i have several, each with an id reachable by

a.inpid

given

a = new Typist()

my attempt comes from reading this similar kind of problem i dont want to go that way because i will have several ace editors on the page, and i need to know the id of the one to apply the height adjustment to.

mike · Accepted Answer · 2014-05-15T11:12:11.607

turns out i missed something simple

Typist.prototype.heightUpdateFunction = function() {
      var newHeight =
          ac.getSession().getScreenLength()
          * ac.renderer.lineHeight
          + ac.renderer.scrollBar.getWidth();
       $("#"+settings.id).height(newHeight.toString() + "px");  // i forgot $() needs '#'
       ac.resize();
       };

my bad. This omission kept me awake for hours. EDIT: see comment in the code to find my correction

how to add an auto expand to ace editor

1 Answers1