CKEditor Prevent blocking items? (`div, p, h1, h2, etc.)
How to prevent blocking of elements in ckeditor?
I want to prevent ckeditor from accepting block elements. With a warning, enter the key, I can do that, but if I paste some text that includes an enter key or multiple paragraphs in ckeditor, everything is down.
In other words, I want a textbox with ckeditor.
source to share
Quoting from the official weekly blog post :
CKEditor's main developer, Olek Nowodziński , hacked the editor a bit in his spare time and here's the result ... An editable header that doesn't break with the Enter key or multi-line insertion: https://jsfiddle.net/540ckczt/
var editor = CKEDITOR.inline( 'editor', {
plugins: 'clipboard,floatingspace,toolbar,undo,basicstyles,link',
toolbar: [ [ 'Undo', 'Redo' ], [ 'Bold', 'Italic' ], [ 'Link', 'Unlink' ] ],
// Enter mode ill be set to BR automatically if editor was enabled on some element
// which cannot contain blocks (like <h1 for instance).
// If you want to enable editor on different elements, set BR mode here.
// Read the note below to learn why.
enterMode: CKEDITOR.ENTER_BR,
on: {
instanceReady: function() {
// Remove all "br"s from the data being inputted into the editor.
editor.dataProcessor.dataFilter.addRules( {
elements: {
br: function() {
return false;
}
}
} );
this.editable().on( 'keydown', function( evt ) {
var keystroke = evt.data.getKeystroke();
if ( keystroke == CKEDITOR.SHIFT + 13 || keystroke == 13 ) {
evt.data.preventDefault();
}
} );
}
}
} );
Note that the key part of this code is that ACF filters out the rest of the block tags (except <br>
). In the case above, the ACF operates in automatic mode where it is configured with the features enabled. And since there is no Format dropdown or any other block-generating functions, none of these are allowed. Read more in the Advanced Content Filter manual .
I expect now to be able to ask, "Why can't we configure ACF to filter <br>
too?"
The answer is that ACF should be able to normalize blocks that are not allowed for any content, and since CKEditor does not officially support "no input" mode, it aborts normalization before <p>
, <div>
or <br>
. The decision is made based on the input mode, so it is important to configure such an editor to enter BR mode.
source to share