Ckeditor5: 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 https://github.com/ckeditor/ckeditor5/issues/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.