富文本編輯器表現不正常

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

}

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

Answer 2

Bootstrap插件依賴於jQuery ; 如果它沒有先加載它們會失敗：

插件依賴項

一些插件和CSS組件依賴於其他插件。 如果單獨包含插件，請確保在文檔中檢查這些依賴項。 另請注意，所有插件都依賴於jQuery（這意味着必須在插件文件之前包含jQuery ）。 請咨詢我們的bower.json，了解支持哪些版本的jQuery。

jQuery腳本加載標記中的defer屬性導致在onload事件中調用addAllElements 后加載它。

defer

此布爾屬性設置為向瀏覽器指示在解析文檔后要執行腳本。 由於所有其他主流瀏覽器尚未實現此功能，因此作者不應假設腳本的執行實際上將被延遲。 不應在沒有src屬性的腳本上使用defer屬性。 從Gecko 1.9.2開始，在沒有src屬性的腳本上會忽略defer屬性。 但是，在Gecko 1.9.1中，如果設置了defer屬性，甚至內聯腳本也會延遲。

Answer 3

發生這種情況的原因似乎與jQuery無關，它似乎與summernote如何初始化編輯器有關。 您正在抓取的optional-editor屬性是一個div元素，正在初始化，而不是input元素。

接下來會發生什么是summernote，然后使用這個div並在其中創建一些其他div元素，例如note-editor ， note-dropzone ， note-editing-area等。最內層的div有一個名為note-editable的類。在這個div里面是你的輸入元素。 note-editable div是summernote認為是實際的富文本編輯器，而不是輸入元素。 也就是說，您仍然可以單擊輸入元素並輸入您想要的任何內容。

Summernote將一些事件監聽器放在onkeydown事件上（請參閱此處的文檔） ，因為它是一個富文本編輯器，它似乎正在檢查空格鍵字符（其中包括enter哪個成為新段落）以便它可以在HTML（空格變為  ）。 因為即使您在input元素中進行技術輸入，您也會在note-editable div中input內容，因此這個按鍵將被summernote捕獲，它似乎將轉義的空格字符放在div中，而不是放在輸入中。 這會導致文本放在輸入元素上方。 您會注意到當光標位於輸入元素上方時可以使用ctrl+A來突出顯示此可編輯div中的所有內容，您甚至可以刪除輸入元素。

我的建議是完全刪除input元素，只使用包含div，因為這似乎是最常見的用例場景。 你也可以嘗試重寫onkeydown事件監聽器並將空間附加到輸入內部，但這似乎是一種非常迂回的方式來嘗試解決一些不需要解決的問題。

編輯：看起來像summernote克隆了被指定為富文本編輯器的節點，該編輯器最終將刪除所述元素上的任何事件偵聽器，包括其子元素，因此在初始化summernote之前不能覆蓋文本輸入元素的keydown事件。 嘗試通過initnote的init配置為keyDown事件提供覆蓋回調是可能的，但是非常難看，並且由於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會在初始化之前自動復制“rich-text-editor-be-be”的所有內容，然后用display:none隱藏它們，所以只需嘗試用$('#richTextInput')引用輸入沒有用，因為你會抓住隱藏的輸入。

怪癖：您會注意到，如果您嘗試使用此代碼，則summernote將嘗試自動為實際的富文本編輯器div提供焦點，這是由summernote注冊的事件偵聽器中提供的行為引起的。 你可以通過提供這樣的超時來解決這個問題：

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

正如我之前所說的，這實際上不是一個好的解決方案，雖然它可以解決問題，但我認為最好的方法是完全拋棄文本輸入，只是初始化一個div或textarea而沒有任何嵌套在庫中的內容。 這樣做會更容易，然后相應地設計它們。 使用材料設計樣式/組件可能無法很好地協同工作，因為材料需要輸入或textarea元素和summernote將textarea轉換為div，但這是一個不同的問題。

Answer 4

也許解決方案很簡單。 <div contenteditable="true">創建了父級（也許你不需要<input> ），實際上發生了RICH-EDITING。

1）airmode ON： https ：//jsfiddle.net/hwd5efe0/13/
2）airmode OFF： https ：//jsfiddle.net/hwd5efe0/18/

（ps只改了JS）