CODEWITHSUNDEEP
htmlangularjssummernote
Santhoshkumar
Santhoshkumar

Reputation: 780

How to remove <p><br></p> tags in summernote value?

While entering space in staring am getting following code from summernote textarea,

<p><br></p><p><br></p><p><strong style="font-family: &quot;Open Sans&quot;, Arial, sans-serif; text-align: justify;">Lorem Ipsum</strong><span style="font-family: &quot;Open Sans&quot;, Arial, sans-serif; text-align: justify;">&nbsp;is simply dummy text of the printing and typesetting industry. </span><br></p><p><br></p><p><br></p>

but i want to remove the starting <p><br></p><p><br></p> before storing to db.

for example i want to store like below,

<p><strong style="font-family: &quot;Open Sans&quot;, Arial, sans-serif; text-align: justify;">Lorem Ipsum</strong><span style="font-family: &quot;Open Sans&quot;, Arial, sans-serif; text-align: justify;">&nbsp;is simply dummy text of the printing and typesetting industry. </span><br></p>

Upvotes: 4

Views: 23769

Answers (10)

Konrad Stępień
Konrad Stępień

Reputation: 19

For jQuery

$('.summernote').summernote({
    height: [your-height],
    callbacks: {
        if($(this).summernote('isEmpty')){
            onInit: function (c) {
                c.editable.html('');
            }
        }
    }
});

If the summernote textarea is empty, it gets cleared (P and BR tags removed)

Upvotes: 1

almo
almo

Reputation: 6367

I use this callback which even works if you have several summernotes on your page:

$('.summernote').summernote({
  height: 150,
  toolbar: [
      ['style', ['bold', 'italic', 'underline', 'clear']],
      ['fontsize', ['fontsize']],
      ['color', ['color']],
      ['insert', ['link']]
  ],
  callbacks: {
    onChange: function(contents) {
      if (contents == '<p><br></p>') {              
        var currentSummernoteInstance = $(this);
        currentSummernoteInstance.summernote('code', '');
      }
    }
  }
})

Upvotes: 0

Zain Ahmad Chattha
Zain Ahmad Chattha

Reputation: 79

If you want to remove just leading/start tags then use it with regular expression otherwise it also removes other tags that are not leading/start tags and you can also remove ending/trainling tags by using single loop.

let value='<p><br></p><p><br></p><p><strong style="font-family: &quot;Open Sans&quot;, Arial, sans-serif; text-align: justify;">Lorem Ipsum</strong><span style="font-family: &quot;Open Sans&quot;, Arial, sans-serif; text-align: justify;">&nbsp;is simply dummy text of the printing and typesetting industry. </span><br></p><p><br></p><p><br></p>';


while(value.startsWith('<p><br></p>') || value.endsWith('<p><br></p>')){
     
    value=value.replace(new RegExp('^<p><br></p>'),'').trim();
      
    value=value.replace(new RegExp('<p><br></p>$'),'').trim();
}

Upvotes: 0

Rajesh Lohith
Rajesh Lohith

Reputation: 446

Implement this callback. You will be left with one pair of <p><be></p> which is fine as per the documentation. OnBlur, you are just resetting the Summernote so that it will remove all other leftover tags.

See the documentation here:

isEmpty Returns whether editor content is empty or not. The editing area needs <p><br></p> for focus, even if the editor content is empty. So Summernote supports this method for helping to check if editor content is empty.

onBlur: function (contents) {
  if (
    $($('#body-summernote').summernote('code')).text().trim().length < 1
  ) {
    console.log(
      $($('#body-summernote').summernote('code')).text().trim().length
    );
    console.log('clearing');
    // $('#body-summernote').html('');
    $('#body-summernote').summernote('reset');
  }
},

Upvotes: 0

Steven Morales
Steven Morales

Reputation: 11

The best way is to do this:

$('.summernote_add').summernote({
    height: 250,
    callbacks: {
        onChange: function (contents) {
            if ($('.summernote_add').summernote('isEmpty')) {
                $(".add .panel-body").html('');
            } else {
                $(".add .panel-body").val(contents);
            }
            // $('.summernote_add').val(
            //     $('.summernote_add').summernote('isEmpty')
            //         ? null
            //         : contents
            // );
            summernoteValidatorAdd.element($('.summernote_add'));
        }
    }
});

Upvotes: 1

Egli Becerra
Egli Becerra

Reputation: 1040

This worked for me! had to do it just now

callbacks: {
  onFocus: function (contents) {
    if($(this).summernote('isEmpty')){
      $("<your-selector>").html(''); //either the class (.) or id (#) of your textarea or summernote element
    }
  }
}

Upvotes: 0

Robson Douglas
Robson Douglas

Reputation: 9

Use the following:

$('#summernote').summernote('code', '<text H>');

Instead of:

$('#summernote').summernote('editor.insertText', '<text H>'));

Upvotes: 0

Niaz Muhammad
Niaz Muhammad

Reputation: 49

callbacks: {
  onFocus: function (contents) {
    if($('.summernote').summernote('isEmpty')){
      $(".summernote").html(''); 
    }
  }
}

Upvotes: 2

jitender
jitender

Reputation: 10429

If you are sure about the pattren than You can achieve it something like

var data='<p><br></p><p><br></p><p><strong style="font-family: &quot;Open Sans&quot;, Arial, sans-serif; text-align: justify;">Lorem Ipsum</strong><span style="font-family: &quot;Open Sans&quot;, Arial, sans-serif; text-align: justify;">&nbsp;is simply dummy text of the printing and typesetting industry. </span><br></p><p><br></p><p><br></p>';
while(data.startsWith('<p><br></p>')){
data=data.replace('<p><br></p>','')
}

while(data.endsWith('<p><br></p>')){
data=data.replace(new RegExp('<p><br></p>$'),'')
}
console.log(data)

Upvotes: 1

Ismail Farooq
Ismail Farooq

Reputation: 6837

Just remove the empty element

$("p").each(function(){
    if (!$(this).text().trim().length) {
        $(this).remove();
    }
});

https://jsfiddle.net/ox32tjwg/

Upvotes: 0

Related Questions