回答

置顶请问微信小程序editor富文本目前只能插入图片该如何插入视频与链接？精选热门

06-18810浏览问题模块： API和组件

3 个回答

06-18

  insertLink() {
    const that = this
    wx.showModal({
      title: '插入链接',
      editable: true,
      placeholderText: '输入链接地址（包含http://）',
      success(urlRes) {
        if (urlRes.confirm) {
          wx.showModal({
            title: '链接文字',
            editable: true,
            placeholderText: '输入显示文字',
            success(textRes) {
              if (textRes.confirm) {
                // 插入定位标识
                that.editorCtx.insertText({
                  text: '#-*=*-*=*-*=*@-link超链接标识link-@*=*-*=*-*=*-#',
                  success() {
                    // 获取全文内容
                    that.editorCtx.getContents({
                      success(res) {
                        const ops = res.delta.ops
                        const findex = ops.findIndex(item => {
                          return item.insert && item.insert.includes('link超链接标识link')
                        })


                        if (findex > -1) {
                          const original = ops[findex].insert
                          const attrs = ops[findex].attributes || {}
                          const [prefix, suffix] = original.split('#-*=*-*=*-*=*@-link超链接标识link-@*=*-*=*-*=*-#')


                          // 构建新操作
                          const newOps = []
                          if (prefix) newOps.push({ insert: prefix, attributes: attrs })
                          newOps.push({
                            insert: textRes.content,
                            attributes: {
                              link: urlRes.content,
                              color: '#007AFF',
                              textDecoration: 'underline'
                            }
                          })
                          if (suffix) newOps.push({ insert: suffix, attributes: attrs })


                          // 更新编辑器内容
                          ops.splice(findex, 1, ...newOps)
                          that.editorCtx.setContents({
                            delta: { ops },
                            success() {
                              that.editorCtx.blur()
                            }
                          })
                        }
                      }
                    })
                  }
                })
              }
            }
          })
        }
      }
    })
  },

这个是添加链接的方法，你试一试看看能不能满足需要

06-18

有用 2

宋
06-18
加粗
标红
插入代码
插入链接
插入图片
上传视频
请登录后发表内容
关闭
新增或编辑超链接
链接地址
确认取消
关闭
插入视频
视频链接
确认取消
发表
插入视频我觉得可以先插入一张视频的图片（黑色背景加个播放按钮的图片）注意的是 width: ‘80%’ 方便用户编辑视频 alt是真实的视频地址当上传整个富文本内容是对这个处理比如正则表达式用于匹配img标签中带有alt属性且alt属性值为视频链接的模式再用replace方法替换为video标签
你好，麻烦通过点击下方“反馈信息”按钮，提供出现问题的。
待楼主反馈
06-18
赞
回复
关闭
请选择投诉理由
广告内容
违法违规
恶意灌水内容
其他

06-18

