TA貢獻(xiàn)1796條經(jīng)驗(yàn) 獲得超10個(gè)贊
據(jù)我所知，目前還沒(méi)有一個(gè)好的grapesjs iframe 插件。
如果您的用例很簡(jiǎn)單，您可以創(chuàng)建自己的 iframe 塊，其中包含您需要的信息：
var editor = grapesjs.init({...});
var blockManager = editor.BlockManager;
blockManager.add('iframe', {
label: 'iframe',
content: '<iframe src="<your iframe src here>"></iframe>',
});
例如，如果您想要一個(gè)具有可自定義 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
});
這是一個(gè)有效的代碼框： https ://codesandbox.io/s/grapesjs-o9hxu
如果您需要更多自定義選項(xiàng)，您可以學(xué)習(xí)如何使用文檔創(chuàng)建自定義塊和組件：
https://grapesjs.com/docs/modules/Blocks
https://grapesjs.com/docs/modules/Components
https://grapesjs.com/docs/modules/Traits
舉報(bào)