将外部内容拖拽到 Canvas
我只是想澄清我想实现的目标: 我有一些100+ html片段,在当前的“手工”构建器上使用,需要迁移到GrapesJS。 令我惊讶的是,这似乎并不是一份简单的工作。 目前,我用两个 Ajax 函数实现了所需的功能。 a) ajax + scan_dir 用于列出目录内的所有文件(图片和 HTML 文件) b) 用户点击(或拖拽)预览图像到可编辑的 div 中,Ajax 获取对应的 HTML 文件,并将其放置在所需位置。 完成! GrapesJS 如何解决这个问题? 至少,我原本以为带标准HTML5标签的文本/HTML支持从编辑器外部拖拽到编辑器画布。 编辑:原始html可以从外部拖入编辑器,我认为这可能是个变通方法,不用处理每个需...
阅读下方完整回答 ↓问题
我正在尝试从一个列出大量HTML文件(html片段)的模态中添加d&d功能......进入编辑器画布。 每个字母都用“''包裹内容<section>
我尝试用“canvas:dragdata”来允许将数据插入画布
editor.on('canvas:dragdata', (dataTransfer, result) => {
if(el.tagName == 'SECTION' & el.classList.contains('section')){
result.content = { 类型:'text/html'}
}
});
据我理解,这是为了扩展文件类型,可以丢弃,GrapesJS支持文本+图片,所以上述方法应该可行?
与此同时,在玩弄了之后 “编辑。DomComponents.addType' 我正在改变我的问题范围......请见下方评论
回答(2)
我只是想澄清我想实现的目标: 我有一些100+ html片段,在当前的“手工”构建器上使用,需要迁移到GrapesJS。 令我惊讶的是,这似乎并不是一份简单的工作。 目前,我用两个 Ajax 函数实现了所需的功能。 a) ajax + scan_dir 用于列出目录内的所有文件(图片和 HTML 文件) b) 用户点击(或拖拽)预览图像到可编辑的 div 中,Ajax 获取对应的 HTML 文件,并将其放置在所需位置。 完成! GrapesJS 如何解决这个问题? 至少,我原本以为带标准HTML5标签的文本/HTML支持从编辑器外部拖拽到编辑器画布。 编辑:原始html可以从外部拖入编辑器,...
这里你可以找到如何做到这一点 https://github.com/artf/grapesjs/issues/2595
相关问答
通过相似的问题讨论继续研究。
问题 #3279
如何让 TextNode 编辑更新组件内容?
我正在构建一个自定义的“textarea”组件,希望它能像内置的“text”组件一样,这样编辑grapesjs画布上的textnode时,会更新'.components'中的'textnode'。我希望组件能正确导出为 HTML,比如“<textarea>我的用户编辑了 TEX...
问题 #2862
自定义类型导入时未识别
你好, 我成功创建了一个包含可点击图片的新类型。但不幸的是,导入时HTML解析器无法识别新的自定义类型。 这是我新类型的源代码: “编辑。DomComponents.addType('imagelink', { isComponent: el => { if (el.tagNa...
问题 #509
跨度不能作为文本编辑
你好,Artf, 我在导入一些HTML模板时遇到了问题。起初我无法看到跨度文本。但在帮编辑重新整理后,我无法将它们作为文本进行编辑。 ' 让 domc = this.editor.DomComponents; 让textType = domc.getType(“text”);...
问题 #4837
HTML元素的ID会在projectData加载的不同页面上递增
葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? Firefox 109 可复制演示链接 https://grapesjs.com/demo.html 描述一下那个虫子 你好, 我注意到当我在 projectData 中加载多个 HTML 中使用...
与此问题匹配的付费插件
根据问题关键词和标签相关性精选,助你更快交付。
正在加载付费插件推荐……
浏览插件分类
直接跳转到市场上的插件分类页面。