Stop Redactor adding paragraph tags

Question

I'm using a Rich Text field for captions beneath images, so that I can add bold, italic and links. But I'd like the output HTML to be a single line; ie, no block-level tags like <p>, or line breaks. At the moment Redactor automatically adds <p> tags, around a single line of text.

I've tried setting both paragraphize and replaceDivs to false in my Redactor config JSON, as suggested in this answer but that seems to have no effect for me:

{
    buttons: ['bold', 'italic', 'link'],
    minHeight: 50,
    paragraphize: false,
    replaceDivs: false
}

Answer 1

Adding these 2 lines worked for me:

linebreaks: true,
enterKey: false

So the entire config is now:

{
    buttons: ['bold', 'italic', 'link'],
    minHeight: 50,
    paragraphize: false,
    replaceDivs: false,
    linebreaks: true,
    enterKey: false
}

Answer 2

I found that to get rid of <p> tags and stop it appending <br>s to the end of the string, I had to use:

{
    buttons: ['bold', 'italic', 'link'],
    toolbarFixed: true,
    minHeight: 50,
    linebreaks: true,
    deniedTags: ['br'],
    enterKey: false
}

So, no need for paragraphize, but need to stop it printing the <br> tags.

Answer 3

According to docs, you need a breakline: true line in your config like this:

{
    "buttons": [
        "bold",
        "italic",
        "underline",
        "link",
        "html"
    ],
    "plugins": ["fullscreen"],
    "toolbarFixed": true,
    "source": true,
    "breakline": true
}

Answer 4

There seems to be an inherited problem with redactor using the p tag as a default. I struggled to find a solution where I do need p tags and where inserted links were still getting wrapped in p tags.

Setting linebreaks to true and deniedTags results automatically setting "paragraphize" to false and also results in not getting any "br" tags (a bit of a hackish solution considering that there is a "paragraphize" property one can set to "false", doesn't always work (dark magic)).

But this results in my copy that needs to be wrapped in "p" tag not to be wrapped. Of course the editors have no clue what a "p" tag is so the magic of having a WSYWG editor became a horror.

So i opted to enforce a rule that the editors should use "formatting>normal text" from the toolbar. This resulted in a type error on line 902 redactor.js > Uncaught TypeError: Cannot read property 'toLowerCase' of undefined. I scratched my head since this works for Headings and Quotes (Selected text would be wrapped by the heading type selected eg, h1 h2).

After debugging I found that on line 843 in Redactor if (this.opts.linebreaks || tag != 'p') seems to be the culprit. Now not being the architect of the code changing this to if (this.opts.linebreaks || tag == 'p') resulted in everything to work.

Now I can add custom p format with custom class and the selected text would be wrapped accordingly.

The magic = this.block.formatWrap(tag);

Now up to trying to make my inserted links not to be wrapped in a 'p' tag.

The above is a nasty hack and not full proof for future use since upgrading would override the change. I would like to challenge anybody to come up with a better solution.

Answer 5

I know this thread is pretty old, but I just figured out another way to do this you might find helpful. Rather than altering Redactor, at this uses the Twig filter striptags to get rid of unwanted tags.

{{ entry.field | striptags('<a><b><em><strong>') | raw }}

The striptags filter here removes all tags except for from the output. And the raw filter stops escaping the remaining tags so links and formatting shows up.