TA貢獻1796條經驗 獲得超10個贊
據我所知，目前還沒有一個好的grapesjs iframe 插件。
如果您的用例很簡單，您可以創建自己的 iframe 塊，其中包含您需要的信息：
var editor = grapesjs.init({...});
var blockManager = editor.BlockManager;
blockManager.add('iframe', {
label: 'iframe',
content: '<iframe src="<your iframe src here>"></iframe>',
});
例如，如果您想要一個具有可自定義 src 特征的 iframe 組件，您可以這樣做：
var editor = grapesjs.init({...});
editor.DomComponents.addType("iframe", {
isComponent: el => el.tagName === "IFRAME",
model: {
defaults: {
type: "iframe",
traits: [
{
type: "text",
label: "src",
name: "src"
}
]
}
}
});
editor.BlockManager.add("iframe", {
label: "iframe",
type: "iframe",
content: "<iframe> </iframe>",
selectable: true
});
這是一個有效的代碼框： https ://codesandbox.io/s/grapesjs-o9hxu
如果您需要更多自定義選項，您可以學習如何使用文檔創建自定義塊和組件：
https://grapesjs.com/docs/modules/Blocks
https://grapesjs.com/docs/modules/Components
https://grapesjs.com/docs/modules/Traits
舉報