问题 #2909💬 已回答提出于 2020年7月21日作者 tvvignesh0 个反应

FEAT:支持编辑器中自定义组件的搜索和命令

快速解答作者 artf

你好@tvvignesh这确实有道理,但你也知道,UI相关的事情很容易有争议,所以需要大量代码来尽可能多地自定义。 到目前为止,我已经停止在核心中添加UI内容,而是开始让它更偏向API,事实上你应该可以通过使用[Blocks API](https://grapesjs.com/docs/api/block_manager.html 实现),这和我们在Grapedrop里做的一样 ![方块搜索](https://user-images.githubusercontent.com/11614725/89180930-03ddd580-d593-11ea-8d47-1aa8625c70ea.png)

阅读下方完整回答 ↓

问题

嗨。首先,葡萄的精彩工作令人赞叹。有一个功能请求,可能会大大提升用户的可用性。 虽然 grapesjs 允许对以下成分进行分类: ![截图来自2020-07-21 13-55-26](https://user-images.githubusercontent.com/1165845/88031174-db4ce900-cb59-11ea-98ad-4fd3c95b40ee.png) 如果支持搜索组件导入和导入,那就太好了(侧边栏的普通过滤器也可以)。这样即使有数百个方块,我也能搜索并导入所需,而不是逐层挑选。 另外,如果你用过像“notion.so”这样的编辑器,它们支持通过输入编辑器时输入“/”命令来添加组件。这些功能也可以添加到 grapesjs,用户可以继续编辑页面,并用命令在光标所在的位置添加他们想要的组件。 ![截图来源:2020-07-21 13-57-32](https://user-images.githubusercontent.com/1165845/88031501-50202300-cb5a-11ea-8fea-35e1b043de2b.png) 事实上,你可以把搜索和这个结合起来(比如你想要待办事项列表,就输入 todo)。 ![截图来源:2020-07-21 13-59-14](https://user-images.githubusercontent...

回答(2)

artf2020年8月3日

你好@tvvignesh这确实有道理,但你也知道,UI相关的事情很容易有争议,所以需要大量代码来尽可能多地自定义。 到目前为止,我已经停止在核心中添加UI内容,而是开始让它更偏向API,事实上你应该可以通过使用[Blocks API](https://grapesjs.com/docs/api/block_manager.html 实现),这和我们在Grapedrop里做的一样 ![方块搜索](https://user-images.githubusercontent.com/11614725/89180930-03ddd580-d593-11ea-8d47-1aa8625c70ea.png)

tvvignesh2020年8月3日

@artf 感谢你的建议。我会尝试用Blocks API实现。

不过我有个问题。既然我想通过搜索截图中的方块来添加光标所在位置的方块,请问你推荐用什么方法使用方块 API?

你是先获取 JS 光标位置 X,Y 坐标再添加,还是有办法找到光标所在的容器?如果你能提供一些建议,告诉我如何确定该在哪里加块,我会自己试着实现看看效果如何。谢谢。

相关问答

通过相似的问题讨论继续研究。

与此问题匹配的付费插件

根据问题关键词和标签相关性精选,助你更快交付。

查看全部插件

正在加载付费插件推荐……

免费方案

在以下平台查看开源 GrapesJS 插件: GitHub 或在我们的免费目录中快速搜索。

浏览免费插件 →
高级方案

高级插件提供支持、定期更新和生产就绪的功能——为你节省数天的集成工作。

浏览高级插件 →

浏览插件分类

直接跳转到市场上的插件分类页面。