在Summernote中获取选定内容

Getting Selected Content in Summernote

本文关键字：获取 Summernote      更新时间：2023-09-26

我在一个页面中使用了Summernote富文本编辑器。我正在尝试在编辑器中对选定的文本进行一些自定义。我可以成功地将我的自定义应用于我选择的第一个项目。然而，它在随后的项目上失败了。我已经创建了一个Fiddle，可以在这里找到。

重现我的问题的步骤如下:

  1. 输入"This is the first tag."
  2. 双击单词"first"
  3. 选中单词"first"后，点击工具栏中的"ENGAGE"按钮。
  4. 请注意，单词"first"是用黄色突出显示的。这是我期望的行为。
    5. 现在，在富文本编辑器的现有文本后输入"This is the second tag."。
  5. 双击单词"second"
  6. 选择"秒"后，点击工具栏中的"ENGAGE"按钮。
  7. 请注意，富文本编辑器中的文本变得一团糟。

我希望单词"second"也能突出显示，并应用我的自定义HTML属性，就像我第一次这样做时发生的那样。再一次，Fiddle在这里，相关代码如下所示:

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

为什么这个不行?我做错了什么?

我通过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

相关文章：