Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CKEditor5 Inline build puts a p tag inside of an h1 tag - how do I disable this?

I'm trying to make an h1 tag editable.

My HTML is

<h1 id="theh1">
    Hello how are you?
</h1>

And my JS is

e = document.getElementById("theh1");
InlineEditor
    .create( e,{
        removePlugins: [ 'Heading', 'Link' ],
        toolbar: [ 'bold', 'italic', 'bulletedList', 'numberedList', 'blockQuote' ]
      } )
      .catch( error => {
          console.error( error );
      } );

Here is a JSFiddle: https://jsfiddle.net/r66uhfee/3/

If you view source, you see that the h1 tag has a p element inside after editing it. How do I disable this behavior?

like image 675
Nick Manning Avatar asked Nov 18 '25 09:11

Nick Manning


1 Answers

Unfortunately, CKEditor 5 doesn't support this out of the box yet. This functionality is described in the Allow enabling all types of editors on paragraph-like root ticket.

However, this feature is potentially very easy to add. The crucial line of code is in every editor creator and looks like this:

https://github.com/ckeditor/ckeditor5-editor-classic/blob/d46af9fe4627da3f2f0b29349b1cbdabdf550637/src/classiceditor.js#L74:

this.model.document.createRoot();

The createRoot() method is called with its default values so it always creates a root called $root which by the schema is configured to only allow blocks (like paragraphs and headings).

If you'd create a root called paragraph, then that root would only allow text inside it and the editor would stop creating paragraphs:

this.model.document.createRoot( 'paragraph' );

Another thing that you might need to fix is that, in this particular case, some features may depend on this paragraph being marked as a limit element in the schema, so, in a specific editor which is enabled on a paragraph-like element, it'd be also good to do this:

editor.model.schema.extend( 'paragraph', { isLimit: true } );

However, we haven't tested this and we haven't designed the proper automatic solution for it, that's why the ticket is still open. So – the framework should allow this, but the implementations don't consider such case yet.

like image 156
Reinmar Avatar answered Nov 21 '25 09:11

Reinmar