feat: add srcdoc property to IFrameBlock element #454

.vscode/settings.json

@@ -22,6 +22,7 @@
     "richtext",
     "rowmargin",
     "rowspan",
+    "srcdoc",
     "TEXTLIKE",
     "trlist",
     "updown",

docs/en/guide/schema.md

@@ -139,7 +139,8 @@ interface IElement {
       VIDEO = 'video'
     };
     iframeBlock?: {
-      src: string;
+      src?: string;
+      srcdoc?: string;
     };
     videoBlock?: {
       src: string;

docs/guide/schema.md

@@ -139,7 +139,8 @@ interface IElement {
       VIDEO = 'video'
     };
     iframeBlock?: {
-      src: string;
+      src?: string;
+      srcdoc?: string;
     };
     videoBlock?: {
       src: string;

src/editor/core/draw/particle/block/modules/IFrameBlock.ts

@@ -20,7 +20,11 @@ export class IFrameBlock {
     iframe.style.border = 'none'
     iframe.style.width = '100%'
     iframe.style.height = '100%'
-    iframe.src = block.iframeBlock?.src || ''
+    if (block.iframeBlock?.src) {
+      iframe.src = block.iframeBlock.src
+    } else if (block.iframeBlock?.srcdoc) {
+      iframe.srcdoc = block.iframeBlock.srcdoc
+    }
     blockItemContainer.append(iframe)
   }
 }

src/editor/interface/Block.ts

@@ -1,7 +1,8 @@
 import { BlockType } from '../dataset/enum/Block'
 
 export interface IIFrameBlock {
-  src: string
+  src?: string
+  srcdoc?: string
 }
 
 export interface IVideoBlock {

src/main.ts

@@ -900,32 +900,43 @@ window.onload = function () {
           placeholder: '请输入高度'
         },
         {
-          type: 'textarea',
+          type: 'input',
           label: '地址',
-          height: 100,
-          name: 'value',
-          required: true,
+          name: 'src',
+          required: false,
           placeholder: '请输入地址'
+        },
+        {
+          type: 'textarea',
+          label: 'HTML',
+          height: 100,
+          name: 'srcdoc',
+          required: false,
+          placeholder: '请输入HTML代码（仅网址类型有效）'
         }
       ],
       onConfirm: payload => {
         const type = payload.find(p => p.name === 'type')?.value
         if (!type) return
-        const value = payload.find(p => p.name === 'value')?.value
-        if (!value) return
         const width = payload.find(p => p.name === 'width')?.value
         const height = payload.find(p => p.name === 'height')?.value
         if (!height) return
+        // 地址或HTML代码至少存在一项
+        const src = payload.find(p => p.name === 'src')?.value
+        const srcdoc = payload.find(p => p.name === 'srcdoc')?.value
         const block: IBlock = {
           type: <BlockType>type
         }
         if (block.type === BlockType.IFRAME) {
+          if (!src && !srcdoc) return
           block.iframeBlock = {
-            src: value
+            src,
+            srcdoc
           }
         } else if (block.type === BlockType.VIDEO) {
+          if (!src) return
           block.videoBlock = {
-            src: value
+            src
           }
         }
         const blockElement: IElement = {