How do I prevent ckeditor from adding <p> tags?

[DenisPitcher]

Is this a bug report or feature request? (choose one)

Other -

💻 Version of CKEditor

5

📋 Steps to reproduce

I'm using the vuejs CKEditor 5 plugin and am attempting to edit some basic content
<ckeditor :editor="editor" v-model="name" :config="config"></ckeditor>

I'm using a basic classic editor setup

 private editor = ClassicEditor;
  private config: any = {
                toolbar: [ 'heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'blockQuote' ],
                heading: {
                    options: [
                        { model: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph' },
                        { model: 'heading1', view: 'h1', title: 'Heading 1', class: 'ck-heading_heading1' },
                        { model: 'heading2', view: 'h2', title: 'Heading 2', class: 'ck-heading_heading2' }
                    ]
                },
            }; 

The value for name on my model is say "Name". If I change it to "Someone" in the editor it gets adjusted to add paragraph tags so that it becomes "<p>Someone</p>"

How do I prevent CKEditor from wrapping my content in <p> </p> tags?

[Reinmar]

How do you think the output HTML should look like if you have more than one block of content in the editor if you don't want your content to be in <p> tags?

[DenisPitcher]

The challenge is that I'm trying to support legacy code and usecases of a previous version of CKEditor. Since the tags were not added in the earlier version, the HTML where it was used was wrapped in an appropriate tag in the place it was applied rather than within the text itself.

For example, I have a name of a product stored in a database. I want to be able to allow customers to bold and italicize it but that's it. It may be used in a variety of places, occasions where it is just wrapped in a <span> or in other cases where it's wrapped in a <h1>. I don't want to have an additional <p> added within that text that is bound to my element.

[Reinmar]

CKEditor 4 also did autoparagraph stuff by default. There was an option to disable that, though. In CKEditor 5 there's no such option and I'm not sure there will be. It's creating enormous complexity and that's why we decided to not implement it. It greatly simplified the editor's code. It's a similar situation to #617.

However, I don't say it can't be implemented. You could try to somehow mark model paragraphs which were created automatically (during auformatting) so they could be rendered back to the view as some spans. It might work. But it's not a trivial hack.

[DenisPitcher]

Hi Reinmar, thanks for the response.

I was mostly trying to figure out if its possible as I found lots of documentation on how to manage it in the past but none for version 5.

Is there a way to set a default model? I note that if I add a custom model
{ model: 'normal', view: 'span', title: 'normal' }
that if I select it, it overrides the paragraph tags. I just can't figure out if there's an existing setting to change the default from paragraph to something else or if it is something that needs to be specially coded for.

[Reinmar]

The default block type in the model is paragraph. You won't be able to change that because that's one of the few things hardcoded in the engine. You can, however, change how paragraphs are rendered to the view. Changing rendering all paragraphs should be quite easy. Using the elementToElement() conversion helper with a high converterPriority should do the job.

Unfortunately, you need much more. You need to discover which paragraphs were created automatically in https://github.com/ckeditor/ckeditor5-paragraph/blob/0a9ace68219a80db302cc196e53cffde99b132e6/src/paragraph.js#L48 (which implements the autoparagraphing logic) and convert only those to some spans. This isn't easy and without digging into this it's hard to tell more.

[Mgsy]

I'm closing it due to a lack of activity.

[memboc]

I'm agree with @DenisPitcher. It will be good feature to change base model to custom.
@Reinmar your solution is to complicated.
In my case, I need to use editor in title for blog page. Title is simle text node wrapped H1 tag, in a fixed template. And sometimes I need just modify part of text by bold or italic in title. And header with <p> looks wrong

[ma2ciek]

Hi @memboc.

While I agree with the And header with <p> looks wrong part I don't agree with the approach. In your scenario, you should make the first element always the heading element, but paragraphs should be enabled in the other parts of the document. We'll probably add the Title&Body feature in the future.

[ma2ciek]

And if you want to create editor only for the title element then there's probably an easier approach since you can e.g. just block the Enter command, some unnecessary features and during the pasting check the pasted content.

[Reinmar]

There's a 3rd option – adding support for enabling the editor or tags like <h1>. Currently, we only allow enabling the editor on <div>-like elements. There's a ticket to allow running editors on block-level (as opposed to contrainer-level) elements – https://github.com/ckeditor/ckeditor5-editor-inline/issues/5.

Once enabling the editor on <h1> it will produce data like Foo <strong>bar</strong> (no <p> wrapper) because <p> must not be used inside <h1>. Which means that the editor has to reconfigure its schema automatically (or use a different root name than $root).

I think that you meant something like this @memboc. Am I right? If so, https://github.com/ckeditor/ckeditor5-editor-inline/issues/5 would be the ticket to discuss this.

[Anuj-logiciel]

I'm also having somewhat sme issue like this. I'm not able to set same data which I got by editor.getData()

I want to set - <p><a class="mention" data-mention="Anuj Singh" data-id="1">@Anuj Singh</a> - What are you doing.</p>

What I get is - <a class="mention" data-id="1" data-mention="Anuj Singh"><p>@Anuj Singh</p></a><p>&nbsp;- What are you doing.</p>

I was able to retain attributes after having ref. from here - https://ckeditor.com/docs/ckeditor5/latest/framework/guides/deep-dive/conversion/conversion-preserving-custom-content.html.

But This is adding extra <p> tags for wrapping sentence and its breaking down to next line. Is there any way that I can simply stop this from being added.

[Warxcell]

How do you think the output HTML should look like if you have more than one block of content in the editor if you don't want your content to be in <p> tags?

What if I want to forbid users to enter multiple blocks, but have single line only? Is it possible?

[RajeshKoram18]

i want to remove p tag in ckeditor using angular 8.
please give me any suggestions

[LukeLeber]

I think this should be re-opened. We should not assume the context that CKEditor 5 content will be used in!

For example, if we have CKEditor5 output in a variable, wysiwyg_content and we're forced to render it in a string:

"<span class="something">" + wysiwyg_content + "</span>"

then we definitely would NOT want block level elements to appear in there! This would result in malformed HTML.

One might argue that the context is a smell here, but sometimes the context is not able to be modified (think: what if one organization is syndicating content to a third party vendor that won't change their side?).

[dirkhacker]

YACK5 issue with adding unwanted <p tags. Drupal 10 does this behavior in FULL HTML mode by default.
Breaking my JS menu because it adds <p tags around all anchor tags.
Any recommendation to fix?

[oldmansutton]

If I try to do:

editorInstanceVar.setData('');

I would expect that there is AN EMPTY STRING inside the editor (ie., no data). However, in actuality I have the

<p>
   <br data-cke-filler="true">
</p> 

inside there. This is throwing off everything.

My ckeditor instanced element is slotted into a custom web component, along with many other components. I'm trying to get all slotted children that aren't the editor, but since the editor keeps adding those stupid paragraph tags even when there's no data, I keep grabbing those children elements with my querySelectorAll. Then when my code goes through to remove all the slotted elements, those children get included, and trying to remove them causes an error.

This could easily be fixed by not auto adding <p> to everything. As other's mentioned, you should not be assuming that I'm using CKEditor 5 as an HTML editor.

Example:

<project-editor>
    <div id="project-notes" class="text-editor ck-content ck ck-editor__editable ck-rounded-corners ck-editor__editable_inline ck-blurred" slot="description" title="Click inside box to edit" lang="en" dir="ltr" role="textbox" aria-label="Rich Text Editor, main" contenteditable="true">
        <p>
            <br data-cke-filler="true">
        </p>
    </div>
    <project-checklist slot="checklists"></project-checklist>
    <project-user slot="users"></project-user>
</project-editor>

So yeah, if I had a variable pointing to the project-editor element, and do

editorinstance.setData('');
let x = projectEditor.querySelectorAll(':not(#project-notes');
Array.from(x).forEach(elem => { elem.remove() });

I would expect to get the project-checklist element, and the project-user element.
However, since you're automatically adding elements that I did NOT specify to be added, I'm also getting the p and br elements returned, and calling remove() on those throws an error.

This is why you don't assume context, because I'm not using the editor in the way you imagine I should.

[moshfeu]

Hi team. Pretty important comments so far. I have such a case too (single line - one block). Not a chance to revisit the "P" approach?

[Witoso]

@moshfeu please +1 the current open issue #762 (if it serves your use case). It will help us to determine the priority for revisiting this in the future.

[KhevinPh]

I removed the p tag by using this tag when getting data {{ database.ckeditordata|safe }}

ex
{{ viewPost.body|safe }}

[gentunian]

having the same issue but resolved it with crafting a class an selecting p with display: inline in the places I know that content may come from strapi ckeditor in this case.

[mibstar]

I find this behaviour of always inserting

tags by default a little strange. In my particular case when using both <blockquote> and <dl>'s.

Aren't P tags redundant in block quotes? With definition lists it's much worse... it's a list and should behave like an <li> after all we're not wrapping text in <li>'s in with <p>'s!

ps: like dirkhacker I'm also coming from Drupal https://www.drupal.org/project/drupal/issues/3370610

[Witoso]

Aren't P tags redundant in block quotes? With definition lists it's much worse... it's a list and should behave like an <li>

I'm genuinely curious why is that a problem. The HTML we produce is correct. What should be the behavior when someone presses Enter in a block quote? A br? Paragraphs are more semantically correct, probably are more accessible for screen readers and assistive technologies because they communicate that the content forms a logical block.

after all we're not wrapping text in <li>'s in with <p>'s

We actually do, you can have a list item with multiple blocks inside, also multiple p's. Fun fact, we did develop a bogus/fake paragraphing for lists: p's only appear if you have multiple blocks, if it's just one block, it will be wrapped in li. Pretty complex thing as I've heard, so most likely we won't extend it to other features in the future.

[fnobashi]

this version is putting the p tags inside there by default without any content inside it. i searched the documentation a lot and i didn,t find any solution for my problem. i don,t want it in there by default i want my text area to be required and filled by the user. while this feature is not letting me do that. it brokes the validation rule of required.

[mibstar]

What should be the behavior when someone presses Enter in a block quote? A br?

Well the spec https://w3c.github.io/html-reference/dl.html says:

The dl element represents a description list, which consists of zero or more term-description (name-value) groupings; each grouping associates one or more terms/names (the contents of dt elements) with one or more descriptions/values (the contents of dd elements).

Which I make out to mean that in a DL the DD and DT must be paired. So an Enter after a <dt> should create it's paired <dd> and conversely an Enter after a <dl> should create <dd>. As for the Enter after a <dd> it should behave just like a <li> where one Enter creates another <li> which in this case could be another <dd> or after a second Enter it could be the next

but with the 3rd Enter you would close the list just like it happens with a <li>.

I hope this makes sense.