如何在React中检测CKEditor内新增的视频链接并提取存储

AI 小北

2026-9-26

解决方案

方案1（推荐）：从CKEditor实例直接提取

这种方式不用解析HTML，不受CKEditor输出格式变动影响，稳定性更高。直接修改你的CKEditor onChange回调逻辑即可：

// 修改后的Field组件内CKEditor部分代码
<CKEditor
  editor={ClassicEditor}
  data={field.value}
  onChange={(event, editor) => {
    const content = editor.getData()
    form.setFieldValue(field.name, content)
    
    // 提取所有媒体链接
    const mediaUrls = []
    const root = editor.model.document.getRoot()
    for (const child of root.getChildren()) {
      // 匹配CKEditor媒体插件生成的media节点
      if (child.is('element', 'media')) {
        mediaUrls.push(child.getAttribute('url'))
      }
    }
    // 将提取到的链接数组存入Formik对应字段，后续可直接存入数据库
    form.setFieldValue('attachedVideos', mediaUrls)
  }}
/>

方案2：从已生成的HTML字符串提取

如果需要从你拿到的field.value富文本字符串中提取链接，用原生DOMParser解析即可，不推荐用正则匹配避免匹配出错：

// 提取工具函数
const getVideoUrlsFromHtml = (htmlStr) => {
  const parser = new DOMParser()
  const htmlDoc = parser.parseFromString(htmlStr, 'text/html')
  const oembedList = htmlDoc.querySelectorAll('oembed')
  return Array.from(oembedList).map(item => item.getAttribute('url'))
}

// 调用示例
const videoUrls = getVideoUrlsFromHtml(field.value)
// 输出示例：["https://www.youtube.com/watch?v=EaZxUCWAjb0"]