web-dev-qa-db-fra.com

fonction du bouton personnalisé jQuery Summernote

J'ai un jsFiddle ici -> http://jsfiddle.net/cm910t89/2/

J'ai créé un bouton personnalisé dans Summernote WYSIWYG Editor et je n'arrive pas à faire en sorte que ma fonction fonctionne correctement dans le plug-in. 

Je souhaite que l'utilisateur puisse mettre en surbrillance (ou sélectionner à l'aide de son curseur) tout texte de l'éditeur, puis cliquer sur mon bouton personnalisé pour envelopper le texte sélectionné dans une balise span avec une classe spéciale de 'snote'. 

À l'heure actuelle, je peux envelopper la sélection dans une balise span avec cette classe, mais toute la mise en forme de l'éditeur est effacée.

Quelqu'un peut-il aider à ce que le texte sélectionné soit enveloppé dans la balise span ET que la mise en forme reste la même?

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

});
jquerybuttontoolbarsummernote
11
Sanya

Puisque $('.note-editable') est une zone de texte, lorsque vous appelez .text(), il n’obtient que le texte de l’élément, ce qui permet de perdre tout le code HTML ajouté par le plugin summernote.

Vous n'avez pas besoin de tout ce code pour remplacer le texte en surbrillance. En fait, tout ce dont vous avez besoin est cet objet range que vous avez créé! Avec lui, vous appelez .deleteContents()pour effacer la plage sélectionnée, puis appelez .insertNode(node) pour insérer une étendue dynamique créée avec le texte:

$('#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);
});

Voici travailler violon .

7
Denis Ali

Essaye ça

$('#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);
});

J'ai utilisé la variable anchorNode à la place, car vous avez un autre nœud HTML autre que Text dans votre TextArea.

1
Alvin Magalona

Je n'ai pas utilisé SummerNote, mais en regardant les violons, c'est un wrapper qui convertit textarea en un div contenteditable. Comme il s'agit d'une div, l'espacement est préservé avec les balises <p> et <br>. Par conséquent, pour conserver le formatage, il vous suffit d'obtenir la valeur innerHTML au lieu de Text. La réponse de + Denis ALi devrait fonctionner, car elle laisse les balises exactement où elles se trouvent et supprime/réinjecte uniquement la partie sélectionnée. 

Vous pouvez utiliser innerHTML (JS) ou $().html() (Jq) pour obtenir le contenu mis en forme au lieu de .text, mais si ni + Denis ni cela ne fonctionne, il doit exister un autre impact. Denis aurait dû travailler avec votre violon et vos bibliothèques.

0
TechnicalChaos