在 Summernote 中获取选定的内容

Question

我在页面中使用Summernote rich text editor。我正在尝试对编辑器中的选定文本进行一些自定义。我可以成功地将我的自定义应用到我选择的第一个项目上。但是，它在后续项目上失败。我创建了一个 Fiddle，可以使用 here。

重现我的问题的步骤是：

1. 输入“这是第一个标签。”
2. 双击“first”一词。
3. 选中“first”一词后，点击工具栏中的“ENGAGE”按钮。
4. 请注意，单词“first”以黄色突出显示。这是我所期望的行为。
5. 现在，输入“这是第二个标签”。在富文本编辑器中的现有文本之后。
6. 双击“秒”一词。
7. 选中“second”一词后，单击工具栏中的“ENGAGE”按钮。
8. 请注意，富文本编辑器中的文本全乱了。

我期待“第二个”这个词也能突出显示，并像我第一次那样应用我的自定义 HTML 属性。再一次，Fiddle 是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);          
          }
        });
      }
    }      
  });  
});

我认为它可以按您喜欢的方式工作，但我相信您可以对其进行一些优化。 :)

好的，这是我的JSFiddle

Greez Eldo.Ob