Ckeditor5: Ckeditor 5 adding p tags for setData content

[learn44]

Hi,
I am having issue that whenever I load some content in ckeditor it adds p tags for other html?My code is given below:
InlineEditorBase
.create(document.querySelector(element), {
// The plugins are now passed directly to .create().
//plugins: [
//EssentialsPlugin,
//AutoformatPlugin,
//BoldPlugin,
//ItalicPlugin,
//BlockquotePlugin,
//HeadingPlugin,
//ImagePlugin,
//ImagecaptionPlugin,
//ImagestylePlugin,
//ImagetoolbarPlugin,
//LinkPlugin,
//ListPlugin,
//ParagraphPlugin
//],

        //So is the rest of the default configuration.
        toolbar: [
            'headings',
            'bold',
            'italic',
            'link',
            'bulletedList',
            'numberedList',
            'blockQuote',
            'undo',
            'redo'
        ],
        //removePlugins: ['Heading'],
        //toolbar: 'full',

        autoParagraph: false,
        enterMode: 'div',
        ShiftEnterMode: 'br',
        language: 'GB-en'
    })
    .then(editor => {
        editor.setData(data);//here i am settings the data
        this.ckEditor = editor;
        console.log(editor);
    })
    .catch(error => {
        console.error(error);
    });

I am using angular 5 and ckeditor 5?

[Reinmar]

Hi! You commented out all plugins so your editor doesn't support any features. Hence, it strips whatever it finds and replaces it with paragraphs.

Besides, in CKEditor 5 there are no such options as:

        autoParagraph: false,
        enterMode: 'div',
        ShiftEnterMode: 'br',
        language: 'GB-en'

You can read more in this guide: https://docs.ckeditor.com/ckeditor5/latest/builds/guides/migrate.html

[learn44]

Hi,
Thanks for reply Reinmar. Is there any specific way through which I can control Ckeditor 5 from adding p tags in setData content. Quick reply will be appreciated.

[Reinmar]

What would you like to control about it? What specific cases do you have in mind?

[learn44]

Hi Reinmar,
Thanks for the quick response. Here is below code which demonstrates my scenario:

.create(document.querySelector(element), 
    .then(editor => {
        editor.setData('<h1>test heading</h1><table>

<tr>
    <th>Author(s)</th>
    <th>Book Title</th>
    <th>Read?</th>
</tr>
<tr>
    <td>John Steinbeck</td>
    <td>The Grapes of Wrath</td>
    <td>Yes</td>
</tr>
</table>');//here i am settings the data
        this.ckEditor = editor;
        console.log(editor);
    })
    .catch(error => {
        console.error(error);
    });

In above code all h1 and table tags when render in editor becomes p. I want the original html to be maintained with its output.

[learn44]

Hi Reinmar,
Waiting for your reply on above.
Thanks

[Reinmar]

That's because tables are not supported yet (see github.com/ckeditor/ckeditor5-table/issues/1 where we're starting working on them) and the heading feature is not configured to support <h1> (see https://docs.ckeditor.com/ckeditor5/latest/features/headings.html#heading-levels).

As I mentioned – when feature is not supported by the editor, then it's removed from the content. The only way to "workaround" this is by... implementing these features.

[learn44]

Hi,
Thanks Reinmar for the quick reply.

[andyfoote]

@Reinmar, @learn44
I've been struggling with this in ckeditor 5 as well, and think the fact it automatically puts <p> tags around any content is ridiculous.

As someone has mentioned what if you start markup - in a perfectly normal way - such as <h1>Page title</h1>. Why should that get changed to <p><h1>Page title</h1></p>? It shouldn't - that's completely different markup!

We have a legacy application where a database contains lots of HTML that's been input by users in certain fields. If we load this into ckeditor and allow the user to save it, it puts <p></p> tags around everything. Given that some applications have character limits this is adding 7 additional and totally un-necessary characters, as well as causing rendering issues in other parts of the application due to it having these tags which the user has never asked for! Crazy.

[Reinmar]

As someone has mentioned what if you start markup - in a perfectly normal way - such as <h1>Page title</h1>. Why should that get changed to <p><h1>Page title</h1></p>? It shouldn't - that's completely different markup!

CKEditor does not do such thing. Of course, unless you'll write a plugin which does that precisely. CKEditor does create a perfectly valid markup by default.

Actually, I think your comment is an off topic to what was discussed above. Above, we discussed that by default CKEditor 5 does not allow <h1> so it replaces it with <p>. It does not wrap it with <p> for sure. Also, you can enable support for <h1>s easily.

Please report a new ticket and explain your problem in more detail. Perpahs we'll be able to help.

[emadha]

and what if someone wants to put some sort of markdown ``` code which surrounds every new line with

isn't that a use case ?

[shamseerahammedm]

@andyfoote @Reinmar getting the same thing , editor keeps on wrapping p tags , using this in a mail scenario where user saves the mail abc, it comes as <p> abc </p> which is a serious problem in my case how did u solve it ? also tested in new environment with no plugins or anything output is still wrapped with a p tag

Here is the codesanbox type something and see the console -> https://codesandbox.io/s/funny-wave-xiuhc?file=/src/Test.jsx

versions used :
"@ckeditor/ckeditor5-build-classic": "^22.0.0",
"@ckeditor/ckeditor5-react": "^2.1.0",

Updating,

updated the plugin to latest version
"@ckeditor/ckeditor5-build-classic": "^23.1.0",
"@ckeditor/ckeditor5-react": "^3.0.0",

still gives the same result

[andyfoote]

@shamseerahammedm The way we solved it was by using a different editor!

The developer doesn't really seem to care about the issue and said in one of the replies above:

"CKEditor does not do such thing."

Perhaps he has an alternative explanation as to what is introducing the <p> tags then? Because it definitely wasn't anything else in our application... When we used an alternative editor and loaded the content we didn't get this issue. Which suggests it is indeed a problem with ckeditor.

The alternative solution if you must use ckeditor is to strip out the <p> tags either client side or server side. For example you could target the element - after the content is loaded - with JavaScript/jQuery and then remove the surrounding <p></p> tags. If you were doing this server side you could use a string replacement function (e.g. str_replace if you were using PHP) to remove it when the content from the editor is posted to your endpoint.

[shamseerahammedm]

@Reinmar whats your thoughts on this ?

[cruachan]

I am having a very similar problem, and it's definitely ckeditor

I want to programmatically add text. So I implement the editor and with an empty editor if I do this

const selection = writer.setSelection(writer.createPositionAt(ckEditors[target].model.document.getRoot(), 0)); const insertPosition = ckEditors[target].model.document.selection.getFirstPosition(); writer.insertText(nextText,insertPosition );

Then
const currentText = ckEditors[target].getData();

returns simply x. If I then append another x using

const selection = writer.setSelection(writer.createPositionAt(ckEditors[target].model.document.getRoot(), 'end')); const insertPosition = ckEditors[target].model.document.selection.getLastPosition(); writer.insertText(nextText,insertPosition );

getData returns "x<p>&nbsp;</p>x"

But if execute the same code again getData then returns "x<p>&nbsp;</p>xx"

Also, if I don't use my first code fragment but just my second twice then getData shows this: "<p>&nbsp;</p>xx";

This is totally inconsistent behaviour and looks for all the world to me like a bug in the code, and fits pretty much exactly in the same pattern as seen by others above.