富文本编辑器表现不正常

Question

我正在尝试在文本字段上创建一个富文本编辑器.为了做到这一点,我正在使用Summernote.我让编辑器初始化接近我想要的方式.我真的很喜欢airmode在悬停而不是点击时表现.不过,有一个奇怪的行为是我真正的问题.

如此小提琴所示,用户可以开始在屏幕上输入三个编辑器之一.但是,只要输入空格,文本就会转到输入字段上方的行.它不会停留在同一条线上.奇怪的是,输入行正上方的文本不允许进行富编辑.我正在初始化文本字段,如下所示:

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

我错过了什么？一切看起来都很正确.只是这种行为似乎是错误的.谢谢.

Answer 1

另一个解决方案是使用 CSS 隐藏输入，并使 Summernote 看起来像表单控件：

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', ' ');
            }
        }      
    });

}

@参见工作示例https://jsfiddle.net/v8zhvsmo/