Search code examples
froala

How to remove the styling from a newly generated P tag in Froala editor?


When generating a new P tag, the styles from the previous P are taken into consideration in froala editor. How can we prevent this behavior? Right now I'll have to request the user to change the P tag to a DIV so that the default block generated will not get the style. But it is a bit painful.

Code inside the preview of the froala:

<p style="color: red;">hello there</p>

The next P tag generated will have the same style applied even if I don't want it. Is there any way to achieve this?


Solution

  • So after trying multiple ways, we can prevent the styling to take over the next element by adding empty P tag at the end of the content each time we add some styling.

    this.editorInstance.html.insert(`<p style="color:red">A block element</p><p></p>`);
    

    By adding an empty P tag, we create a new block without any styles.