So I have been building an extension to allow me to insert images into the textarea block of blocks and pages with custom styles. I call the MediabrowserUtility and am able to get a long funky url into a hidden input box, but this url doesn't work on the frontend and seems like I need a dynamic url in the form of {{media url="wysiwyg/banner_image"}}

Here is my js code:

/* my_js.phtml */
    $sourceUrl = $block->getUrl('cms/wysiwyg_images/index',
    ['target_element_id' => 'tce-image-chooser', 'type' => 'file']);
    $mediafn = 'MediabrowserUtility.openDialog(\'' . $sourceUrl . '\', 0, 0, \'MediaBrowser\', {});';
require(['jquery'], function ($) {
    let openGallery = () => { <?= $mediafn ?> };

    let listener = null;

    $('#insert_image').click(evt => {

        let image_selector = $('#tce-image-chooser')[0];
        let initVal = image_selector.value = 'tce-empty';

        listener = setInterval(() => {
            if(image_selector.value !== initVal) {
                let url = image_selector.value;
                /* Do something with url */
        }, 250);

So currently the url I get is of the form: https://domain.com/admin/cms/wysiwyg/directive/___directive/e3ttZWRpYSB1cmw9Ind5c2l3eWcvS2FmZmViX25uZXIucG5nIn19/key/a9b2feeed684ea00c0f02365f97a01627a14e7c2a6fa603a76e48b616a2e9bfa/ but I need it to be a dynamic url such as {{media url="wysiwyg/banner_image"}}

Any help or ideas will greatly be appreciated.


So after searching with slightly different keywords I found a solution from what someone mentioned.

Here is the code to go from the long url to the dynamic url:

    function urlToMageCode(url) {
        var parts = url.split('/');
        var key = parts.indexOf('___directive');
        if (key < 0) return false;
        let clean = parts[key+1].replace(/(%.*)$/, '');
        return atob(clean);
| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.