使用js纯代码复制文字、复制html(保留p标签的换行)两种方法

2023-05-16

Copy content of rich editor using Javascript - Stack Overflowhttps://stackoverflow.com/questions/66227056/copy-content-of-rich-editor-using-javascript

 1. 复制html元素 (支持ie)

注意,这个$0可以是一个html元素,但是必须要在document中,如果是自己clone的元素,则需要先document.body.appendChild(ele), 否则a.addRange()这一步会报错

元素需要复制的内容要设置user-select: text, 不想复制的元素设置user-select:none即可

 (1) 方法一

const e = $0; // 选中一个元素

const r = document.createRange();

const startIndex = 0; // 方法一的设置range
const endIndex = e.childNodes.length;
r.setStart(e, startIndex);
r.setEnd(e, endIndex);

const s = window.getSelection();
s.removeAllRanges();
s.addRange(r);

document.execCommand("copy")

(2)方法二 

const e = $0; // 选中一个元素

const r = document.createRange();

r.selectNodeContents(e) // 方法二的设置range

const s = window.getSelection();
s.removeAllRanges();
s.addRange(r);

document.execCommand("copy")

2. 复制文字,不保留格式,用input框等就可以

 const ele = document.createElement('textarea')
 ele.value = text; // 设置需要复制的文字
 document.body.appendChild(ele)
 ele.style.opacity = 0;
 ele.style.position = 'fixed' // 移动到不可屏幕不可见区域
 ele.style.left = '-99999px'
 ele.select()
 document.execCommand('copy')
 ele.remove() // 别忘了每次复制之后移除元素,否则会有很多无用的dom

 

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

使用js纯代码复制文字、复制html(保留p标签的换行)两种方法 的相关文章

  • 云原生工程师-8.statefulset和daemonset

    七 Statefulset 有状态服务 个人博客 7 1 Statefulset相关概念 7 1 1 什么是Statefulset StatefulSet 是有状态的集合 xff0c 管理有状态的服务 xff0c 它所管理的 Pod 的名称
  • 云原生工程师-9.configmap和secret

    九 configmap 配置管理 个人博客 9 1 配置管理中心基本概念 9 1 1 什么是configmap Configmap 是 k8s 中的资源对象 xff0c 用于保存非机密性的配置的 xff0c 数据可以用 key value
  • 云原生工程师-10.K8s安全管理RBAC

    十一 K8s安全管理 xff1a 认证 xff0c 授权 xff0c 准入控制 个人博客 11 1RBAC概述 11 1 1安全管理概述 k8s 对我们整个系统的认证 xff0c 授权 xff0c 访问控制做了精密的设置 xff1b 对于
  • windows 10/11 wsl 安装 ubuntu

    微软官方连接 xff1a WSL 的手动安装步骤 Microsoft Learn 步骤 1 启用适用于 Linux 的 Windows 子系统 需要先启用 适用于 Linux 的 Windows 子系统 可选功能 xff0c 然后才能在 W
  • wsl2 与windows网络互通

    ubuntu wsl2 访问windows 方式一 xff1a ubuntu中查看 ubuntu终端中输入 cat etc resolv conf 显示结果 显示结果 This file was automatically generate
  • requires Python ‘>=3.7‘ but the running Python is 3.6.9 问题

    过程 ubuntu18 04 使用如下命令安装protobuf pip3 install protobuf 安装完毕后报错 protobuf requires Python 39 gt 61 3 7 39 but the running P
  • 拯救者Y9000P突然很卡

    描述 不知道什么原因 xff0c 拯救者Y9000P突然很卡 xff0c 打开windows 任务管理器 查看CPU性能显示速度不到1GHz 解决办法 关机 拔掉所有外设 xff0c 如鼠标 外接键盘 扩展屏幕 和其他设备 xff08 电源
  • windows电脑本通过网线分享无线网络

    条件 设备1 xff1a windows 10系统笔记本 xff08 wifi和网口 xff09 设备2 xff1a 具有网口的计算机 xff08 假设IP为 172 13 100 200 xff09 网线 期望 设备1通过wifi连接无线
  • shell中while内改变外部变量和 < << <<<

    代码 问题代码 使用管道会创建子shell lines 61 34 first line nsecond line nthird line 34 foo 61 0 echo e lines while read line do echo l
  • python 画几何图形

    多边形的画法 def ployon num distance bob color 39 blue 39 39 red 39 bob color 34 red 34 34 yellow 34 for i in range num bob fd
  • 希腊字母及读音

    希腊字母 24个希腊字母分别是 xff1a 拼写 xff1a 阿尔法 Alpha xff1a 贝塔 Beta xff1a 伽玛 Gamma xff1a 德尔塔 Delte xff1a 艾普西龙 Epsilon xff1a 捷塔 Zeta x
  • HexView工具使用

    HexView简介 HexView是Vector开发的一款查看和编辑16进制文件的PC端工具 它可以显示不同文件格式的内容 xff0c 主要是Intel HEX xff0c 摩托罗拉S记录二进制文件或其他汽车制造商特定的文件格式 此外 xf
  • c++ enum class转int

    示例 enum class 定义 span class token keyword enum span span class token keyword class span span class token class name Colo
  • cmake使用CMAKE_INSTALL_PREFIX指定目录的assimp

    编译assimp v5 2 5 CMakeLists txt片段 span class token comment 依赖库 span span class token function sudo span span class token
  • ubuntu14.04下eclipse4.5添加ADT插件构建android开发环境问题:libstdc++.so.6错误

    1 问题描述 xff1a ubuntu14 04 64位下 xff0c eclipse安装adt等android开发工具会提示 xff1a erro where loading shared libraries libstdc 43 43
  • 解决Win10下Linux子系统WSL输入who命令没有响应的内核问题

    系统和工具说明 Ubuntu 16 05 LTSWindows Terminalps xff1a powershellwsl xff1a windows子系统Linux 问题 在做操作系统的Linux的用户监测实验时 xff0c 我发现在W
  • vscode配置opencv环境【完整版】

    1 安装MinGW 并配置环境变量path 在终端输入gcc v验证 2 安装cmake 3 官方下载opencv源码source 在cmake中编译 xff0c 新建D opencv目录 先执行configure再执行generate o
  • 实验六:EIGRP协议配置

    EIGRP协议属于路由协议的一种 xff0c Cisco私有 xff0c 前身是IGRP xff0c 增加的 E 意为 增强型 xff0c 增强型内部网关路由协议 下面通过一个简单的小实验来学习一下EIGRP的相关命令 xff1a 拓扑图
  • Openstack容器部署工具—kolla-ansible源码解读

    kolla ansible源码解读 kolla介绍目录结构ansible目录结构 对neutron部署代码解读neutron目录结构defaulthandlersmetataskstemplates 命令参数解析 kolla介绍 Kolla
  • 离线升级:openssh从8.1版本至8.4版本

    由于公司有内外网之分 xff0c 因此内网的升级需要将所需要的包从外网传到内网进行离线升级 如果大家也是这种情况 xff0c 建议升级的时候务必要先拿一台不常用服务器 xff08 测试环境的话如果不常用也可以在上面升级 xff09 试一下

随机推荐