Count characters from a summernote class textarea. It does not count CSS characters, for example <b>

Asked

Viewed 164 times

0

I have a character counter that works well for text without special conditions, for example a text without bold none works very well, however ,if I put bold in the text, the counter does not recognize the <b>, and so the substitution does not work, because the starting point and end point are incorrect. How can I count the characters that are hidden, such as characters that make text bold?

$j2(document).on("change", ".abre", function(evt){

var selection = document.getSelection('#m_summernote_1');
//conta inicio da palavra selecionada
var start5 = selection.anchorOffset;
//conta final da palavra selecionada
var finish5 = selection.focusOffset;

//texto que irá substituir a palavra seleciona
var textot = $j2("#valor option:selected").val();

//texto completo do textarea
var textoc = $j2('#m_summernote_1').val();

//aqui eu limpo o texto original , apagando a partir do ponto incicial start5 e finish5
var delText = textoc.substr(0,start5)+''+textoc.substr(finish5);

// aqui coloco o texto que irá substituir a palavra selecionada
var addText = textoc.substr(0,start5)+textot+delText.substr(start5);

//aqui eu substituo o texto do textarea
$("#m_summernote_1").summernote("code", addText);
});
php javascript jquery

  • var textoc = $j2('#m_summernote_1').text();

  • opa, the change of val by text in this case has not changed at all, because the text it is picking full. what seems to have some incompatibility would be at this point: var Selection = Document.getSelection('#m_summernote_1'); //start account of the selected word var start5 = Selection.anchorOffset; //end account of the selected word var finish5 = Selection.focusOffset; maybe anchorOffSet and focusOffSet don’t recognize the text with the special characters, for example they don’t count the initial <b> of a text.

1 answer

0

You need to listen to the event onChange of the very instance of summernote that in turn will pass you 2 parameters via callback contents and $editable, where Contents is the string with the html tags and the string in hand just call the lenght to count the number of characters in it.

With that in mind follows the example of own documentation

$('#m_summernote_1').summernote({
    callbacks: {
        onChange: function(contents, $editable) {
            console.log(contents);
            console.log('Tamanho da string: ', contents.length);
            // console.log('onChange:', contents, $editable);
            // restante de sua lógica aqui...
        }
    }
});

Or if you have already instantiated summernote you can listen to the custom event that the plugin emits. See:

// summernote.change
$('#m_summernote_1').on('summernote.change', function(we, contents, $editable) {
    console.log(contents);
    console.log('Tamanho da string: ', contents.length);
    // console.log('onChange:', contents, $editable);
    // restante de sua lógica aqui...
});

Browser other questions tagged php javascript jquery

You are not signed in. Login or sign up in order to post.