javascript - 如何在 Grapesjs 中添加 iframe?
问题描述
我尝试了一些插件,但无法跟进。基本上我想要iframe
添加和预览播客和其他东西。
有没有像grapesjs 附带的youtube 块这样的iframe 块?
解决方案
据我所知,目前还没有一个好的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
推荐阅读
- json - 在 Swift 中使用不记名令牌和 json 正文发送发布请求
- ios - 搜索结果迅速转移到其他视图控制器
- sql-server - 如何检索截断记录 (SQL Server) 。可行吗?
- java - 尝试创建此矩阵时不断出现错误?
- php - 如何一一获取 ACF 转发器字段值?
- javascript - 当试图在数组中存储一个值时,它没有被正确添加
- php - 逐步获取查询结果codeigniter
- python - Python - 将不同的变量集成到来自 for 循环的每个用户输入而不使用列表
- mysql - 如何使用 mysql 在 laravel 中为多个用户创建数据库,例如在我的情况下是管理员、用户、代理、国际代理
- python-3.x - 有什么方法可以让 python os.system 模块代码普遍工作?