PageKit — 可自托管的 GrapesJS 建站工具,附完整源码。 获取抢先体验

问题 #565💬 已回答提出于 2017年11月23日作者 paulroberttaylor-zz0 个反应

自定义HTML元素

快速解答作者 artf

是的,你可以在自定义组件中使用不同的标签名称 “''js const dc = 编辑器。主导组件; const defaultType = dc.getType('default'); dc.addType('my-custom-type', { model: defaultType.model.extend({ 标签名称:“自定义标签” }, { isComponent(el) { if(el.tagName == 'CUSTOM-TAG') return {type: 'my-custom-type'} }, }), view: defaultType.view.extend({ 标签名称:'div' //<-- 在 canv...

阅读下方完整回答 ↓

问题

是否可以使用自定义的 HTML 元素,例如:

<body> <my-custom-tag/> </body>

哪个会为预览窗口渲染特定的 html,但源代码输出的是自定义标签?

谢谢, 保罗

回答(3)

artf• 2017年11月23日

是的,你可以在自定义组件中使用不同的标签名称 “''js const dc = 编辑器。主导组件; const defaultType = dc.getType('default'); dc.addType('my-custom-type', { model: defaultType.model.extend({ 标签名称:“自定义标签” }, { isComponent(el) { if(el.tagName == 'CUSTOM-TAG') return {type: 'my-custom-type'} }, }), view: defaultType.view.extend({ 标签名...

paulroberttaylor-zz• 2017年11月24日

谢谢@artf,这让我找到了正确的方向。

如果我想让区块中需要编辑的内容出现在自定义标签代码中,我该如何实现?

artf• 2017年11月24日

你是说像这样的东西? “''js 编辑。BlockManager.add('custom-block', { 标签:“自定义块” 内容:“<custom-tag>......</custom-tag>” })

相关问答

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

问题 #1770

如果在主题主体中指定了自定义标签的组件,则不会被渲染

你好 我做了一个非常简单的 GrapesJS 编辑器骨架。 HTML模板: JavaScript: 装载结果: ![图片](https://user-images.githubusercontent.com/2712350/52058564-6609e480-2570-11e9...

3 个回答更新于 2020年2月6日

问题 #916

为什么图层没有元素标签名称?

我正在尝试 grapes内部结构,因为我将来想有所贡献。我主要感兴趣的是用通用的HTML网站来做值得,无论CSS和HTML的风格和结构如何(包括doctype、body support等)。 我原本以为 layers 层级会代表DOM树。虽然目前看起来是这样,但元素的命名似乎不...

3 个回答更新于 2019年12月17日

问题 #989

连续的跨度在 grapes编辑器中与普通窗口中渲染空白空间的方式不同

我花了大半个下午试图调试这个问题。虽然我已经把它简化成一个小且易于复现的测试用例,但我还没找到问题的根本原因。希望有人能帮忙。 请注意以下HTML模板: 如果你在浏览器中渲染,它会呈现为: <img width=“133” alt=“截图 2018-03-29 下午1:36 3...

3 个回答更新于 2019年9月17日

问题 #1132

我该如何获得<body>标签及其属性

我已经为“身体”设置了背景色。但如果是编辑代码或用命令导出数据 'editor.runCommand ('gjs-get-inlined-html');' 没有设置任何“body”属性。使用这个命令时,我该如何解决身体标签要被检索的问题?还是有其他方法? 设置背景色为身体时的图...

3 个回答更新于 2019年9月17日

与此问题匹配的付费插件

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

查看全部插件

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

免费方案

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

浏览免费插件 →
高级方案

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

浏览高级插件 →

相关教程

关于同一主题的深入指南。

全部教程 →

浏览插件分类

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