复制文本内容函数及execCommand扩展

258 阅读4分钟
  1. 创建一个只读的富文本框,通过定位让它消失在可视内容区域,将我们需要复制的内容放到文本框内暂存,选中文本框内内容, 通过执行execCommand函数复制内容,最后去除文本框,执行回调函数。
/**
 * 
 * @param {*} val 复制的文本
 * @param {*} cb 复制后的回调
 */
export const copyValue = (val, cb) => {
    const textarea = document.createElement('textarea');
    textarea.readOnly = 'readonly';
    textarea.style.position = 'absolute';
    textarea.style.left = '-9999px';
    textarea.value = val;
    document.body.appendChild(textarea);
    textarea.select();
    textarea.setSelectionRange(0, textarea.value.length);
    document.execCommand('Copy');
    document.body.removeChild(textarea);
    if (cb && Object.prototype.toString.call(cb) === '[object Function]'){
        cb();
    };
};

扩展execCommand函数

  • document.execCommand(sCommand[,交互方式, 动态参数]) ,其中:sCommand为指令参数,交互方式参数如果是true的话将显示对话框,如果为false的话,则不显示对话框。
  • 指令参数合集 参数 | 说明 | 参数 | 说明 | | ------------------------- | ----------------------------------------------- | ------------------------ | ---------------------------------------------- | | 2D-Position  | 允许通过拖曳移动绝对定位的对象 | InsertParagraph | 用换行覆盖当前选中区 | | AbsolutePosition  | 设定元素的 position 属性为“absolute”(绝对) | InsertSelectDropdown | 用下拉框控件覆盖当前选中区 | | BackColor | 设置或获取当前选中区的背景颜色 | InsertSelectListbox | 用列表框控件覆盖当前选中区 | | BlockDirLTR | 目前尚未支持 | InsertTextArea | 用多行文本输入控件覆盖当前选中区 | | BlockDirRTL | 目前尚未支持 | InsertUnorderedList | 切换当前选中区是项目符号列表还是常规格式化块 | | Bold | 切换当前选中区的粗体显示与否 | Italic | 切换当前选中区斜体显示与否 | | BrowseMode | 目前尚未支持 | JustifyCenter | 将当前选中区在所在格式化块置中 | | Copy | 将当前选中区复制到剪贴板 | JustifyFull | 目前尚未支持 | | CreateBookmark | 创建一个书签锚或获取当前选中区或插入点的书签锚的名称 | JustifyLeft | 将当前选中区所在格式化块左对齐 | | CreateLink | 在当前选中区上插入超级链接,或显示一个对话框允许用户指定要为当前选中区插入的超级链接的 URL | JustifyNone | 目前尚未支持 | | Cut | 将当前选中区复制到剪贴板并删除之 | JustifyRight | 将当前选中区所在格式化块右对齐 | | Delete | 删除当前选中区 | LiveResize | 迫使 MSHTML 编辑器在缩放或移动过程中持续更新元素外观,而不是只在移动或缩放完成后更新 | | DirLTR | 目前尚未支持 | MultipleSelection | 允许当用户按住 Shift 或 Ctrl 键时一次选中多于一个站点可选元素 | | DirRTL  | 目前尚未支持 | Open | 目前尚未支持 | | EditMode | 目前尚未支持 | Outdent  | 减少选中区所在格式化块的缩进 | | FontName | 设置或获取当前选中区的字体 | OverWrite  | 切换文本状态的插入和覆盖 | | FontSize | 设置或获取当前选中区的字体大小 | Paste | 用剪贴板内容覆盖当前选中区 | | ForeColor | 设置或获取当前选中区的前景(文本)颜色 | PlayImage  | 目前尚未支持 | | FormatBlock | 设置当前块格式化标签 | Print  | 打开打印对话框以便用户可以打印当前页 | | Indent | 增加选中文本的缩进 | Redo  | 目前尚未支持 | | InlineDirLTR | 目前尚未支持 | Refresh  | 刷新当前文档 | | InlineDirRTL | 目前尚未支持 | RemoveFormat  | 从当前选中区中删除格式化标签 | | InsertButton | 用按钮控件覆盖当前选中区 | RemoveParaFormat  | 目前尚未支持 | | InsertFieldset | 用方框覆盖当前选中区 | SaveAs  | 将当前 Web 页面保存为文件 | | InsertHorizontalRule | 用水平线覆盖当前选中区 | SelectAll  | 选中整个文档 | | InsertIFrame | 用内嵌框架覆盖当前选中区 | SizeToControl  | 目前尚未支持 | | InsertImage | 用图像覆盖当前选中区 | SizeToControlHeight  | 目前尚未支持 | | InsertInputButton | 用按钮控件覆盖当前选中区 | SizeToControlWidth  | 目前尚未支持 | | InsertInputCheckbox | 用复选框控件覆盖当前选中区 | Stop | 目前尚未支持 | | InsertInputFileUpload | 用文件上载控件覆盖当前选中区 | StopImage  | 目前尚未支持 | | InsertInputHidden | 插入隐藏控件覆盖当前选中区 | StrikeThrough | 目前尚未支持 | | InsertInputImage | 用图像控件覆盖当前选中区 | Subscript | 目前尚未支持 | | InsertInputPassword | 用密码控件覆盖当前选中区 | Superscript | 目前尚未支持 | | InsertInputRadio | 用单选钮控件覆盖当前选中区 | UnBookmark  | 从当前选中区中删除全部书签 | | InsertInputReset | 用重置控件覆盖当前选中区 | Underline  | 切换当前选中区的下划线显示与否 | | InsertInputSubmit | 用提交控件覆盖当前选中区 | Undo  | 目前尚未支持 | | InsertInputText  | 用文本控件覆盖当前选中区 | Unlink  | 从当前选中区中删除全部超级链接 | | InsertMarquee | 用空字幕覆盖当前选中区 | Unselect  | 清除当前选中区的选中状态 | | InsertOrderedList | 切换当前选中区是编号列表还是常规格式化块