function handleHtmlWithVideo(html) {    // 正则表达式用于匹配img标签中带有alt属性且alt属性值为视频链接的模式    const regex = /<img\s+src="[^"]*"\s+alt="([^"]*)"[^>]*>/g    // 使用replace方法和一个函数回调来替换匹配到的内容    return html.replace(regex, (match, videoUrl) => {        // 替换为video标签，并添加controls属性以便用户可以控制播放        return `<video width="80%" controls><source src="${videoUrl}" type="video/mp4"></video>`    })}

06-18

浅蓝
06-21
加粗
标红
插入代码
插入链接
插入图片
上传视频
请登录后发表内容
关闭
新增或编辑超链接
链接地址
确认取消
关闭
插入视频
视频链接
确认取消
发表
感谢，但是a标签的href属性能保留么？好像被过滤掉了
你好，麻烦通过点击下方“反馈信息”按钮，提供出现问题的。
待楼主反馈
06-21
赞
回复
关闭
请选择投诉理由
广告内容
违法违规
恶意灌水内容
其他

AndyQsmart
07-02
加粗
标红
插入代码
插入链接
插入图片
上传视频
请登录后发表内容
关闭
新增或编辑超链接
链接地址
确认取消
关闭
插入视频
视频链接
确认取消
发表
我通过insertImage接口实现了插入图片、超链接、表格、公式的功能。
是的，所有上述我都通过svg图片渲染出来，通过定义data-custom数据结构保存相关属性，在里面定义type字段来区分不同元素。理论上视频也可以通过这种方式实现，渲染一个封面图或者svg图片，点击可以打开一个弹窗，播放或者修改视频。不过最终生成的html需要再额外处理一下，把里面的img标签通过data-custom字段来转换回真实的标签类型。
svg图片可以通过 src: `data:image/svg+xml;base64,${base64.encode(svg_str)}`的方式进行插入。
至于点击事件，我通过一些不太优美的方式，使用EditorContext.getBounds实现了Editor点击图片触发事件。（在我的回答里有相关实现的思路）
你好，麻烦通过点击下方“反馈信息”按钮，提供出现问题的。
待楼主反馈
07-02
有用
回复 6
- 浅蓝
  07-04
  加粗
  标红
  插入代码
  插入链接
  插入图片
  上传视频
  请登录后发表内容
  关闭
  新增或编辑超链接
  链接地址
  确认取消
  关闭
  插入视频
  视频链接
  确认取消
  发表
  您好，有代码吗？？
  你好，麻烦通过点击下方“反馈信息”按钮，提供出现问题的。
  待楼主反馈
  07-04
  赞
  回复
  关闭
  请选择投诉理由
  广告内容
  违法违规
  恶意灌水内容
  其他
- AndyQsmart
  07-06回复浅蓝
  加粗
  标红
  插入代码
  插入链接
  插入图片
  上传视频
  请登录后发表内容
  关闭
  新增或编辑超链接
  链接地址
  确认取消
  关闭
  插入视频
  视频链接
  确认取消
  发表
  我用的Taro框架，这个是插入超链接的函数（插入公式、视频都是类似的）：
  你好，麻烦通过点击下方“反馈信息”按钮，提供出现问题的。
  待楼主反馈
  async insertLink() {
  const { edit_index, link_text, link_url } = this.state
  if (edit_index >= 0) {
  await this.props.getEditorContext().deleteText({
  index: edit_index,
  length: 1,
  })
  await this.props.getEditorContext().setSelection({
  index: edit_index,
  length: 0,
  })
  }
  
  let link_info = TexUtil.generateTexInfo(`\\underline{${link_text}}`)
  // console.log(link_info)
  
  this.props.getEditorContext().insertImage({
  extClass: link_info.extClass,
  src: link_info.src,
  nowrap: true,
  alt: link_text,
  data: {
  data: WXEditorHelper.encodeDataCustom({
  type: 'link',
  href: link_url,
  text: link_text
  })
  },
  width: link_info.width,
  height: link_info.height,
  })
  console.log('link ext class:', link_info.extClass)
  
  this.closeLinkDialog()
  }
  07-06
  赞
  回复
  关闭
  请选择投诉理由
  广告内容
  违法违规
  恶意灌水内容
  其他
- AndyQsmart
  07-06回复浅蓝
  加粗
  标红
  插入代码
  插入链接
  插入图片
  上传视频
  请登录后发表内容
  关闭
  新增或编辑超链接
  链接地址
  确认取消
  关闭
  插入视频
  视频链接
  确认取消
  发表
  总之就是将必要的数据信息存入data字段里，然后src通过svg图片来渲染所需的内容（公式可以用Mathjax，超链接可以通过svg进行渲染文字，或者超链接也通过Mathjax渲染），不过最终生成的html代码里，公式、超链接等对应的img标签，需要通过data字段里的type来判断，然后处理成超链接<a></a>标签或者公式对应的html等。
  你好，麻烦通过点击下方“反馈信息”按钮，提供出现问题的。
  待楼主反馈
  07-06
  赞
  回复
  关闭
  请选择投诉理由
  广告内容
  违法违规
  恶意灌水内容
  其他
- AndyQsmart
  07-06回复浅蓝
  加粗
  标红
  插入代码
  插入链接
  插入图片
  上传视频
  请登录后发表内容
  关闭
  新增或编辑超链接
  链接地址
  确认取消
  关闭
  插入视频
  视频链接
  确认取消
  发表
  至于点击元素的时候触发点击事件，就是通过getBounds函数，从0遍历到最后一个字符，判断字符的范围是不是包含了点击坐标，然后根据我上述的data里面的type字段来触发相应的超链接、图片、公式等点击事件，然后处理相应的逻辑。这是我Taro框架下的代码，仅供参考：
  你好，麻烦通过点击下方“反馈信息”按钮，提供出现问题的。
  待楼主反馈
  async onClickEditor(e) {
  const { x, y } = e.detail
  // console.log(x, y)
  let data_res = await this.editor_context.getContents()
  // console.log(data_res)
  let all_length = this.getWxDeltaLength(data_res.delta)
  // console.log('all_length:', all_length)
  // 二分法应该可以优化，规模小暂时不优化
  for (let i = 0; i < all_length; i++) {
  let bounds_res = await this.editor_context.getBounds({
  index: i,
  length: 1,
  })
  let bounds = bounds_res.bounds
  // console.log(bounds)
  if (bounds.left <= x && x <= bounds.left + bounds.width &&
  bounds.top <= y && y <= bounds.top + bounds.height
  ) {
  // console.log('click on index:', i)
  let item_type = this.getWxDeltaIndexType(data_res.delta, i)
  // console.log('click on type:', item_type)
  if (item_type.type != 'text') {
  this.onClickItem(i, item_type.type, item_type.data, item_type)
  }
  break
  }
  }
  }
  07-06
  赞
  回复
  关闭
  请选择投诉理由
  广告内容
  违法违规
  恶意灌水内容
  其他
- AndyQsmart
  07-06回复浅蓝
  加粗
  标红
  插入代码
  插入链接
  插入图片
  上传视频
  请登录后发表内容
  关闭
  新增或编辑超链接
  链接地址
  确认取消
  关闭
  插入视频
  视频链接
  确认取消
  发表
  最后，就是还有一些细节需要处理，比如渲染的图片需要和文字对齐，图片中的文字大小需要和font-size一致（图片大小需要和文字的字体大小成比例缩放），可以调节图片的width: ?em、height: ?em、vertical-align: ?em来实现。由于不能传入style，导致这三个参数不能调整为任意值，只能给图片加extClass，所以我只能通过less预先生成一批固定值，然后?em四舍五入到整数，近似处理，下面这段是预处理的less：
  你好，麻烦通过点击下方“反馈信息”按钮，提供出现问题的。
  待楼主反馈
  @maxWidth: 100;
  @maxHeight: 100;
  @minVerticalAlign: -100;
  @maxVerticalAlign: 100;
  
  // 下面width、height、verticalAlign均为公式图片所需样式
  // 批量生成宽度样式
  .generateWidth(@n) when (@n > 0) {
  .width-@{n}em {
  width: (@n / 10em);
  }
  .generateWidth(@n - 1);
  }
  
  .generateWidth(@maxWidth);
  
  // 批量生成高度样式
  .generateHeight(@n) when (@n > 0) {
  .height-@{n}em {
  height: (@n / 10em);
  }
  .generateHeight(@n - 1);
  }
  
  .generateHeight(@maxHeight);
  
  // 批量生成对齐样式
  .generateVerticalAlign(@n) when (@n > @minVerticalAlign) {
  .verticalAlign-@{n}em {
  vertical-align: (@n / 10em);
  }
  .generateVerticalAlign(@n - 1);
  }
  
  .generateVerticalAlign(@maxVerticalAlign);
  length: 1,
  07-06
  赞
  回复
  关闭
  请选择投诉理由
  广告内容
  违法违规
  恶意灌水内容
  其他
查看更多(1)
关闭
请选择投诉理由
广告内容
违法违规
恶意灌水内容
其他
智能回答本次回答由AI生成
06-18
社区等级达到undefined级的用户可评议智能回答，反馈后将获得贡献值。
有用
关闭
请选择投诉理由
广告内容
违法违规
恶意灌水内容
其他

请登录后发表内容

置顶请问微信小程序editor富文本目前只能插入图片该如何插入视频与链接？精选热门

请选择投诉理由

删除当前帖子

删除后帖子内容及评论将一并被删除，且不可恢复。

关注“微信开放社区”公众号

反馈

新增或编辑超链接

插入视频

新增或编辑超链接

插入视频

请选择投诉理由

新增或编辑超链接

插入视频

请选择投诉理由

新增或编辑超链接

插入视频

请选择投诉理由

请选择投诉理由

新增或编辑超链接

插入视频

新增或编辑超链接

插入视频

请选择投诉理由

新增或编辑超链接

插入视频

请选择投诉理由

新增或编辑超链接

插入视频

请选择投诉理由

新增或编辑超链接

插入视频

请选择投诉理由

新增或编辑超链接

插入视频

请选择投诉理由

请选择投诉理由

请选择投诉理由

新增或编辑超链接

插入视频

关注“微信开放社区”公众号