How can I prevent line breaks?

[clse]

Hello,

I'm using the CKEditor in Craft 5. I'd like to prevent line-breaks/returns so I can have CKEditor fields with a single paragraph/heading but with a single text element. As a former user of Redactor, this was very easily achieved by adding a couple of lines to the config.

I have scoured the Internet for a response but I could not find one.

Please help!

Thanks.

[davebeeldr]

Hi,

This is exactly what we need. Giving the customer the freedom to enlarge or reduce certain images to their liking.
Is this a possibility for the plugin in Craft CMS?

Thanks Dave

[rellafella]

Also looking for this functionality to enable a simple text field that will allow bold, italic and super/subscript but must not contain line breaks or multiple paragraphs.

[rellafella]

@clse and @davebeeldr since I was not able to have any success with either the official CK5 docs, or various techniques preventing the use of enter and shift + enter within the field, I have settled for this workaround at the moment, if you're interested.

Twig funciton extending striptags to save having to output the same set of allowed tags for each field.

I have also coupled this with an instruction on this Rich Text field indicating to authors that it's not designed to have line breaks, this part is obviously where we need to be able to configure the editor to prevent this, but it's the best alternative I have come up with for now.

<?php

namespace modules\sitemodule\twigextensions;

use Twig\Extension\AbstractExtenson;
use Twig\Extension\CoreExtension;
use Twig\TwigFunction;

class SiteModuleExtension extends AbstractExtension
{
    ...
    public function getFunctions(): array
    {
        return [
            ...,
           'singleLineRichText' => new TwigFunction('singleLineRichText', [$this, 'singleLineRichText'], ['is_safe' => ['html']])
        ];
    }

    public function singleLineRichText(string $string): string
    {
        return CoreExtension:striptags($string, '<i><em><b><strong><sub><sup>');
    }
}

then that's just used as

<p>{{ singleLineRichText(entry.richTextField) }}</p>

[gregorydavidjenkins]

I'm looking for the same thing. As my team works through many redactor -> ckeditor migrations we are looking for a way to replace some functionality we used in redactor where we'd have a text field with very limited formatting (bold and italic only, for example). Many times in our templates we would have something like <p>{{ entry.field}}</p>.

Because the content of that field always has it's own <p> tags the browser does the weird <p></p><p>content</p><p></p> thing to try its best to render it.

I'd like to leave my templates as-is rather than wrap them in a function or add a filter to all instances (that's just a bit fragile and adds some technical debt), and there are situations where merely removing the template's paragraph tags isn't enough (because of other markup considerations, classes, etc.). Another problematic case is when the ckeditor content ends up inside of a <h2> (for example).

Because ckeditor really doesn't like not having the text wrapped, it seems like we don't really have a good way of replicating that bare, unwrapped text "natively" within ckeditor. I'm hoping, instead, that we could have some sort of hook to tie into the rendering flow where we could do some arbitrary operations on the content before output.

Somewhere in here, I suppose:

ckeditor/src/data/FieldData.php

Line 175 in 7a366ba

$content = $this->getChunks()->map(fn(BaseChunk $chunk) => $chunk->getHtml())->join('');

I'm thinking a hook of this nature might open up solutions to many unique situations.

[i-just]

Another quick idea is to use an HTML purifier. For example, you can have a minimal CKEditor config allowing only paragraph, bold, italic, superscript and subscript and a purifier config like this one:

{
  "HTML.Allowed": "i, strong, sub, sup"
}

It’s not perfect since you can still use Enter and Shift+Enter in the editor, but after saving the element that contains the CKEditor field, you can see what it will look like on the front end. Additionally, with the above, the wrapping <p> tag is not stored in the database, and the content is only processed on save.