document.execCommand

功能强大自由灵活的富文本编辑

插入一个InsertImage
document.execCommand('InsertImage', false, "aa")

插入一个iframe
document.execCommand('InsertIFrame', true, "aa")

chrome 62 尝试 exec 插入视频无效, 考虑光标处插入 iframe 标签, 代码

insertVideo (url) {
  this.$refs.contenteditable.focus() // 设置编辑区域为当前焦点,否则会插入失败
  let node = window.getSelection().getRangeAt(0) // 获取光标起始位置节点
  let ifr = document.createElement('iframe') // 创建节点对象
  ifr.setAttribute('src', url) // 给节点对象添加属性
  node.insertNode(ifr) // 在光标位置插入该对象
 }
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 前端复制功能的若干 -- document.execCommand() 页面里copy的功能目前copy主流有四种...
    乖乖果效36阅读 26,040评论 1 1
  • 《裕语言》速成开发手册3.0 官方用户交流:iApp开发交流(1) 239547050iApp开发交流(2) 10...
    叶染柒丶阅读 27,702评论 5 19
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,886评论 18 139
  • 有人问,跑马累不累?那你跑5个小时甚至6个小时累吗?有人问了,越野累吗?在山上狂奔6个小时甚至10个小时,你觉得呢...
    Mr豆浆阅读 571评论 1 2
  • 今夜,在这辞旧迎新的一刻,回味着2016年文字中的点点滴滴,竟然在悲怆的同时还能找到一种自我感动,虽然说我的生活每...
    冰红茶麻麻阅读 377评论 8 37