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

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

时间: 2024-10-10 22:28:32

【网页在线编辑】图文发送的模式的相关文章

Office 365实现多人在线编辑同一个文档(下)

接下来我要实现多人编辑同一个Excel文件,这里以Source.xlsx为例,右键选择共享 设置共享权限以及共享给谁 权限有如下,如果是发送给别人看,就选择任何人(可向收到此链接的任何人授予访问权限,无论他们是直接收到你的链接到还是收到其他人转发的链接.这可能包括组织外部的人员),也可以设置特定用户(可向你指定的人员授予访问权限,虽然其他人可能已拥有了权限.如果用户转发共享邀请,那么只有已拥有该项目访问权限的人员才能使用该链接)或者现有访问权限者,公司中的用户(可向组织中的所有人授予访问该链接的

如何在线编辑修改PDF文件中的背景颜色

我们在网上下载一下文件的时候我们都需要使用一些工具去进行操作,就想我们使用的而一些PDF文件一样我,我们想要给PDF文件进行文件的编辑,但是我们不想下载软件该如何操作,小编教你们一个方法,可以使用在线编辑网站去进行操作,方法如下: 1.打开浏览器,搜索迅捷PDF在线转换器,找到对应网页,打开后可以看到菜单栏上有很多的操作选项. 2.进入网页之后,我们点击菜单栏上的"文档处理"选项,然后选择里面的"PDF背景颜色"功能,进行背景色修改. 3.接下来需要点击"

shell——bash在线编辑

无意中发现了一个bash在线编辑的网址,初学者可以用这个试着学习shell http://www.runoob.com/try/runcode.php?filename=helloworld&type=bash

ArcGIS JavaScript在线编辑

代码: <html> <head>     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">     <title>Demo:Edit Features</title>     <link rel="stylesheet" href="https://js.arcgis.com/3.17

常见的web在线编辑工具

         在线编辑工具      JSbin http://jsbin.com/优点:不需要登录,即发即预览缺点:速度不靠谱 RUN JShttp://runjs.cn/code优点:国内访问速度快,可以上传图片(左下角)缺点:需要登录,用户名

Node.js 切近实战(九) 之Excel在线(在线编辑)

最近实在是太想去西藏了,我自己总是喜欢人少的旅游地,喜欢一望无垠,喜欢蓝天白云大草原. 之前有一节我给大家讲过文件列表,如下,今天我们要讲的就是Excel在线编辑. 当我们双击文件图标的时候会跳转到一个Excel修改界面,如下. ok,这里我们使用的依然是Telerik Kendo UI中的SpreadSheet,看一下这个Spread Sheet是如何用的. 我们定义一个spreadsheet的div,我们看一下这个div怎么生成sheet. $("#spreadsheet").ke

NET中weboffice组件在线编辑文档并保存到服务器上

页面中组件的引用以及控件触发事件: <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="9" background="images/tab_12.gif"> <asp:Button ID="btnuploadsave"

java 在线编辑模版 代码编辑器 兼容手机平板PC freemaker 静态引擎 网站源码

java 企业网站源码 前后台都有 静态模版引擎, 代码生成器大大提高开发效率 前台: 支持三套模版, 可以在后台切换 系统介绍: 1.网站后台采用主流的 SSM 框架 jsp JSTL,网站后台采用freemaker静态化模版引擎生成html 2.因为是生成的html,所以访问速度快,轻便,对服务器负担小 3.网站前端采用主流的响应式布局,同一页面同时支持PC.平板.手机(三合一)浏览器访问 4.springmvc +spring4.2.5+ mybaits3.3  SSM 普通java we

openlayers实现在线编辑

概述: 在前面有篇博文讲述了基于Arcgis for js和wkt实现在线数据的采集和编辑功能,在本文讲述如何在openlayers实现类似的功能.上一篇博文的地址为: http://blog.csdn.net/gisshixisheng/article/details/44310765 思路: 前后台的数据交互以wkt的形式,加载已完成对象用wkt,对象更新完成之后将geometry转换为wkt传给后台,将信息保存到数据库中.实现在线编辑主要为OpenLayers.Control.Modify