jQuery Summernote 自定义按钮功能

Question

我在这里有一个jsFiddle -> http://jsfiddle.net/cm910t89/2/

我在Summernote WYSIWYG编辑器中创建了一个自定义按钮，但似乎无法使插件内的函数正常工作。

我希望用户能够在编辑器中突出显示（或使用光标选择）任何文本，然后单击我的自定义按钮，该按钮将使用特殊类'snote'将所选文本包装在标签中。

目前，我可以使用该类将所选内容包装在标签中，但编辑器中的所有格式都会被清除。

有人能帮忙让所选文本包含在span标签中并且保留格式吗？

jsFiddle -> http://jsfiddle.net/cm910t89/2/

$(document).ready(function() {
var editor = $('#summernote');
editor.summernote({
    height: ($(window).height() - 250),
    focus: false,
    toolbar: [
            ['style', ['bold', 'italic', 'underline', 'clear']],
            ['font', ['strikethrough']],
            ['fontsize', ['fontsize']],
            ['para', ['ul', 'ol', 'paragraph']],
            ['height', ['height']],
            ['view', ['fullscreen', 'codeview']],
        ],
    oninit: function() {
        // Add "open" - "save" buttons
        var noteBtn = '<button id="makeSnote" type="button" class="btn btn-default btn-sm btn-small" title="Identify a music note" data-event="something" tabindex="-1"><i class="fa fa-music"></i></button>';            
        var fileGroup = '<div class="note-file btn-group">' + noteBtn + '</div>';
        $(fileGroup).appendTo($('.note-toolbar'));
        // Button tooltips
        $('#makeSnote').tooltip({container: 'body', placement: 'bottom'});
        // Button events
        $('#makeSnote').click(function(event) {
            var highlight = window.getSelection(),  
            spn = '<span class="snote" style="color:blue;">' + highlight + '</span>',
            text = $('.note-editable').children('p').text(),
            range = highlight.getRangeAt(0),
            startText = text.substring(0, range.startOffset), 
            endText = text.substring(range.endOffset, text.length);

            $('.note-editable').html(startText + spn + endText);
        });
     },

});

- Sanya

---

这不是一个完整的解决方案，因为它会删除所有的<p>标签和整个<ol>标签，但这是我目前所拥有的：http://jsfiddle.net/cm910t89/27/ - RevanProdigalKnight

这很有帮助。谢谢。如果您还能保持相同的格式，那就太好了！ - Sanya

请注意，onInit函数必须在回调部分中调用：https://summernote.org/deep-dive/#oninit - Chud37

Answer 1

自从$('.note-editable')是一个文本区域时，当您调用.text()时，它只会获取元素的文本，失去了插件summernote添加的所有HTML以便为您显示漂亮。

您不需要所有那些代码来替换高亮文本。实际上，您只需要那个range对象！使用它，您可以调用.deleteContents()来清除所选范围，然后调用.insertNode(node)来插入一个动态创建的带有文本的span标签：

$('#makeSnote').click(function(event) {
     var highlight = window.getSelection(),  
         spn = document.createElement('span'),
         range = highlight.getRangeAt(0)

     spn.innerHTML = highlight;
     spn.className = 'snote';  
     spn.style.color = 'blue';

     range.deleteContents();
     range.insertNode(spn);
});

这里是一个可运行的fiddle代码示例：链接。

- Denis Ali

---

它仍然在高亮区域内失去了格式。 - RevanProdigalKnight

应该添加一些验证以防止用户编辑可编辑区域之外的文本吗？ - Musma

Answer 2

试试这个

$('#makeSnote').click(function(event) {
    var highlight = window.getSelection(),  
    spn = '<span class="snote" style="color:blue;">' + highlight + '</span>',
    text = $(highlight.anchorNode).text(),
    range = highlight.getRangeAt(0),
    startText = text.substring(0, range.startOffset), 
    endText = text.substring(range.endOffset, text.length);
    $(highlight.anchorNode).replaceWith(startText + spn + endText);
});

我使用了anchorNode，因为你的TextArea中除了文本以外还有其他HTML节点。

- Alvin Magalona

Answer 3

我没有使用过SummerNote，但是从fiddles中看来，它是将textarea转换为contenteditable div的包装器。由于它是一个div，所以通过<p>和<br>标签保留了间距，因此要保留格式，只需要获取innerHTML而不是Text。+Denis Ali的答案应该有效，因为它确切地保留了标签，只删除/重新注入选定部分。

您可以使用innerHTML(JS)或$().html()(Jq)获取格式化内容，而不是使用.text，但如果既不是+Denis也不是这个方法，请检查是否还有其他影响因素。根据您提供的fiddle和库，Denis的方法应该可行。

- TechnicalChaos