fix: parse html - v4 video

wangeditor-team · Feb 7, 2022 · 8dca822 · 8dca822
1 parent a44b8cf
commit 8dca822
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 14 deletions.
diff --git a/packages/editor/examples/parse-html.html b/packages/editor/examples/parse-html.html
@@ -75,6 +75,10 @@ <h1 id="94fco">标题</h1>
     <tr><td></td><td></td><td></td></tr>
   </tbody>
 </table>
+<p>100</p>
+<p><video src="https://media.w3.org/2010/05/sintel/trailer.mp4" controls=""></video></p>
+<p>200</p>
+<p><iframe src="//player.bilibili.com/player.html?aid=250348909&amp;bvid=BV1Pv411w7Xr&amp;cid=401518678&amp;page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe></p>
 <p>123123 🤣😎</p>
 <pre><code class="JavaScript"><xmp>const a = 100;
 function fn() {

diff --git a/packages/video-module/src/module/parse-elem-html.ts b/packages/video-module/src/module/parse-elem-html.ts
@@ -8,27 +8,34 @@ import { Dom7Array } from 'dom7'
 import { IDomEditor } from '@wangeditor/core'
 import { VideoElement } from './custom-types'
 
+function genVideoElem(src: string): VideoElement {
+  return {
+    type: 'video',
+    src,
+    children: [{ text: '' }], // void 元素有一个空 text
+  }
+}
+
 function parseHtml($elem: Dom7Array, children: Descendant[], editor: IDomEditor): VideoElement {
   let src = ''
 
   // <iframe> 形式
   const $iframe = $elem.find('iframe')
   if ($iframe.length > 0) {
     src = $iframe[0].outerHTML
+    return genVideoElem(src)
   }
 
   // <video> 形式
   const $video = $elem.find('video')
-  if ($video.length > 0) {
-    const $source = $video.find('source')
-    src = $source.attr('src') || ''
-  }
-
-  return {
-    type: 'video',
-    src,
-    children: [{ text: '' }], // void 元素有一个空 text
+  src = $video.attr('src') || ''
+  if (!src) {
+    if ($video.length > 0) {
+      const $source = $video.find('source')
+      src = $source.attr('src') || ''
+    }
   }
+  return genVideoElem(src)
 }
 
 export const parseHtmlConf = {

diff --git a/packages/video-module/src/module/pre-parse-html.ts b/packages/video-module/src/module/pre-parse-html.ts
@@ -8,11 +8,27 @@ import $, { getTagName } from '../utils/dom'
 
 /**
  * pre-prase video ，兼容 V4
- * @param $video $video
+ * @param $elem $elem
  */
-function preParse($video: Dom7Array) {
-  const tagName = getTagName($video)
-  if (tagName !== 'iframe' && tagName !== 'video') return $video
+function preParse($elem: Dom7Array) {
+  let $video = $elem
+
+  const elemTagName = getTagName($elem)
+  if (elemTagName === 'p') {
+    // v4 的 video 或 iframe 是被 p 包裹的
+    const children = $elem.children()
+    if (children.length === 1) {
+      const firstChild = children[0]
+      const firstChildTagName = firstChild.tagName.toLowerCase()
+      if (['iframe', 'video'].includes(firstChildTagName)) {
+        // p 下面包含 iframe 或 video
+        $video = $(firstChild)
+      }
+    }
+  }
+
+  const videoTagName = getTagName($video)
+  if (videoTagName !== 'iframe' && videoTagName !== 'video') return $video
 
   // 已经符合 V5 格式
   const $parent = $video.parent()
@@ -25,6 +41,6 @@ function preParse($video: Dom7Array) {
 }
 
 export const preParseHtmlConf = {
-  selector: 'iframe,video',
+  selector: 'iframe,video,p',
   preParseHtml: preParse,
 }