#32402021年1月18日作者 marcepoblet2 个回答
https://user-images.githubusercontent.com/64096863/104953457-35adf180-59a5-11eb-85bd-2f84ffa24d83.mp4 删除模板后,文本和按钮块的样式会丢失,需要多次撤销和重做。 问题是,从块中应用的样式在应用撤销和重做功能后会丢失。我附上了一个视频来展示这个问题。
artf
这个问题应该会在最新版本中得到修复,请正确遵循问题模板,并确保在提交错误前使用最新版本
ClaudeCode
谢谢你举报,@marcepoblet。 感谢你分享关于UndoManager:撤销和重做组合不正常,丢失了一些样式的报告。为了帮助团队调查并优先排序: 请提供: 一个最小可复现的例子(CodeSandbox/JSFiddle) 你的GrapesJS版本号 浏览器和操作系统信息 浏览器控制台的任何错误信息 重现问题的步骤 最有帮助的是什么: 简约代码示例(不是你整个项目) 屏幕录制或截图显示问题 明确区分预期行为与实际行为 你正在使用的GrapesJS配置 有了这些细节,维护...
#32382021年1月18日作者 sizhousama3 个回答
我用块写html字符串,需要引入很多外部脚本和样式,但我尝试了所有方法,拖动块到画布时脚本不生效,样式可以加载,希望能得到帮助。通过附加子加载 init load by canvas:{scripts:[...]} 。 希望...
sizhousama
控制台显示已加载 
ClaudeCode
谢谢你举报,@sizhousama。 关于[问题]:如何加载外部JavaScript,我尝试了所有方法,都没用。推荐的 StyleManager 方法是使用事件驱动的 API。 从这里开始: 查看你所在模块的[GrapesJS文档](https://grapesjs.com/docs/) 寻找“on()”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式: “JavaScript 留意变化 editor.on('change', () => consol...
#32352021年1月15日作者 AnnaSu1 个回答
摘自 https://github.com/artf/grapesjs/blob/dev/src/editor/index.js#L33'component:update' - 当组件被更新(移动、样式等)时触发,模型作为参数传递给回调 重现这个bug使用“move”API 移动组件https://grapesjs.com/docs/api/component.html#move点击箭头上/箭头下按钮https://codesandbox.io/s/charming-mendel-ivrlz?file=/index.html  => { 你在这里的行动 }, 0); 推荐的下一步步骤: 如果还没测试过,请用最新的GrapesJS版本测试 提供最小可重复的示例(CodeSandbox)——这有助于...
#32312021年1月13日作者 vatte214 个回答
大家好, 我们都知道 GJS-CKeditor-plugin 是处理 [data-gjs-type]=“text” 组件的。 我想知道,我们能不能改变这个选项? 我想自己创建一个自定义组件,比如 [data-gjs-type]=“anyDiv”,并且拥有类似的功能 [data-gjs-type]=“text”。也许有人知道怎么改变? 也许我可以在 CKeditor 配置里改一下?例如,当我们初始化CKeditor时: 选项:{ !!!!!例如: 格式:'text',想添加('anyDiv'), 语言:“恩”, startupFocus:确实如此, extraAllowedContent: '();{}', // 允许任意类和任意内...
Abhisheknanda1344463
@vatte21 让你的组件可以编辑。你必须这样扩展组件中的文本类型 “''js 编辑。Components.addType('anyDiv', { 型号:{ 默认值:{ 类型:“文本”, 特质:[ ...编辑。Components.getType(type.id).model.prototype.defaults.traits, ...[] ] }, reRender() { this.view.render(); }, }, 扩展:“文本”, isComponent:...
vatte21
@Abhisheknanda1344463 谢谢!我会试试
abulka
@Abhisheknanda1344463你的代码片段给我提示错误“Uncaught ReferenceError: type is not defined” “类型”在哪里定义?
#32282021年1月12日作者 Abhisheknanda13444631 个回答
你好@artf 我添加了一个新组件 这是代码 “''js 编辑。DomComponents.addType('header', { 型号:{ 默认值:{ 标签名称:'h1', 类型:“头部”, 尺寸:“H1”, 特质:[ { 名称:“尺寸”, 标签:“尺寸”, 类型:“选择”, 变革提案:1, 选项:[ {值:'h1',名称:'One'}, {值:“h2”,名称:“二”}, {值:'h3',名称:'三'}, ] } ], 内容:“请在此插入你的头文字” }, init(){ this.listenTo(this, 'change:size', this.更新头); }, Updatehead(){ var newElem = $(...
ClaudeCode
谢谢你举报,@Abhisheknanda1344463。 关于组件价值没有变化的好问题。ProseMirror 推荐的方法是使用事件驱动的 API。 从这里开始: 查看你所在模块的[GrapesJS文档](https://grapesjs.com/docs/) 寻找“on()”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式: “JavaScript 留意变化 editor.on('change', () => console.log('somethi...
#32252021年1月9日作者 Abhisheknanda13444632 个回答
你好@artf 我尝试用复选框特性更新样式,但它没有调用函数。 这是代码 非常感谢你能提供的任何见解! 谢谢
Abhisheknanda1344463
@artf 搞定了,傻乎乎的——错误 移动模型中的初始化函数。 结案
ClaudeCode
谢谢你举报,@Abhisheknanda1344463。 关于如何从复选框特性更新样式?的好问题。推荐的 StyleManager 方法是使用事件驱动的 API。 从这里开始: 查看你所在模块的[GrapesJS文档](https://grapesjs.com/docs/) 寻找“on()”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式: “JavaScript 留意变化 editor.on('change', () => console.log('...
#32232021年1月7日作者 ianef3 个回答
我一直在玩 GrapesJS,并尝试把它集成到 Symfony 5 的项目中。特别是,我希望能够在编辑器中编辑基于Bootstrap 4和其他组件(如FontAwesome Pro)的模板,以及基于这些的自定义块。 我用Symfony的Webpack-Encore捆绑包来生成应用程序的脚本和样式文件,这让当前的iframe画布系统用同样的版本化组件(如Bootstrap等)工作非常头疼。 目前我只能通过初始化配置向画布注入样式和脚本URL,比如这样: 问题是我想保留与主应用中包含组件版本完全相同的版本。如果我升级这些,我希望它能反映在画布使用的组件中,这可能还包括自定义代码和样式。 在 SymFony 和其他主要框架中,链接根资源...
ianef
真是太遗憾了。我没说要从其他网站取用,我想做的是保持和项目其他部分的一致性。 算了,我还是继续找别的地方,找一个能更好地整合当前大型应用构建方式的编辑器。Webpack 和其他转译器确实是大型项目的领先选择,即使是小项目也有好处。
artf
嗨 Ian,如果你需要从 URL 加载 HTML 内容,我只能建议在服务器端获取并用该内容初始化编辑器(在浏览器中加载外部资源通常会遇到跨源问题),所以就浏览器的工作原理来说,我看不出添加这种功能的合理性。
ClaudeCode
谢谢你举报,@ianef。 关于FEAT:从URL创建画布的建议很棒!虽然这个具体功能还没有出现在核心 API 中,但有几种方法可以实现类似的行为。 使用事件系统: “JavaScript editor.on('component:update', (component) => { 你的逻辑 }); ``` 替代方法: 听取“selector:add”以获取CSS选择器更改 使用“selector:custom”来表示自定义规则 利用“change:*”事件进行细致跟踪 构...
#32222021年1月7日作者 bgrand-ch3 个回答
我会手动在渲染组件中添加一个新节点。 视觉效果还可以,但无法保存,因为我的风格不是用自动生成的GrapesJS ID。 要手动解决这个难题,我双击要进入的组件,然后在画布主体中点击外部。然后,将 GrapesJS ID 和 'data-gjs-type='text' 添加到新节点,从而可以保存。 Vue.js: “Main.vue”文件的一部分: “''js 文本编辑器 https://grapesjs.com/docs/api/richtexteditor.html https://css-tricks.com/creating-vue-js-component-instances-programmatically/ const...
bgrand-ch
优化后的“TextEditor.vue”文件: “''js // ... onFontValidate () { const { rte } = this.getRteData() const spanNode = document.createElement('span') 设 anchorNode = {} this.selection.childNodes.forEach(childNode => { console.log({ childNode }) if (ch...
bgrand-ch
i️ 它不能直接用 HTML,只能用 JSON。 Component = JSON 节点(html元素 + GrapesJS 数据) “''js addStylesToText (styles, tagName = 'span') { const inlineStyles = styles.map(style => style.join(':')).join(';') + ';' const selectedComponent = this.editor.getSelect...
ClaudeCode
谢谢你举报,@bgrand-ch。 关于新节点添加后如何刷新/重新渲染?的好问题。ProseMirror 推荐的方法是使用事件驱动的 API。 从这里开始: 查看你所在模块的[GrapesJS文档](https://grapesjs.com/docs/) 寻找“on()”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式: “JavaScript 留意变化 editor.on('change', () => console.log('something...
#32192021年1月6日作者 Abhisheknanda13444632 个回答
你好@artf 我卡在一件事上,我想添加一个模块,也想用职业名称来增加风格 这是我的代码 -: 这正好给了我想要的效果 HTML部分是HTML代码,样式部分是样式部分,但我想为它添加一个新的特征,以及如何在这里定义类型 另一方面,当我定义类型并做类似的事情时 添加一个新特性后,它给了我 div 标签和内联样式,如截图所示。 你能帮我解答一下吗 谢谢 如果我在组件中定义内容,那我如何用类名定义样式 <img width=“413” alt=“截图 2021-01-06 上午11:04 24” src=“https://user-images.githubusercontent.com/20657737/103745089-e242b...
artf
“''js 内容:{ 内容:section_content,// <- 你应该用“components”,而不是“content”...... 输入:'section', } '' 帮自己一个忙,别再把整个区块定义成块,采用组件导向的方法,这样你的块主要会是这样:'''js bm.add('custom-section', { label: 'Section', media: '<svg...>', 内容:{ 类型:“自定义区块”}, ... }); ```
ClaudeCode
谢谢你举报,@Abhisheknanda1344463。 感谢你分享关于为块添加类型和带有类名的CSS的报告。为了帮助团队调查并优先排序: 请提供: 一个最小可复现的例子(CodeSandbox/JSFiddle) 你的GrapesJS版本号 浏览器和操作系统信息 浏览器控制台的任何错误信息 重现问题的步骤 最有帮助的是什么: 简约代码示例(不是你整个项目) 屏幕录制或截图显示问题 明确区分预期行为与实际行为 你正在使用的GrapesJS配置 有了这些细节,维护者可以更快地...
#32182021年1月5日作者 bgrand-ch4 个回答
我想在“rte.selection()”周围添加一个带有内联样式的新HTML元素。 以下面的例子来说,HTML还可以,但JSON部分可能不太行: “''js const editorRte = this.editor.RichTextEditor // ... editorRte.add('fontSize', { 图标:” <select> <option value=“” 已禁用 已选中>Size</option> <option value=“8px”>8 pixels</option> <option value=“12px”>12像素</option> <option value=“16px”>16像素</option>...
artf
@bgrand-ch,你说的“可能”是什么意思?😅
bgrand-ch
@artf感谢你的快速回复🙂,更新到“0.16.30”后我的问题就解决了。 🎉
bgrand-ch
https://github.com/artf/grapesjs/issues/3069 🤔