网页在线编辑图文发送的模式

Posted 2020-07-19 inns

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();
    };