1、需求
网页在线编辑第三方插件很多,我需要做一个手机上发布图片+文字的精简版的编辑器,文字和图片就自上而下排列就完了。
iframe的实现架构很多。
2、实现
2.1 iframe定义
2.2 编辑模式设置和焦点获取
ifEdit = this.getElementByXid("ifEdit").contentWindow;
//编辑模式
ifEdit.document.designMode = "on";
ifEdit.document.contentEditable = true;
var GetPos = function(){
//debugger;
ifEdit.pos = ifEdit.document.selection.createRange();
};
ifEdit.document.body.onclick = GetPos;
ifEdit.document.body.onselect = GetPos;
ifEdit.document.body.onkeyup = GetPos;
2.3 图片插入 函数
function(htmlElement){
"<p><br>" + htmlElement + "</p>";
ifEdit.focus();
var _image = document.createElement("img");
_image.src=htmlElement;
_image.border="0";
//var ifTemp = document.getElementById("ifEdittemp");
debugger;
if (ifEdit.document.selection.type.toLowerCase() != "none")
{
ifEdit.document.selection.clear() ;
}
ifEdit.pos.pasteHTML(_image.outerHTML);
ifEdit.focus();
};
3、问题
WeX5架构下,iframe没有selection这个属性。 dubugger发现event.target可以获取到当前Node
3.1 初始化iframe
ifEdit = this.getElementByXid("ifEdit").contentWindow;
//编辑模式
ifEdit.document.designMode = "on";
ifEdit.document.contentEditable = true;
var GetPos = function(event){
debugger;
ifEdit.pos = event.target;//ifEdit.document.selection.createRange();
};
ifEdit.document.body.onclick = GetPos;
ifEdit.document.body.onselect = GetPos;
ifEdit.document.body.onkeyup = GetPos;
3.2 在body上添加子节点
Model.prototype.insertHtml = function(htmlElement){
"<p><br>" + htmlElement + "</p>";
ifEdit.focus();
var _image = document.createElement("img");
_image.src=htmlElement;
_image.border="0";
//var ifTemp = document.getElementById("ifEdittemp");
//debugger;
/*
if (ifEdit.document.selection.type.toLowerCase() != "none")
{
ifEdit.document.selection.clear() ;
}*/
//pos未获取焦点,没有最后一个节点,最后一个节点等于当前节点,追加到最后
if(!ifEdit.pos || !ifEdit.document.body.lastChild ||
ifEdit.document.body.lastChild == ifEdit.pos){
ifEdit.document.body.appendChild(_image);
}
else{
ifEdit.document.body.insertBefore(_image,ifEdit.pos.nextSibling);
}
ifEdit.focus();
};