jQuery Summernote 自定义按钮功能

Posted 2023-03-22

【中文标题】jQuery Summernote 自定义按钮功能

【英文标题】：jQuery Summernote custom button function

【发布时间】：2015-06-20 08:15:43

【问题描述】：

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

我在Summernote WYSIWYG Editor 中创建了一个自定义按钮，但我似乎无法让我的功能在插件中正常工作。

我希望用户能够突出显示（或使用光标选择）编辑器中的任何文本，然后单击我的自定义按钮，该按钮会将所选文本包装在带有特殊类别“snote”的span 标签中. 现在我可以用该类将所选内容包装在 span 标签中，但编辑器中的所有格式都会被删除。 任何人都可以帮助将选定的文本包含在 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);
        );
     ,

);

【问题讨论】：

这不是一个完整的解决方案，因为它摆脱了所有 <p> 标记和整个 <ol> 标记，但这是我到目前为止所得到的：jsfiddle.net/cm910t89/27跨度>

这有帮助。谢谢。如果您还可以保持相同的格式，那么您就赢了！

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

【参考方案1】：

由于$('.note-editable') 是一个文本区域，当您调用.text() 时，它只会获取元素的文本，而丢失插件summernote 添加的所有html，以便为您很好地显示。

您不需要所有代码来替换突出显示的文本。事实上，您所需要的只是您创建的 range 对象！与他一起，您调用.deleteContents() 清除选定范围，然后调用.insertNode(node) 插入带有文本的动态创建范围：

$('#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。

【讨论】：

它仍然会丢失突出显示区域内的格式

是否应该添加一些验证以防止用户在可编辑区域之外编辑文本？

【参考方案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 中有除 Text 以外的其他 HTML 节点。

【参考方案3】：

我没有用过 SummerNote，但看看小提琴，它是一个将 textarea 转换为 contenteditable div 的包装器。因为它是一个 div，所以使用<p> 和<br> 标签保留了间距，所以要保持格式，你只需要获取innerHTML 而不是Text。 +Denis Ali 的答案应该可以工作，因为它将标签准确地留在它们所在的位置，并且只会删除/重新注入选定的部分。

您可以使用 innerHTML (JS) 或 $().html() (Jq) 来获取格式化的内容，而不是 .text，但如果 +Denis 或这个都不起作用，则必须有其他东西产生影响。丹尼斯的应该可以根据你的小提琴和图书馆工作。