Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Patrick van Kemenade 97 posts 325 karma points
    Mar 02, 2020 @ 11:00
    Patrick van Kemenade
    1

    My solution to Inline Macro in Grid -> Feedback wanted

    Hi All,

    One of the things I'm stuggling with and a see a lot of other people asking question about is the ability to have macro's displayed in the Grid as inline instead of as a block element.

    Wish there was a setting in umbraco to make macro's inline, or have them always inline because everyone could put a div inside there macro if they need it, but the other wat around trying to remove the outer div and

    On the front end this is easy, my macro is named DisplayImage, so just adding this to any css will do the trick (change DisplayImage to your Macro name):

    .umb-macro-holder.DisplayImage {
    display: inline-block;
    

    }

    But for the backend it's more difficult, because the grid loads in an iframe which is basicly an HTML document within a HTML document. This IFrame doesn't necessary have to be loaded after the main HTML document is loaded.

    To be able to change styles within this IFrame and a real WYSIWYG feel, I came up with the following, but since it feels more like a hack, I would like to get feedback if anyone has suggestions to improve this or have a completly different solution then this.

    Any within a plugin I've included a custom made JS file I've called tinyMceCustom.js in this I have the following (note I'm assuming there is just 1 IFrame and I only apply this solution to the macro DisplayImage):

    (function ($) {
    
        function checkIframeLoaded() {
            // Get a handle to the iframe element
            var iframe = $(".umb-grid IFRAME")[0]; // document.getElementById('i_frame');
    
            if (typeof iframe === "undefined") {
                window.setTimeout(checkIframeLoaded, 2000);
                return;
            }
    
            if (typeof iframe.id === "undefined") {
                window.setTimeout(checkIframeLoaded, 2000);
                return;
            }
    
            var iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
    
            // Check if loading is complete
            if (iframeDoc.readyState == 'complete') {
                // The loading is complete, call the function we want executed once the iframe is loaded
                afterLoading();
                return;
            }
            // If we are here, it is not loaded. Set things up so we check   the status again in 1000 milliseconds
            window.setTimeout(checkIframeLoaded, 1000);
        }
    
        function afterLoading() {
            //$(".umb-grid IFRAME").contents().find("head").append("<style>body{background-color:yellow;}</style>");
            $(".umb-grid IFRAME").contents().find("head").append("<style>.mce-content-body .umb-macro-holder.DisplayImage {display:inline-block;}</style>");
        }
    
        $(window).on('load', function () {
            checkIframeLoaded();
        });
    })(jQuery);
    

    Note uncomment the background-color:yellow; line to have a quick debug.

  • Heather Floyd 582 posts 892 karma points MVP 4x c-trib
    Jan 27, 2022 @ 18:11
    Heather Floyd
    1

    Hi Patrick, I am trying to get your workaround functional in my v8 project today...

    But in addition, it would be great to have your voice added to this: https://github.com/umbraco/Umbraco-CMS/discussions/11918

  • Patrick van Kemenade 97 posts 325 karma points
    Jan 27, 2022 @ 21:53
    Patrick van Kemenade
    0

    In hindsight I think this "solution" is too dirty to use and I've removed it from my code. I've also made an entry in the github thread.

    For now I've just learned to live with it that when using Macro's I don't have a true WYSIWYG effect (since on front-end I have them inline using CSS).

Please Sign in or register to post replies

Write your reply to:

Draft