编辑可信DOM对象的内容时,不同的浏览器会有不同的行为。例如,Firefox 18.0在某些情况下会创建新段落(<p>
)或换行符<br/>
,而Chrome 24会创建<div>
。
为了解决这个问题,我正在听DOMNodeInserted
事件并用p标签替换新插入的节点。
问题是将插入符号放在适当的位置。 我已经阅读了大量关于同一主题的帖子,但提供的答案都没有效果,至少在Chrome 24中是这样。
obj.addEventListener("DOMNodeInserted", onNodeInsert, false);
function onNodeInsert(e) {
var range = document.createRange(),
sel = window.getSelection(),
newNode = e.target,
tagName = newNode.tagName.toLowerCase(),
lnbrNode = document.createElement('br'),
pNode = document.createElement('p');
if (tagName === 'div' && newNode.getAttribute("id") === null) {
// First we remove the event listener so that it doesn't get triggered again
this.removeEventListener('DOMNodeInserted', onNodeInsert, false);
// Creates a p node and removes the div
newNode.parentNode.replaceChild(pNode, newNode);
pNode.appendChild(lnbrNode);
// Places the caret where it belongs
range.setStart(pNode, 0);
sel.removeAllRanges();
sel.addRange(range);
//We can restore the event listener now
this.addEventListener("DOMNodeInserted", onNodeInsert, false);
}
}
答案 0 :(得分:0)
对于那些可能遇到和我一样的问题的人来说,这是我的肮脏修复......
obj.addEventListener("DOMNodeInserted", onNodeInsert, false);
function onNodeInsert(e) {
var range = document.createRange(),
sel = window.getSelection(),
newNode = e.target,
tagName = newNode.tagName.toLowerCase(),
lnbrNode = document.createElement('br'),
pNode = document.createElement('p');
if (tagName === 'div' && newNode.getAttribute("id") === null) {
// First we remove the event listener so that it doesn't get triggered again
this.removeEventListener('DOMNodeInserted', onNodeInsert, false);
// Creates a p node and removes the div
newNode.parentNode.replaceChild(pNode, newNode);
pNode.appendChild(lnbrNode);
// Places the caret where it belongs
var placeCursor = function () {
range.setStart(pNode, 0);
sel.removeAllRanges();
sel.addRange(range);
}
//placeCursor(); // DOES NOT WORK (cursor disappears)
setTimeout(placeCursor,1); // WORKS
//We can restore the event listener now
this.addEventListener("DOMNodeInserted", onNodeInsert, false);
}
}