我正在尝试使用jQuery编写自己的WYSIWYG编辑器!
我需要捕捉在编辑器框架上触发的事件。 "click"事件运行良好，并且具有正确的当前元素，但是"keyup"在任何位置都仅将<body>作为当前标签返回!我做错什么了？
<iframe id="editor"></iframe>
<script>
// Define editor
var editor = $('#editor').contents().find('body');
// Switch to design mode
$('#editor').contents().prop('designMode', 'on');
editor.on("click", function(event) {
console.log("clicked:" + event.target.nodeName + $(this).prop("tagName") + $(event.target).prop("tagName"));
});
editor.on("keyup", function(event) {
console.log("key:" + event.target.nodeName + $(this).prop("tagName") + $(event.target).prop("tagName"));
});
</script>
有一个例子:jsfiddle.net/p38L10zp/1
最佳答案
有两个选项可用于检索当前正在编辑的元素。
<iframe> 选拔
请在 JSFiddle 中考虑第一种方法的工作示例。
该示例在很大程度上受另一个SO问题Get parent element of caret in iframe design mode的启发。
突变观察者
使用此API可能有些棘手，here's是一个非常具体的用例的可行示例。
和代码:
var editor = $('#editor').contents().find('body');
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
console.log(mutation);
if (mutation.type === 'characterData') {
console.log('Tag name is: ' + mutation.target.parentNode.tagName);
}
});
});
// Configuration of the observer.
var config = {
attributes: true,
childList: true,
characterData: true,
subtree: true
};
observer.observe(editor[0], config);
$('#editor').contents().prop('designMode', 'on');
editor.append("<p>Test <b>bold</b> text</p>");