最近在做一个富文本编辑器,当鼠标单击事件发生在编辑区域外以后,光标就会消失,那么execCommand()方法就不能在编辑器处执行。
此时需要记录下光标消失的位置,一下几篇博文帮助非常大,记录下,以便后续学习使用。
1. TheViper,说的很详细
http://www.cnblogs.com/TheViper/p/4303158.html
2.这块说的一幕了然 http://w3cboy.com/post/2015/06/iframe-insert-picture-cursor/
以上代码主要还是参考了 这位大神的东西 wangEditor
第二个源码:
iframe从光标处插入图片
最近改了一个很久之前的编辑器的bug:ie浏览器不能在光标处插入图片,记录在此。
编辑器很古老,代码混乱,是通过开启iframe的document.designMode='on'来实现编辑的。
首先需要在iframe加载之后开启designMode,后监听mouseup和keyup事件来记录光标位置(切记要在designMode开启之后监听,不然ie上面是监听不到的)
var addEvent = (function(){
if(document.addEventListener){
return function(type, el, fn){
el.addEventListener(type, fn, false);
}
}else if(document.attachEvent){
return function(type, el, fn){
el.attachEvent('on' + type, fn);
}
}else{
return function(type, el, fn) {
el['on' + type] = fn;
}
}
})();
var iframeNode = window.frames['editIframe'];
addEvent(iframeNode, 'load', function(){
var iframeDoc = iframeNode.contentDocument || iframeNode.document;
iframeDoc.designMode='on';
addEvent(iframeDoc, 'mouseup', function(){
saveSelection();
});
addEvent(iframeDoc, 'keyup', function(){
saveSelection();
});
//获取和记录光标
var currentRange, supportRange = typeof document.createRange === 'function';
function getCurrentRange() {
var selection, range;
if(supportRange){
selection = iframeDoc.getSelection();
if (selection.getRangeAt && selection.rangeCount) {
range = iframeDoc.getSelection().getRangeAt(0);
}
}else{
range = iframeDoc.selection.createRange();
}
return range;
}
function saveSelection() {
currentRange = getCurrentRange();
}
function restoreSelection() {
if(!currentRange){
return;
}
var selection, range;
iframeDoc.body.focus();
if(supportRange){
selection = iframeDoc.getSelection();
selection.removeAllRanges();
selection.addRange(currentRange);
}else{
currentRange.select();
}
}
//插入图片
function insertImg(html){
restoreSelection();
iframeDoc.execCommand('insertImage', false, html);
saveSelection();
}
});