функция кнопки на jQuery Summernote на заказ

у меня есть jsFiddle здесь ->http://jsfiddle.net/cm910t89/2/

Я создал пользовательскую кнопку в Summernote WYSIWYG редактор и я не могу заставить свою функцию работать должным образом внутри плагина.

Я хочу, чтобы пользователь мог выделить (или выбрать с помощью курсора) любой текст в редакторе, а затем нажмите мою пользовательскую кнопку, которая обернет этот выбранный текст в span тег со специальным классом 'snote'.

прямо сейчас я могу обернуть выбранный тег 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);
        });
     },

});
11
button jquery summernote toolbar

3 ответов

С $('.note-editable') является textarea, когда вы вызываете .text() он получит только текст для элемента, потеряв весь html, который плагин summernote добавляет, чтобы показать красиво для вас.

вам не нужен весь этот код для замены выделенного текста. На самом деле, все, что вам нужно, это вы создали! С ним вы звоните .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);
});

здесь работает скрипка.

7

попробуй такое

$('#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 вместо этого, потому что у вас есть другой HTML-узел, отличный от текста в вашем TextArea.

1

Я не использовал SummerNote, но, глядя на скрипки, это обертка, преобразующая textarea в contenteditable div. Поскольку это div, интервал сохраняется с <p> и <br> теги, поэтому для сохранения форматирования вам просто нужно получить innerHTML в противоположность Text. Ответ от + Denis Ali должен работать, поскольку он оставляет теги точно там, где они есть, и только удаляет/повторно вводит выбранную часть.

можно использовать innerHTML (JS-файлы) или $().html() (Jq), чтобы получить отформатированный содержание вместо .текст, но если ни + Denis, ни это не работает, должно быть что-то еще, оказывающее влияние. Денис должен был работать на основе вашей скрипки и библиотек.

0