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

Question

我使用WYSIWYG HTML编辑器Redactor作为内联编辑器。

当用户单击可编辑的行并调用编辑器时，模糊时会破坏编辑器并保存数据。

            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();
            });

我遇到的问题是编辑器打开用于上传图片的模式时。 焦点更改为模式窗口。 有没有一种方法可以更改/链接焦点，以便在打开模态时不触发模糊事件？

Answer 1

您可以通过多种方式进行操作。 在这里，我提出了其中之一。 当编辑器打开模式时，您只需将元素上的blur事件解除绑定为：

element.unbind('blur');

这样就不会触发模糊事件。

并且，在关闭模态之后，再次将元素上的模糊事件绑定为：

element.bind('blur');

而已。

Answer 2

应该很简单：

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

或者，如果已经构建了上传器，但不可见，则将if语句更改为：

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

基本上，它检查是否存在上载器，并跳过触发“保存并销毁”逻辑（如果存在）。

根据您添加图像上传器的方式，您可能还必须小心避免发生竞赛事件（即，图像上传器尚未加载到页面上（或者，如果使用第二种方法，则使其可见），在代码检查其存在时）。 您应该能够避免这种情况，方法是在切换焦点之前构建上载器，但如果没有，则添加一个超时时间，以使其有时间加载/显示。

Answer 3

我省略了其他一些需求/问题。 即在窗口中调用并处理多个编辑器实例。 我们需要能够在不创建新实例的情况下模糊破坏当前实例。 为此，我为各种编辑器组件创建了一些检查。

            // 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);
            }); 

对于感兴趣的任何人，Redactor仅具有一系列回调事件：modalOpenCallback，dropdownshowCallback，ImageuploadcallBack。