Fonction de bouton personnalisé jQuery Summernote

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

J'ai créé un bouton personnalisé dans Summernote de l'Éditeur WYSIWYG et je n'arrive pas à obtenir ma fonction fonctionne correctement à l'intérieur du plugin.

Je veux que l'utilisateur soit en mesure de mettre en évidence (ou sélectionnez-les à l'aide de son curseur) n'importe quel texte dans l'éditeur, puis cliquez sur mon bouton personnalisé qui se terminera que le texte sélectionné dans un span de la balise avec une classe spéciale de "snote'.

Droit maintenant, je peux enrouler sélectionnés dans une balise span avec cette classe, mais l'ensemble de la mise en forme au sein de l'éditeur est effacée.

Quelqu'un peut-il aider à ce que le texte sélectionné s'amalgament dans la balise span ET 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);
        });
     },

});

source d'informationauteur Sanya

  1. 7

    Depuis $('.note-editable') est un textarea, lorsque vous appelez .text() il obtiendra seulement le texte de l'élément, de perdre tout le code html que le plugin summernote est l'ajout de montrer bien pour vous.

    Vous n'avez pas besoin de ce code pour remplacer le texte en surbrillance. En fait, vous n'avez besoin que range objet que vous avez créé! Avec lui, vous appelez .deleteContents()pour effacer la plage sélectionnée et ensuite appeler .insertNode(node) pour insérer une dynamique créée span 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 de travail violon.

  2. 1

    Essayer cette

    $('#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é le anchorNode au lieu de cela, dans la mesure où vous avez d'autres HTML Nœud autre que votre Texte dans le TextArea.

  3. 0

    Je n'ai pas utilisé SummerNote mais en regardant les violons, c'est un wrapper de la conversion textarea pour un contenteditable div. Comme c'est un div, l'espacement est conservé avec <p> et <br> balises, de manière à conserver le formatage vous avez juste besoin de la innerHTML par opposition à la Text. La réponse de +Denis Ali devrait fonctionner comme il laisse les balises exactement où ils sont et ne supprime/réinjecte la partie sélectionnée.

    Vous pouvez utiliser innerHTML (JS) ou $().html() (Jq) pour obtenir le contenu mis en forme au lieu de .le texte, mais si ni +Denis ou cela fonctionne, il doit être quelque chose d'autre ayant un impact. Denis devrait avoir a travaillé sur la base de votre violon et de bibliothèques.