在iframe 編輯器裡插入圖片時圖片總跑到編輯器的最前端而不是光標所在處。具體的操作是先將焦點移到編輯器，然後轉移焦點，再選擇編輯器裡的插入圖片，並查入圖片，插入的圖片就跑到編輯器的最前端。代碼實現如下:
//是否開啟設計模式
function EditorDesignMode(EditorID)
{
var deditor = document.getElementById(EditorID+"_iframe").contentWindow;
deditor.document.designMode="on";
//deditor.contentEditable="true";
deditor.document.open();
deditor.document.writeln("<html><head><title></title></head><body></body></html>");
deditor.document.close();
}
//插入圖片至編輯器
function InsertsImageGo(imageurl,EditorID)
{
var deditor = document.getElementById(EditorID+"_iframe").contentWindow;
// 聚焦編輯器
deditor.focus();
//插入圖片處理
if(imageurl != "")
{
if (window.navigator.userAgent.indexOf("MSIE")<1)
{
deditor.document.execCommand('InsertImage',false,imageurl);
}
else
{
var _image = document.createElement("img");
_image.src=imageurl;
_image.border="0";
if (deditor.document.selection.type.toLowerCase() != "none")
{
deditor.document.selection.clear() ;
}
deditor.document.selection.createRange().pasteHTML(_image.outerHTML);
}
}
// 聚焦編輯器
deditor.focus();
HideDiv("PopDiv");
}
其實最為關鍵的一句是:deditor.document.selection.createRange().pasteHTML(_image.outerHTML);
問題也就出在這句，它只是向iframe的文檔插入了，但沒有插入的位置，也就是說應該在插入之前要保存焦點的位置。修改代碼如下:
var MyEditorID = "";
//是否開啟設計模式
function EditorDesignMode(EditorID)
{
var deditor = document.getElementById(EditorID+"_iframe").contentWindow;
deditor.document.designMode="on";
//deditor.contentEditable="true";
deditor.document.open();
deditor.document.writeln("<html><head><title></title></head><body></body></html>");
deditor.document.close();
MyEditorID = EditorID+"_iframe";
deditor.document.body.onclick =GetPos;
deditor.document.body.onselect =GetPos;
deditor.document.body.onkeyup =GetPos;
}
function GetPos()
{
var deditor = document.getElementById(MyEditorID).contentWindow;
deditor.pos = deditor.document.selection.createRange();
//alert("dafd");
}
//插入圖片至編輯器
function InsertsImageGo(imageurl,EditorID)
{
var deditor = document.getElementById(EditorID+"_iframe").contentWindow;
// 聚焦編輯器
deditor.focus();
//插入圖片處理
if(imageurl != "")
{
if (window.navigator.userAgent.indexOf("MSIE")<1)
{
deditor.document.execCommand('InsertImage',false,imageurl);
}
else
{
var _image = document.createElement("img");
_image.src=imageurl;
_image.border="0";
if (deditor.document.selection.type.toLowerCase() != "none")
{
deditor.document.selection.clear() ;
}
deditor.pos.pasteHTML(_image.outerHTML);
}
}
// 聚焦編輯器
deditor.focus();
HideDiv("PopDiv");
}
在iframe裡加上onclick,onselect,onkeyup事件，並保存當前的焦點，再插入的時候在剛才保存的焦點處插入就可以了!^_^
沒有留言:
張貼留言