Configure from which page the image field is shown when you click the image icon in CKEditor?

[theo]

Hello

The Title is almost the question.

How can I define (@runtime) the page->image which is the default when I click the CKEditor image icon?

Thank you.

[Robin S]

Try this in /site/ready.php:

$wire->addHookAfter('InputfieldCKEditor::renderReadyHook', function(HookEvent $event) {
    $inputfield = $event->object;
    $page = $inputfield->hasPage;
    $field = $inputfield->hasField;
    // Whatever test you need to identify when the asset page should be changed
    if($field->name === 'body' && $page->template == 'basic_page') {
        $js_config = $this->config->js('InputfieldCKEditor_' . $inputfield->name);
        $js_config['pwAssetPageID'] = 1234; // The id of the asset page you want to use
        $this->config->js('InputfieldCKEditor_' . $inputfield->name, $js_config);
    }
});

Seems to work well in the PW admin, but the code comment here suggests it won't work for front-end editing.

[theo]

@Robin S Thank you. I will try this soon in a way. But I can't "hardcode" it in ready.php.

Sorry for the late reaction.

For a reason I was not alerted of your response. Just saw it now, when I wanted to "bump" the question. ?

[Robin S]

7 hours ago, theo said:

But I can't "hardcode" it in ready.php.

Not sure what you mean here. If you mean the id of "1234" in my demo code that is just to indicate that you need to use a page id on this line and not a Page object or some other page property. You can get that page id any way you like - it doesn't have to be hardcoded.

[theo]

Yes thank you. I see it is not so easy.

I need it in my backend wysiwyg editor which is a "tweaked" front-end editor and thus not working this way afaics.

I'll need to invest more time later, it is not super urgent.

Thank you.

[theo]

I was able to make it work now. Not sure if a hack, but...

To my copy of PageFrontEdit.js, I've simply added:

function ckeGetProcessWireConfig(editor) {
  return {pwAssetPageID:jQuery("#" + editor.name).closest('.pw-edit').attr('data-page')};
}

Then it shows the right image field.

Thank you for your help.