Question

我正在尝试解决有关使用CKEditor时事件排序的问题。

似乎CKEditor在提出blur事件之前故意等待一段时间（200ms）。我的理解是，当用户从编辑框点击工具栏时，这是为了防止错误的blur。

但是，结果是，在某些浏览器中，如果用户在使用CKEditor后立即单击带有click事件侦听器的元素，则click事件将在{{1}之前触发事件，这对我来说是个问题，因为我需要按照实际发生的顺序处理事件（从用户的角度来看）。

通过在CKEditor中输入一些文本并单击按钮或复选框而不单击或跳出CKEditor，可以在IE或Edge中观察到此行为。在我的机器上，控制台在两个事件发射之间显示大约10-20毫秒的间隙，有时模糊事件甚至会先发射。

blur

function timeStamp() { return new Date() % 1000000; }

CKEDITOR.disableAutoInline = true;
CKEDITOR.inline('myCkEditorBox', {
  on: {
    blur: function() {
      console.log(timeStamp(), 'CKEDITOR blur.');
    }
  }
});

document.getElementById('myButton').addEventListener('click', function() {
  console.log(timeStamp(), 'Button clicked.');
});
document.getElementById('myCheckbox').addEventListener('click', function() {
  console.log(timeStamp(), 'Checkbox clicked.');
});

#myCkEditorBox {
  border: 1px solid black;
  width: 400px;
  min-height: 200px;
  margin-top: 5em;
}

我尝试过：

我尝试了forum post中的以下代码，它基本上完全禁用了模糊延迟：

<script src="https://cdn.ckeditor.com/4.7.3/standard/ckeditor.js"></script>
<input type="button" value="Do something" id="myButton" />
<input type="checkbox" id="myCheckbox" />
<div id="myCkEditorBox" contenteditable="true"></div>

这个会立即触发模糊事件，但它会导致编辑器工具栏出现问题，导致工具栏中的下拉列表无法展开，或导致通过工具栏应用的样式闪烁然后走开。

我尝试使用以下内容将模糊延迟减少到10毫秒：

CKEDITOR.focusManager.prototype.orig_blur = CKEDITOR.focusManager.prototype.blur;
CKEDITOR.focusManager.prototype.blur = function() { 
    CKEDITOR.focusManager.prototype.orig_blur.call(this,true); 
};

这也会以所需的顺序触发事件，但是篡改CKEditor的内部设置似乎是一个坏主意，因为某些原因可能会给出某些值（这也是我尝试过的另一种方法））。

所以我在做什么方面有点不知所措。如果我知道模糊事件正在从某个特定控件发出的路上，我可能会找到一种等待它完成的方法，然后再执行其他事件的操作。我的页面一次可以有多个CKEditor控件，所以我不认为主动触发所有这些模糊事件并等待所有这些事件完成后再执行其他事件的操作将是一个好主意。

那么我该如何确保在点击事件之前处理CKEditor模糊事件，即使它们实际上是以相反的顺序触发？

Answer 1

最可靠的解决方案似乎是在点击输入时检查编辑器是否模糊：

var editor = CKEDITOR.inline( 'myCkEditorBox' );

document.getElementById( 'myButton' ).addEventListener( 'click', function() {
  if ( editor.focusManager.hasFocus ) {
    editor.once( 'blur', function() {
      myButtonClickHandler();
    } );
  } else {
    myButtonClickHandler();
  }
} );

function myButtonClickHandler() {
  // Code which should be executed on 'myButton' click, but only after editor is blurred.
}

如果编辑器模糊，只需执行按钮点击处理程序的常规流程。如果编辑器仍然是focused，只需等待blur event，然后定期执行按钮点击处理程序。

在执行其他操作之前，如何等待CKEditor模糊？

1 个答案: