Copied to clipboard

Flag this post as spam?

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


  • Vyacheslav 8 posts 98 karma points
    Oct 24, 2021 @ 18:04
    Vyacheslav
    0

    How to use overlay in another overlay? Why second overlay is locked but first is active?

    I have a custom data type "Table Editor", each cell contains RTE.
    But when I want to add a link from Link Picker (or open edit source code) in this RTE, overlay with code window is locked.
    Link Picker is locked until I click on it, but after click Link Picker is active, but RTE overlay closes.
    Link Picker is locked
    I explored code for these elements in the Chrome Dev Tools and marked an oddity: Different places. Table overlay is deep inside page node. Link Picker overlay is inside "umb-editors" class that is after page node.

    Function for init RTE in controller.js:

        function _editCell(cell) {
        vm.richTextEditor = {
            view: "/App_Plugins/Our.Umbraco.Tables/backoffice/views/tables.overlay.view.html",
            show: true,
            title: "Edit cell value",
            prop: {
                alias: "value",
                label: "",
                view: "rte",
                config: {
                    editor: {
                        toolbar: [
                            "ace",
                            "removeformat",
                            "styleselect",
                            "bold",
                            "italic",
                            "underline",
                            "strikethrough",
                            "bullist",
                            "numlist",
                            "link",
                            "unlink"
                        ],
                        stylesheets: [
                            "/css/Jumpstart.css"
                        ],
                        maxImageSize: 500,
                        mode: "classic"
                    }
                },
                value: cell.value
            },
            submit: function (model) {
                cell.value = model.prop.value;
                vm.richTextEditor.show = false;
                vm.richTextEditor = null;
            },
            close: function (model) {
                vm.richTextEditor.show = false;
                vm.richTextEditor = null;
            },
            error: function (error) {
            }
        };
    }
    


    Overlay layout in editor.view.html:

        <umb-overlay ng-if="vm.richTextEditor.show"
                 model="vm.richTextEditor"
                 position="right"
                 view="vm.richTextEditor.view">
    </umb-overlay>
    


    How can I use overlay in a overlay correctly?
    Why these overlays are in a different places?

Please Sign in or register to post replies

Write your reply to:

Draft