Get CKEditor to use full height of container.

[millipedia]

This is really minor thing but it annoys me that I can't get an instance of a CKEditor to use the full height of a container in the admin.

This is especially noticeable where I have fieldset that's pushing the height of a row down; as per this screenshot:

I've poked around at various CSS settings but no luck so far. Has anyone managed to do this?

 

[bernhard]

You can increase the number of "rows" in the field's settings (input tab). Is that what you are looking for?

[wbmnfktr]

Wasn't there somewhere a module or setting to space out the textarea to the available space?

Can't find anything in the modules directory, or maybe I am using the wrong query, but there has been such a thing.

I know I used it in a project a long time ago, but that project doesn't exist anymore... so I can't look into it.

[millipedia]

18 hours ago, bernhard said:

You can increase the number of "rows" in the field's settings (input tab). Is that what you are looking for?

That's certainly helpful thanks (and honesly will probably do me).

I still feel like it should be possible to automatically resize the editor to the height of the container div though. Probably a bit of javascript that uses the CKEditor resize function  to match the editor height to its parent.

I'll have a play when I have a moment - I was just hoping someone might have done it already....

[bernhard]

If you do some testing note that it's really easy to add custom markup to any inputfield via hook:

<?php
$wire->addHookBefore("Inputfield(className=InputfieldCKEditor)::render", function($event) {
  $field = $event->object;
  $id = $field->id;
  $field->appendMarkup = "<script>
    \$li = $('#wrap_$id');
    console.log(\$li);
    </script>";
});

Looking forward to your results ? 

[millipedia]

3 hours ago, bernhard said:

If you do some testing note that it's really easy to add custom markup to any inputfield via hook:

Noted.

Before I spotted your reply though I'd hooked into ProcessPageEdit to load an external js file:

function resizeEditor(HookEvent $event){
    
        $js_path=wire()->config->urls->templates . "resize_editor.js";
        wire()->config->scripts->add($js_path);

}

wire()->addHookAfter('ProcessPageEdit::execute', null, 'resizeEditor');

and then that JS looks like this:

// resize ckeditors to height of container.

if(typeof CKEDITOR !== 'undefined'){

	CKEDITOR.on('instanceReady', function(event){

		var input_name=event.editor.name; // this is the id of our field.

		var parent_height = document.getElementById(input_name).parentElement.offsetHeight;
		console.log('Setting editor ' + event.editor.name + ' height to' + parent_height);
		event.editor.resize( '100%', parent_height );

	}); 
}

That sets all the editors to the height of their containers.

Edited March 3, 2022 by millipedia
Edit: Added conditonal to code in case we don't have any CKEditors in the template.

[virtualgadjo]

Hi,

juste in case it would help, i nearly always add this maximize ability to ckeditor fields


it adds a button to the field toolbar that allows you to write with a full screen field (very useful with heavy content pages...)
you just have to go back to normal size to save but honestly, not really a problem

have a nice day