Stop summernote from wrapping text in tags

I want to stop summernote from wrapping text inside paragraph tags before inserting to database, particularly the first opening tag and the last closing tag of the text (if there are many p tags), either with some summernote configuration, php, or jQuery. I have seen several similar questions, but they do not solve my problem.

Any time I style some text, the summernote place the text in a p tag before applying the styles or if the text is copied from other sources, the summernote place the text inside the p tag. If the p tag does not contain any attribute, I can simply use str_replace to remove it, but if it contain some attributes like or or , the tag become becomes difficult to remove for me.

Kindly assist. Thank you.

Solution

OK, I have to confess something: I misread your title. I though you mean that text inside a  tag was wrapping, and you didn't want this. Instead you meant that the text was literally wrapped within a  tag.

Since you never attempted to explain why you want to remove the  tag, I never caught this misunderstanding. I still don't know why you want to remove the  tag.

You should realize that if you remove ... that this will also remove that style. I doubt that's really what you want.

My best guess is that the  tag does something in your layout that you don't want. The default style of a  tag is something like this:

p {
  display: block; 
  margin: 0 0 1em 0; 
}

You can overwrite this default with your own CSS. So if you add the code snippet below in the head of your HTML page, your  tag will not show any of the behaviors that you don't want.

<style>

p {
  display: inline; 
  margin: 0; 
}

</style>

However, this will now apply to all  tags in your HTML page, that is, inside the summernote editor and everywhere else. That might also be something you don't want. If that's the case you can use a class to select in which portions of your page you want to alter the  tag, like this:

<style>

.summernote-content p {
  display: inline; 
  margin: 0; 
}

</style>

Now every  tag that's nested inside a <div class="summernote-content"></div> tag will use the modified style, and any  tag outside will not. So see this working, try this code snippet:

.summernote-content p {
  diaplay: inline;
  margin: 0;
}

<p>This is text outside of the div <span style="color:blue;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</span></p>
<p>This is also text outside of the div <span style="color:blue;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</span></p>
<div class="summernote-content">
  <p>This is text inside of the div <span style="color:blue;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</span></p>
  <p>This is also text inside of the div <span style="color:blue;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</span></p>
  <p>This is again text inside of the div <span style="color:blue;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</span></p>
</div>
<p>This is again text outside of the div <span style="color:blue;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</span></p>
<p>This is yet again text outside of the div <span style="color:blue;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</span></p>

Note how the margin is no longer present inside the <div></div> tag.

Any styling of the  tag can be changed this way, which means you don't need to remove this tag. You shouldn't remove it anyway because it is needed to hold styles.

Stop summernote from wrapping text in <p></p> tags