6

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
}
  • Inline elements are supposed to only exist within block-level elements. Redactor is just correcting your html to make it valid. Just ensure your image element is within another block-level element like <figure> or <div> and Redactor won't add <p>. – Seth Warburton Aug 31 '16 at 8:32
  • Thanks, but inline elements can exist without a parent block level element (i.e., an inline element with its parent being the <body> tag). And either way, the image and caption were inside several nested block-level elements. – Phil Gyford Sep 1 '16 at 10:31
8

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
}
  • Thanks, but I'm still getting the <p> tags with those settings... – Phil Gyford May 22 '15 at 13:11
  • Strange, on Slack you just said this works for you @Phil? – carlcs May 22 '15 at 13:31
  • This is strange... I swear that didn't work... then something like it did, but I was getting <br>s appearing at the end, so I had to deny those tags (as in the answer I've posted here). But now I try again... this answer works (although replaceDivs isn't needed). – Phil Gyford May 22 '15 at 13:48
  • Months on... the trouble with this is that it allows for linebreaks. If I switch linebreaks to false too, then sometimes I get <p> tags surrounding the text. Doesn't always happen but it's tough to get rid of them when it does. – Phil Gyford Dec 9 '15 at 19:25
5

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.

  • That does work, although so does the other answer, marked correct. – Phil Gyford May 22 '15 at 13:48
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
}
  • 1
    This should be the accepted answer! Thanks! – Fred Oct 3 '19 at 14:31
1

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.

  • Making this change by not editing redactor.js seemed to be a bit more easy. Just create your own plugin, in this case 'block' and 'link' ( I transffered the existing code from redactor.js to my custom plugin). In case of redactor upgrade your work would not be overridden and if need you can make changes to it accordingly. – IColorfield Jan 6 '16 at 21:53
1

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.