前端 - prosemirror 如何使用Tiptap扩展实现iframe预览功能？

Question

求助求助 我尝试定义tiptap扩展使其支持iframe的预览。像这样创建后完全没反应

const editor = useEditor({  extensions: [    Node.create({      name: "IframePreview",      group: 'block',      content: '',      marks: '',      atom: true,      parseHTML() {        return [{ tag: "iframe" }]      },      renderHTML({ HTMLAttributes }) {        console.log("HTML")        return ["iframe", HTMLAttributes]      }    })  ]})

希望能够支持iframe的预览
尝试过 Extension.create

Answer 1

在ProseMirror和Tiptap中，如果你想为自定义节点添加功能，比如iframe预览，你需要确保你的扩展正确设置，并且还需要考虑安全性和跨域问题。

首先，你应当使用Extension来创建自定义节点，而不是Node.create。下面是一个简单的例子，展示了如何为Tiptap创建一个支持iframe预览的扩展：

import { Extension } from 'tiptap';const IframePreview = Extension.create({  name: 'iframePreview',  addOptions() {    return {      // 可以添加自定义选项，例如iframe的URL      url: {        default: '',        type: String      }    };  },  addProseMirrorNodes(nodes) {    nodes.iframe = {      group: 'block',      content: 'inline*',      atom: true,      draggable: false,      parseDOM: [        {          tag: 'iframe',          getAttrs: (dom) => ({            src: dom.getAttribute('src')          })        }      ],      toDOM: (node) => ['iframe', { src: node.attrs.src, ...node.attrs }]    };  },  addCommands() {    return {      // 你可以添加命令，比如插入iframe的命令      insertIframe: (attrs) => ({ state, dispatch }) => {        const { tr } = state;        const position = tr.selection.$from.pos;        tr.insert(position, state.schema.nodes.iframe.create(attrs));        return tr;      }    };  },  addKeyboardShortcuts() {    return {      // 你可以添加键盘快捷键来触发上面的命令    };  }});// 然后在你的Tiptap编辑器中引入这个扩展const editor = new Editor({  extensions: [    new IframePreview({      url: 'https://example.com/your-iframe-url' // 设置你的iframe URL    })  ],  content: '<iframe src="https://example.com/your-iframe-url"></iframe>' // 初始内容});

请注意，在实际部署中，直接插入iframe可能涉及安全问题，特别是当iframe的URL来自用户输入时。你需要确保iframe的URL是安全的，并且不会引入跨站脚本攻击（XSS）的风险。

此外，出于安全考虑，许多现代浏览器对iframe的内容有严格的限制，特别是当iframe的源与父页面的源不同时（跨域问题）。这可能导致iframe的内容无法正确显示或受到其他限制。

最后，请确保你的应用环境允许iframe的使用，并且遵守所有相关的安全和隐私规定。在Web应用中嵌入iframe可能需要特殊的配置，特别是当涉及到CORS（跨源资源共享）策略时。

如果你正在构建一个用户可以自由输入iframe URL的系统，你需要对用户输入进行严格的验证和清理，以防止潜在的安全风险。