How to make a custom media button work with ACF?

• TwisterMc

• October 13, 2020 at 2:42 pm

I have a custom media button that opens the media manager, selects a PDF, and inserts it back into the editor as a shortcode. This works great in the standard Classic WordPress editor, however, it does not work with ACF WYSIWYG fields. The ACF WYSIWYG fields do show the custom button but it doesn’t capture the click.

Can you help point me to information as to how to make my custom media buttons work with ACF WYSIWYG fields?

Code that adds the button is here:
https://github.com/TwisterMc/pdfjs-viewer-shortcode/blob/develop/inc/media-button.php

Code that triggers the upload window is here:
https://github.com/TwisterMc/pdfjs-viewer-shortcode/blob/develop/pdfjs-media-button.js

I do know that I need to change the click function from an ID to a class if I have two buttons on the page, but even then, it doesn’t work.

Any help is appreciated. Thanks.

• reiven

• November 15, 2021 at 7:27 am

Same issue, similar code.

• reiven

• November 15, 2021 at 7:40 am

$(document).on('click', '.insert-reference', function (e) {
    e.preventDefault();
    modal.dialog('open');
});

This is a weird one. You need to capture the click form dom and filter by button 🙂

• John Huebner

• November 15, 2021 at 12:58 pm

Just out of curiosity, does the shortcode get inserted into the standard WP editor (classic editor) instead of the ACF WYSIWYG?

I don’t really have an answer and this is only guessing. A lot of tools used for inserting content do not work correctly when there are multiple tinyMCE editors on the page and they assume that only that only the default editor exists.

I have run into this issue in the past with some plugins.