Rich Text Editor Not Behaving Correctly

Question

I am trying to create a rich text editor on a text field. In an attempt to do this, I'm using Summernote. I have the editor initializing close to the way I want. I'd really like the airmode to behave on hover instead of on-click. Still, there is an odd behavior that is my real problem.

As shown in this Fiddle, a user can begin typing in one of the three editors on the screen. However, as soon as you enter a space, the text goes to the line above the input field. It does not stay on the same line. Strangely, the text just above the input line does not allow for rich-editing. I'm initializing the text fields like this:

  var optionEditors = $('.option-editor');
  for (var i=0; i<optionEditors.length; i++) {
    $(optionEditors[i]).summernote({
      airMode: true,
      popover: {
        air: [
          ['font', ['bold', 'underline', 'clear']]
        ]
      }
    });
  }

What am I missing? Everything looks correct. Its just that the behavior seems wrong. Thank you.

Answer 1

Another solution is to hide the inputs with CSS and make summernote looks like a form-control :

for (var i=0; i<optionEditors.length; i++) {
    $(optionEditors[i]).summernote({
      airMode: true,
      popover: {
        air: [
          ['font', ['bold', 'underline', 'clear']]
        ]
      },
      callbacks: {
        onInit: function() {
               // make the editor like a "form-control"
               $('.note-editor').addClass('form-control');
               // Force editor height adding one space 
               $(this).summernote('code', ' ');
            }
        }      
    });

}

@see working example https://jsfiddle.net/v8zhvsmo/