由于项目需求，希望能够用javascript复制富文本格式的数据，例如全选一个网页Ctrl+C, Ctrl+V到一个word文档中，数据还是原来的格式，显示出来的样子也都和原来一样。现在希望使用javascript实现同样的功能。

由于系统的限制，javascript往系统剪切板上放置的数据只有两种格式Text和URL。具体使用如下：

function CopyToClipBoard(){

    var clipBoardContent="abcdefg";

    window.clipboardData.setData("Text",clipBoardContent);

    alert("已复制本页链接,您可以使用Ctrl+V粘贴后,发送给好友!");

}

上述方式只能存放普通的文本，无法保留原来的颜色字体大小等格式。

想要复制指定对象，首先需要定位到目标对象，所幸javascript中可以根据元素的id字段进行定位，可以轻易获取组成它的html文本，但是如果把这些html数据直接放入剪切板中，用Ctrl+V进行粘贴，我们得到的也只是没有解析的html，不能展现有效数据。

在搜索了大量资料之后终于发现了一个好的方法，通过创建ControlRange，然后执行execCommand('Copy')命令将制定元素块放到剪切板中, 此方法仅支持IE浏览器

<script>
function CopyImageToBoard(area){

  if (typeof area.contentEditable == 'undefined' || 

 !document.body.createControlRange){

    alert('Your IE does not support copy action, please use ctrl + c instead! ”');

  }else{

    var ctr = document.body.createControlRange();

    area.contentEditable = true;

    ctr.addElement(area);

    ctr.execCommand('Copy');

    area.contentEditable = false;

    alert('Copy success! ');

  }

}
</script>
<html>

<div id ="all">

<a href="javascript:void(0)"   onClick="CopyImageToBoard(document.getElementById('all'))" >copy to clipboard</a>

<table id="text">

  <tr style="background:red">

<td></td>

<td></td>

<td></td>

</tr>

 <tr style="background:green">

<td></td>

<td></td>

<td></td>

</tr>

 <tr style="background:black">

<td></td>

<td></td>

<td></td>

</tr>

</div>

</html>

点击链接按钮之后会复制整个区域到系统剪切板，把数据粘贴到支持富文本格式的编辑器中如word等，就可以看到效果了。

用javascript复制富文本的更多相关文章

  1. JavaScript Iframe富文本编辑器中的光标定位

    最近在项目中碰到一个比较棘手的问题: 在iframe富文本编辑器中,有个工具栏,这个工具栏在iframe标签之外,工具栏上有一个按钮,点击该按钮向iframe正在编辑中的光标处插入一个图片,图片会插入 ...

  2. 【JavaScript】富文本编辑器

    这是js写的富文本编辑器,还存在一些bug,但基本功能已经实现,通过这个练习,巩固了js富文本编辑方面的知识,里面包含颜色选择器.全屏.表情.上传图片等功能,每个功能实际对应的就是一个小插件啦 部分程 ...

  3. javascript 实现富文本框选中对齐

    需求: 一个可编辑(contenteditable=true)的div,对齐选中内容,左.中,右 ,其实质是:对选中的末梢节点,找到块属性的父元素,设置text-algin:center: MDN:t ...

  4. wangEditor-基于javascript和css开发的 Web富文本编辑器， 轻量、简洁、易用、开源免费(2)

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. html5中contenteditable属性如果过滤标签，过滤富文本样式

    ​​在div中使用contenteditable=”true”可以达到模拟输入框的效果,但是当我们复制其他网页内容进去的时候,会发现连带的样式也一起复制进去了.很明显我们不需要复制富文本样式,那么如何 ...

  6. 富文本编辑器直接从 word 中复制粘贴公式

    在之前在工作中遇到在富文本编辑器中粘贴图片不能展示的问题,于是各种网上扒拉,终于找到解决方案,在这里感谢一下知乎中众大神以及TheViper. 通过知乎提供的思路找到粘贴的原理,通过TheViper找 ...

  7. 如何从word文档复制内容到富文本编辑器

    在之前在工作中遇到在富文本编辑器中粘贴图片不能展示的问题,于是各种网上扒拉,终于找到解决方案,在这里感谢一下知乎中众大神以及TheViper. 通过知乎提供的思路找到粘贴的原理,通过TheViper找 ...

  8. 富文本编辑器防止xss注入javascript版

    富文本编辑器:ueditor 其实富文本编辑器已经有防止xss注入功能,但是你服务端程序在接收的时候在做一次转义,否则有可能然后前端验证直接提交数据导致被xss攻击. 为了节省后端程序开销则在前端 显 ...

  9. Javascript实现简单的富文本编辑器

    <span style="font-size:14px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 T ...

随机推荐

  1. 挖一挖C#中那些我们不经常使用的东西之系列（1）——ToDictionary,ToLookup

    这个系列我们看看C#中有哪些我们知道.可是又不知道怎么用.又或者懒得去了解的东西,比方这篇我们要介绍的toDictionary 和ToLookup. 从图中我们看到有四个ToXXX的方法,当中ToAr ...

  2. NSDate 问题

    类型 比特数 有效数字 数值范围 float 32 6-7 -3.4*10(-38)-3.4*10(38) double 64 15-16 -1.7*10(-308)-1.7*10(308) long ...

  3. 复选框input:checkbox

      复选框 CreateTime--2017年6月5日14:04:55Author:Marydon 五.复选框 (一)语法 <input type="checkbox" /& ...

  4. 【Python3 爬虫】11_报错No module named 'requests'

    从网上下载了一段源码,执行过程中报错: No module named 'requests' 一看英文就明白是咋回事了~ 是由于:没有模块requests 解决方案 打开cmd,在窗口运行命令:pip ...

  5. 【Python3 爬虫】07_正则表达式（原子）

    原子是正则表达式的最基本的组成单位,而且在每个模式中最少包含一个原子.原子是由所有那些未显示指定为元字符的打印和非打印字符组成. 原子分类 1.普通字符作为原子 普通字符是编写正则表达式时最常见的原子 ...

  6. 【DB2】报错：-30090 25000 指定的操作对远程执行失败

    场景描述: 数据库:DB_1,DB_2 现在在DB_1中建立NICKNAME为CST_INFO_NICK,并且该别名指向数据库DB_2的CST_INFO表,在DB_1中建立存储过程,该存储过程需要  ...

  7. 【c语言】不用大与小与号，求两数最大值

    // 不用大与小与号,求两数最大值 #include <stdio.h> int max(int a, int b) { int c = a - b; int d = 1 << ...

  8. springMVC4(5)RestTemplate控制层单元測试

    在前面我们进行web測试,总要在游览器进行.数据组装.请求方法更给等都极为麻烦. RestTemplate是Spring提供的一个web层測试模板类,我们能够通过RestTemplate在client ...

  9. 云解析DNS使用教程

    云解析(Domain. Name System,简称DNS)是一种高可用性.高可扩展的权威DNS服务和DNS管理服务.它的目的是为企业和开发者提供稳定.安全.智能的把网站域名或应用资源转换为计算机用于 ...

  10. 经过Nginx代理后如何区分HTTP请求头中的X-Forwarded-For和X-Real-IP，以及Java示例

    在开发工作中,我们常常需要获取客户端的IP.一般获取客户端的IP地址的方法是:request.getRemoteAddr();但是在通过了Apache,Squid等反向代理软件就不能获取到客户端的真实 ...