如果存在模态，如何取消模糊事件？

Question

I'm using the WYSIWYG HTML editor Redactor as an inline editor.

When the user clicks an editable line and the editor is invoked, upon blur, the editor is destroyed and the data saved.

            element.bind('click', function($event) {
                element.redactor({
                    focus: true
                });
            });
            element.on('blur', function($event){
                var ckValue = element.getCode();
                scope.$apply(function () {
                    setter(scope, ckValue);
                });
                element.destroyEditor();
                compileElement();
            });

The issue I'm having is when the editor opens a modal for uploading a picture. Focus is changed to the modal window. Is there a way to change/chain focus so the blur event is not triggered when a modal is opened?

Answer 1

You can do it in many ways. Here I come up with one of them. When the editor opens modal you just unbind the blur event on element as:

element.unbind('blur');

So that blur event is not triggered.

And, after closing modal again bind blur event on element as:

element.bind('blur');

That's it.

Answer 2

Should be pretty straightforward:

element.on('blur', function($event) {
    if ($("#IdValueOfTheImageUploader").length < 1) {
        var ckValue = element.getCode();
        scope.$apply(function () {
            setter(scope, ckValue);
        });
        element.destroyEditor();
        compileElement();
    }
});

Alternately, if the uploader is already built, but not visible, change the if statement to:

    if ($("#IdValueOfTheImageUploader:visible").length < 1) {

Basically, it checks to see if the uploader is present and skips firing the "save and destroy" logic, if it is.

Depending on how you are adding the image uploader, you may also have to be careful of running into is a race event (ie, the image uploader has not loaded on the page [or, been made visible, if using the second approach], by the time the code checks for its existence). You should be able to avoid it, by building the uploader before switching focus, but, if not, then add in a timeout, to give it time to load/display.

Answer 3

I omitted some other needs/issues. Namely invoking and dealing with multiple redactor instances in the window. We need to be able to destroy the current instance on blur without creating a new instance. To do so I created a few checks for the various redactor components.

            // check if blur event was triggered
            // by entering editor dropdown menu
            function checkDropDisplay(){
                return $('.redactor_dropdown:hover').length > 0
            }

            // check if currently hovering over toolbar
            function checkHover(){
                return $('.redactor_box:hover').length > 0
            }

            // check if a redactor modal is present
            function checkModalDisplay(){
                return $("#redactor_modal").is(":visible")
            }

            // save editor contents upon leaving editor
            element.bind('blur', function($event){
                // get editor contents and apply to scope
                var editorValue = element.context.innerHTML;
                scope.$apply(function () {
                    setter(scope, editorValue);
                });
                // escape timeout or save & destroy editor
                $timeout(function(){
                    if(checkModalDisplay() || checkDropDisplay() || checkHover()){
                        return false;
                    } else {
                        element.data('redactor').destroy();
                        compileElement();
                    }
                },1);
            }); 

For anyone interested, Redactor only has a series of callback events: modalOpenCallback, dropdownshowCallback, ImageuploadcallBack.