content - Función de botón personalizado jQuery Summernote

summernote get content

Question

Tengo un jsFiddle aquí -> http://jsfiddle.net/cm910t89/2/

Creé un botón personalizado en Summernote WYSIWYG Editor y parece que mi función no funciona correctamente dentro del complemento.

Quiero que el usuario sea capaz de resaltar (o seleccionar usando su cursor) cualquier texto dentro del editor y luego hacer clic en mi botón personalizado, que ajustará ese texto seleccionado en una etiqueta span con una clase especial de ''snote''.

Ahora mismo puedo envolver el seleccionado en una etiqueta span con esa clase, pero todo el formato dentro del editor se borra.

¿Alguien puede ayudar para que el texto seleccionado quede envuelto en la etiqueta span y el formato siga siendo el mismo?

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

});

Answer 1

Como $(''.note-editable'') es un área de texto, cuando llamas a .text() obtendrá solo el texto para el elemento, perdiendo todo el html que el complemento summernote agrega para mostrarlo bien.

No necesita todo ese código para reemplazar el texto resaltado. ¡De hecho, todo lo que necesitas es ese objeto de range que has creado! Con él, usted llama a .deleteContents() para borrar el rango seleccionado y luego llama a .insertNode(node) para insertar un tramo dinámico creado con el texto:

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

Aquí está trabajando el violín .

Answer 2

Prueba esto

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

En anchorNode lugar, anchorNode el anchorNode , porque tienes otro nodo HTML que no sea texto en tu área de texto.

Answer 3

No he usado SummerNote, pero mirando los violines, es un contenedor que convierte textarea en div satisfactorio. Como es un div, el espaciado se conserva con las etiquetas <p> y <br> , por lo que para seguir formateando solo necesita obtener el innerHTML en lugar del Text . La respuesta de + Denis Ali debería funcionar ya que deja las etiquetas exactamente donde están y solo elimina / reinyecta la parte seleccionada.

Puede usar innerHTML (JS) o $().html() (Jq) para obtener el contenido formateado en lugar de .text, pero si ninguno de los + de Denis o esto funciona, tiene que haber algo más que tenga un impacto. Denis debería haber funcionado según tu violín y tus bibliotecas.