Javascript 富文本编辑器运行不正常

我正在尝试在文本字段上创建富文本编辑器。为了做到这一点，我正在使用。我让编辑器按我想要的方式初始化。我真的希望

airmode

在悬停而不是单击时运行。不过，有一种奇怪的行为是我真正的问题

如图所示，用户可以开始键入屏幕上三个编辑器之一。但是，一旦输入空格，文本就会转到输入字段上方的行。它不在同一条线上。奇怪的是，输入行上方的文本不允许进行丰富的编辑。我正在初始化文本字段，如下所示：

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

var optionEditors=$（'.option editor'）；
对于（var i=0；i；如果不首先加载，它们将失败：

插件依赖项
一些插件和CSS组件依赖于其他插件。如果您单独包含插件，请确保在文档中检查这些依赖关系。还请注意，所有插件都依赖于jQuery（这意味着jQuery必须在插件文件之前包含）。请咨询我们的bower.json以查看支持哪些版本的jQuery

在jQuery脚本中，在调用
onload
事件中的
addAllegements
后，加载标记会导致它加载

延迟

此布尔属性设置为向浏览器指示脚本将在解析文档后执行。由于此功能尚未由所有其他主要浏览器实现，因此作者不应假定脚本的执行将实际延迟。延迟属性不应用于执行此功能的脚本没有src属性。由于Gecko 1.9.2，没有src属性的脚本会忽略defer属性。但是，在Gecko 1.9.1中，如果设置了defer属性，甚至内联脚本也会延迟

发生这种情况的原因似乎与jQuery无关，它似乎与summernote初始化编辑器的方式有关。您获取的
可选编辑器
属性是一个
div
元素，正在初始化，而不是
输入
元素

接下来发生的事情是summernote然后获取这个div并在其中创建两个其他
div
元素，其中包含类，如
note editor
，
note dropzone
，
note edition area
，等等。最里面的div有一个名为
note editable
的类，在这个div中是您的输入元素。
不是e-editable
div是summernote所认为的真正的富文本编辑器，而不是输入元素。也就是说，您仍然可以单击输入元素并键入任何您想要的内容

Summernote将一些事件侦听器放置在
onkeydown
事件上，由于它是一个富文本编辑器，因此它似乎正在检查空格键字符（以及其他字符，例如
enter
，它将成为一个新段落），以便在HTML中转义（空格变为
）。由于您在
note editable
div中键入，即使在
input
元素中键入，此按键将被summernote捕获，它似乎将转义空格字符放置在div中，而不是输入中。这将导致文本放置在输入元素上方。您不会当光标位于输入元素上方时，可以使用
ctrl+A
高亮显示此可编辑div中的所有内容，甚至可以删除输入元素

我的建议是完全删除输入元素，只使用包含的div，因为这似乎是最常见的用例场景。您也可以尝试覆盖
onkeydown
事件侦听器，并将空格附加到输入中，但这似乎是一种非常迂回的方法，试图解决无法解决的问题真的需要解决

Edit:看起来summernote克隆了指定为富文本编辑器的节点，该节点最终将删除所述元素上的任何事件侦听器，包括其子元素，因此在初始化summernote之前无法覆盖文本输入元素的keydown事件。尝试为
keyDown
事件通过summernote的init配置是可能的，但由于summernote设置了预配置的事件处理程序，因此非常难看并且有一些怪癖

在小提琴中，我只使用了一个文本输入，并给它id
richTextInput
。此外，我删除了
onchange=“onAnswerChoiceChange（this）；”
，因为这会导致错误

要在配置中提供覆盖，请使用以下命令：

$(optionEditors[i]).summernote({
  airMode: true,
  popover: {
    air: [
      ['font', ['bold', 'underline', 'clear']]
    ]
  },
  callbacks: {
    onKeydown: function(e) {
      if (e.keyCode === 32) { // catch "space"
        e.preventDefault();
        $('.note-editable>#richTextInput').val($('.note-editable>#richTextInput').val() + " ");
      }
    }
  }
});

note editable
类是summernote在初始化后创建的容器
div
。我们需要指定这一点，因为summernote会在初始化之前自动复制“要编辑的富文本编辑器”的所有内容，然后使用
display:none
隐藏它们，所以只需尝试使用
$（“#richTextInput”）
将不起作用，因为您将获取隐藏的输入

怪癖：您会注意到，如果尝试使用此代码，summernote将尝试自动向实际的富文本编辑器div提供焦点，这是由于summernote注册的事件侦听器中提供的行为造成的。您可以通过提供如下超时来解决此问题：

setTimeout(function() {
    $('.note-editable>#richTextInput').focus();
}, 1); 

正如我之前所说的，这确实不是一个好的解决方案，尽管它可能会起作用，但我认为更好的方法是完全放弃文本输入，只初始化一个div或textarea，而不是像库所期望的那样嵌套在其中。这样做会更容易，然后相应地设置样式。使用材质设计样式/compo由于材质需要输入或textarea元素，并且summernote转换textarea i，因此nENT可能无法很好地协同工作
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', ' ');
            }
        }      
    });

}