Question

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

重现我的问题的步骤是：

输入“这是第一个标记。”
双击“first”一词。
选择“first”后，单击工具栏中的“ENGAGE”按钮。
请注意，“first”一词用黄色突出显示。这是我期望的行为。
现在，输入“这是第二个标签”。在富文本编辑器中的现有文本之后。
双击“second”一词。
选择“second”后，单击工具栏中的“ENGAGE”按钮。
请注意，富文本编辑器中的文本会搞乱。

我希望“第二个”这个词也能突出显示，并且在我第一次使用时会自动应用我的自定义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);          
          }
        });
      }
    }      
  });  
});

我认为它的效果如你所愿，但我确定你可以稍微优化一下。：）

好的，这是我的JSFiddle

Greez Eldo.Ob

在Summernote中获取所选内容

1 个答案: