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) {

基本上，它检查上传者是否存在并跳过触发＆＃34;保存并销毁＆＃34;逻辑，如果是。

根据您添加图像上传器的方式，您可能还必须小心遇到比赛事件（即图像上传器未加载到页面上[或者，如果使用第二个图像上传器已经可见]方法]，当代码检查它的存在时）。您应该能够通过在切换焦点之前构建上传器来避免它，但是，如果没有，则添加超时，以便给它加载/显示时间。

Answer 3

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

            // 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。

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

3 个答案: