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?
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With