Question

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

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

我希望用户能够突出显示（或选择使用光标）编辑器中的任何文本，然后单击我的自定义按钮，该按钮将选定的文本包装在span标记中，并带有特殊的＆＃39; S注＆＃39 ;.

现在我可以将选中的选项包装在该类的span标签中，但编辑器中的所有格式都会被删除。

任何人都可以提供帮助，以便所选文本包含在span标记中并且格式保持不变吗？

jsFiddle - ＆gt; 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);
        });
     },

});

Answer 1

由于$('.note-editable')是一个textarea，当你调用.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。

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中除了Text之外还有其他HTML节点。

Answer 3

我还没有使用过SummerNote但是看着小提琴，它是一个将textarea转换为一个可信的div的包装器。由于它是div，因此使用keys :: Ord k => [k] -> IndexedTraversal' k (Map.Map k a) a keys ks f m = go ks where go [] = pure m go (i:is) = case Map.lookup i m of Just a -> Map.insert i <$> indexed f i a <*> go is Nothing -> go is和<p>标记保留间距，因此为了保持格式化，您只需获取<br>而不是innerHTML 。来自+ Denis Ali的答案应该可以正常工作，因为它会将标签保留在它们所在的位置，并且只删除/重新注入所选部件。

您可以使用Text（JS）或innerHTML（Jq）来获取格式化的内容而不是.text但如果两者都没有+ Denis或者这样，那么必须有一些东西否则会产生影响。丹尼斯应该根据你的小提琴和图书馆工作。

jQuery Summernote自定义按钮功能

3 个答案: