Получение выбранного содержания в Summernote

Question

Я использую Summernote rich text editor на странице. Я пытаюсь сделать некоторые настройки для выбранного текста в редакторе. Я могу успешно применить свои настройки в первом элементе, который я выбираю. Однако он не подходит для последующих элементов. Я создал Fiddle, который доступен here.

шаги, чтобы воспроизвести мою проблему, являются:

1. Enter "Это первый тег."
2. Дважды щелкните по слову «первым».
3. С выбранным словом «first» нажмите кнопку «ENGAGE» на панели инструментов.
4. Обратите внимание, что слово «первым» выделено желтым цветом. Это поведение, которое я ожидаю.
5. Теперь введите «Это второй тег». после существующего текста в текстовом редакторе.
6. Дважды щелкните по слову «второй».
7. Выбрав слово «второй», нажмите кнопку «ENGAGE» на панели инструментов.
8. Обратите внимание, что текст в текстовом редакторе становится все испорченным.

Я ожидал, что слово «второе» также будет выделено, и применим мой собственный атрибут HTML, как это произошло, когда я сделал это в первый раз. Еще раз, скрипка here и соответствующий код выглядит следующим образом:

var myEditor = $('#myEditor'); 
$(myEditor).summernote({ 
    height:200, 
    toolbar: [ 
    ['style', ['bold', 'italic', 'underline', 'clear']], 
    ],  
    callbacks: { 
    onInit: function() { 
     var customButton = '<div class="note-file btn-group">' + 
     '<button id="myButton" type="button" class="btn btn-default btn-sm btn-small" title="My Trigger" tabindex="-1">engage</button>' + 
     '</div>'; 
     $(customButton).appendTo($('.note-toolbar')); 

     $('#myButton').click(function(event) { 
     var editor = $('#myEditor'); 
     if (editor.summernote('isEmpty') === false) { 
      var r = editor.summernote('createRange'); 
      var c = editor.summernote('code'); 

      var s1 = c.substring(0, r.so); 
      var s2 = '<span style="background-color:yellow;" data-tag-index="' + tags.length +'">' + r.toString() + '</span>'; 
      tags.push(r.toString()); 
      var s3 = c.substring(r.eo);       

      var modified = s1 + s2 + s3; 
      $('#myEditor').summernote('code', modified);      

      $('#results').val(modified); 
     } 
     }); 
    } 
    }  
}); 

Почему это не работает? Что я делаю не так?

Answer 1

Я посмотрел в ряд для некоторых функций в консоли с помощью console.log (r); и я нашел эту полезную функцию pasteHTML().

Вам просто нужно создать диапазон через var r = editor.summernote('createRange');, а затем позвонить r.pasteHTML(). Затем автоматическая замена summernote заменяет выбранный текст вашим HTML.

Так что мое решение это:

var tags = []; 

$(document).ready(function() { 
    $(function() { 
    $.material.init(); 
    }); 


    var myEditor = $('#myEditor'); 
    $(myEditor).summernote({ 
    height:200, 
    toolbar: [ 
     ['style', ['bold', 'italic', 'underline', 'clear']], 
    ],  
    callbacks: { 
     onInit: function() { 
     var customButton = '<div class="note-file btn-group">' + 
      ' <button id="myButton" type="button" class="btn btn-default btn-sm btn-small" title="My Trigger" tabindex="-1">engage</button>' + 
      '</div>' 
     ; 
     $(customButton).appendTo($('.note-toolbar')); 

     $('#myButton').click(function(event) { 
      var editor = $('#myEditor'); 
      if (editor.summernote('isEmpty') === false) { 
      var r = editor.summernote('createRange'); 
      tags.push(r.toString()); 
      r.pasteHTML('<span style="background-color:yellow;" data-tag-index="' + tags.length +'">' + r.toString() + '</span>'); 
      var c = editor.summernote('code');    
      $('#results').val(c);   
      } 
     }); 
     } 
    }  
    }); 
}); 

Я думаю, что это работает, как вам нравится, но я уверен вы можете оптимизировать его немного. :)

Ok вот мой JSFiddle

Greez Eldo.Ob