#26472020年3月13日作者 jcamejo3 个回答
嗨@artf,希望你今天过得愉快。 当方块被拖入可能有横边边界的容器时,拖拽占位符有个小问题,上下边缘或填充也可能发生,但我不能百分百确定。 <img width=“1107” alt=“image” src=“https://user-images.githubusercontent.com/1976679/76625994-9e803e00-6538-11ea-900e-fbbe3769cabe.png”> 原因是计算容器尺寸的函数 getBoundingClientRect 在某些情况下表现不规则,返回元素宽度却未考虑影响计算的某些属性。 有人之前遇到过类似的问题。 https://stackoverflow.com/que...
artf
说实话,我会保留“getElRect”原样,因为在这种情况下用“getComputedStyle”太贵了,而且函数本身是通用的(所以用“boundingRect.width = boundingRect.width - margin.left - margin.right”这样的功能就没意义)。 我很确定问题出在排序器里,计算元素维度的函数是['getDim'](https://github.com/artf/grapesjs/blob/57ce2aa3e169d7c91b...
jcamejo
我通过阅读“getDim”函数找到了“getElRect”,但我会再做一次研究,寻找其他解决方案。 谢谢!
bgrand-ch
你好, 对于未来的问题或技术问题(非漏洞),GitHub的[讨论](https://github.com/artf/grapesjs/discussions)标签是最佳选择。 如果问题已解决,请关闭,或在[讨论](https://github.com/artf/grapesjs/discussions)->[问答](https://github.com/artf/grapesjs/discussions/categories/q-a)类别写一条详细的新消息(并关闭本期)。...
#26462020年3月13日作者 verloka3 个回答
如何为身体添加维度扇区? 
mcottret
大家好,@verloka@pouyamiralayi, 扇区列表似乎对所有应用组件都是通用的。 然而,组件包含一份属性列表,选择后可以通过样式管理器面板编辑这些属性,用于过滤应用扇区。 在[组件API参考](https://grapesjs.com/docs/api/component.html#component)中,你可以使用“可样式化”和“不可样式化”属性来包含和/或排除可编辑的属性。 默认情况下,“Body”元素(称为“Wrapper”)包含以下“可样式化”属性:“...
pouyamiralayi
@verloka根据@mcottret回答,你可以像这样恢复整个造型选项: 干杯!
mcottret
> 你好,@verloka和@pouyamiralayi,> 扇区列表似乎对所有应用组件都是通用的。> 然而,组件包含一份属性列表,选择后可以通过样式管理器面板编辑,用于过滤应用扇区。> 从 [组件 API 参考](https://grapesjs.com/docs/api/component.html#component)中,你可以使用 'styleable' 和 'unstylable' 属性来包含和/或排除可编辑属性。> 默认情况下,“Body”元素(称为“Wrapp...
#26452020年3月13日作者 Rasazna2 个回答
警告 请阅读并遵循接下来的五个步骤,然后在发布问题前删除它们遵守贡献指南 https://github.com/artf/grapesjs/blob/master/CONTRIBUTING.md仅将GitHub Issues用于BUG、功能请求或问题。在问题标题前加上上下文,例如:“[虫子]:.......'先快速搜索一下,看看有没有人没开同样的问题不要要求为你创建示例或代码,先阅读文档和API,然后你可以发布你尝试过的(我们希望看到你的代码)以及你无法实现的所有相关陈述/问题都必须填写/回答,否则问题可能已结束你正在提交一个漏洞你用的是最新版本吗(旧版本不支持)?如果不确定,在控制台输入“grapesjs.version”并按回...
pouyamiralayi
[补充](https://grapesjs.com/docs/api/component.html#append)
Rasazna
我想在不移除之前添加的数据的情况下,通过特质管理器选项向 div 组件添加数据,有没有办法做到? 有人能帮我提供一个示例代码吗?
#26442020年3月13日作者 Eshayat3 个回答
你好, 我们在Angular应用中使用了grapesjs。我们已经成功创建并保存了 grapesjs 的 html/css 到数据库中。我们仍然找不到其中一件事,在编辑模式下我们想调用API,获取HTML、CSS,然后加载到grapesjs canvas中。我们尝试过用storage manager,但没用,如果有人能分享固定的方法或代码样本,那就太好了。 此致, 埃沙亚特
mcottret
起初,我想我不会用我想调用的原生存储管理器。告诉我我们该怎么做, 如果你不愿意使用存储管理器,我相信这个配置只能用来设置默认画布内容,所以你可以在服务器响应后用这种方式初始化编辑器。 如果你想在初始化后动态更新画布内容,可以使用 [Editor API](http...
mcottret
你好@Eshayat,我们尝试过用存储管理器,但没用 你能详细说说吗?你是否正确按照“存储管理器”文档中的[“设置远程存储”](https://grapesjs.com/docs/modules/Storage.html#setup-remote-storage)和[“设置服务器”](https://grapesjs.com/docs/modules/Storage.html#setup-the-server)部分操作? 以下配置应可行,前提是你的终端返回的数据格式正确:
#26422020年3月12日作者 jorisros暂无回答
把荷兰语加入项目。
#26412020年3月12日作者 vFire3 个回答
我在想,GrapesJs 里有没有可能有一个代码编辑器,这对前端开发者来说会好很多。 如果支持sysn,滚动会更好,比如你右键点击元素时,代码会自动滚动并高亮与元素相关的代码块。
vFire
还有一个选项是禁用样式管理器,因为现实用户如果不是技术人员,他们不会理解CSS风格,而且风格太复杂,对于前端开发者来说,没有代码编辑器,如果你想要一个真正设计良好的响应式页面,工作起来太困难。 这种直排版会带来很多问题。有很多足够好的车架可以避免使用任何直排式,比如Tailwindcss。
vFire
更进一步,我只是想设置某个特定标签级别的规则,这样它既可选择又可可视化,但规则之外的可视化不会改变它,或者我们可以直接在代码编辑器中选择它,然后直接用行代码编辑。例如,只有正文下方的根 .page 可以拖动排序和丢弃。
artf
这可能是插件 https://grapesjs.com/docs/modules/Plugins.html 的好候选
#26402020年3月12日作者 Ace06113 个回答
感谢你提供这个超棒的插件。我正在把它和我当前的项目整合起来。我对它有一个问题。 这是我的代码,我添加了一个带有3个输入字段的新扇区,我想用这些输入字段中的值更改所选块的属性(id, readOnly)。例如:我想用我的功能更改所选块的ID。我该如何实现这一点? 编辑。StyleManager.addSector( “我的区”, { 名称:“元素属性”, 开启:真, 属性: [{ name: “id” }, { name: “name” }, { name: “readOnly” }] buildProps: ['id', 'readOnly'], }, { 地点:0 } ); 以及更改所选组件的属性: editor.on(“blo...
pouyamiralayi
@Ace0611你可以用[traits](https://grapesjs.com/docs/modules/Traits.html)来控制道具(ID、头衔等)和属性。 干杯!
pouyamiralayi
@Ace0611用特征识别会覆盖这个吗? 是的!“id”只是普通道具,和其他道具一样。而且要注意,葡萄树已经默认给你“id”和“title”的特征了。 干杯!
Ace0611
@pouyamiralayi:谢谢你的帮助。不过有个疑问,每个被拖拽的方块都会产生动态ID。用特征来识别会覆盖这个吗?抱歉,我现在正在旅行,暂时不能自己动手。我会尽快试试。
#26392020年3月12日作者 MiseryMachine3 个回答
你好, 我正在使用 GrapesJS 让用户创建报表模板。 我遇到过一个创建表格的块,但表格行是由Mustache代币决定的。 然而,渲染时,标记会被移出表元素。 我认为表格或表格行样式不允许这些标记存在于表格元素结构中。 我的街区: “JavaScript bm.add('product-list-block', { 标签:“产品列表”, 属性:{ 类别:“FA FA-header” }, 分类:“产品”, 内容: <div> <table data-gjs-type=“product-list-type” style=“width: 100%;margin: 10px 15px;”> <tr style=“高度:24px;背景...
pouyamiralayi
你试@MiseryMachine过把桌面内部包裹在你块定义中的“tbody”里吗?或者至少把你的胡须标记移到标签里?
MiseryMachine
谢谢你的建议。 我试过,结果还是一样,遗憾的是。 块状脚本: “JavaScript bm.add('product-list-block', { 标签:“产品列表”, 属性:{ 类别:“FA FA-header” }, 分类:“产品”, 内容: <div> <table data-gjs-type=“product-list-type” style=“width: 100%;margin: 10px 15px;”> <tr style=“高度:24px;背景:#72a1c...
artf
不,你不能这么做,因为那时你的HTML是无效的,HTML解析器会把它移出去。你需要创建一个有效的HTML内容,才能让浏览器正确渲染: '''html <tr> <td> {{#bomGroupProducts}} <table> ... <tr> <td style=“width: 15%”>{{productImageUrl}}</td> <td> <div style=“font-weight: bold”>{{productName}}</div> <div>{{pr...
#26382020年3月11日作者 orionseye1 个回答
我该如何定义一个新的类别,以便后续创建的模块使用......还没给它分配一个区块......然后默认关闭它? 我的意思是,这个可以用于添加一个区块,但如果我有多个区块可以反复添加到同一个类别呢?有没有办法让类别ID、标签、开放状态在其他地方定义,而不是重复这个过程? 为了折叠默认的,我用了 “编辑。BlockManager.getCategories().each(ctg => ctg.set('open', false)'
artf
一旦创建了类别,你可以用它的ID,比如“category: 'some-cat'”
#26372020年3月11日作者 mcottret3 个回答
又见面了:) 我们团队最近开始定制编辑器并移除网页预设,可能发现了一些与预览模式相关的bug:退出预览模式时,如果默认的“选项”面板已被移除,或者“sw-visibility”按钮已被移除(来自[这里](https://github.com/artf/grapesjs/blob/dev/src/commands/view/Preview.js#L52),如果是“editor”,则会触发错误。Panels.getButton('options', 'sw-visibility')' 结果为 null,参见 #2589) 一个建议的解决方案是循环浏览面板集合(通过“editor.”检索)。Panels.getPanels')来查找“s...
artf
无论如何,预览运行执行时按钮>按钮都已经被禁用了,对吗? 哦,对了 🤦 ♂从你对链接问题的回复来看,我理解这种行为是有意为之,所以也许解决办法就是像你说的那样,把两个按钮的上下文分开? 好吧,这可能真的有效......因为处于不同的上下文,其他按钮不会阻止它,你也可以完全不依赖按钮(正如你说的,我可以把它放在另一个面板里),而是通过使用 [Commands.getActive API](https://grapesjs.com/docs/api/commands.html...
artf
感谢@mcottret所有的参考资料,写得真好:)当预览和 sw-visibility 按钮在同一面板时,#2589 引入的行为会被破坏,这似乎来自 ButtonView 的活跃变更监听器,该监听器会禁用面板中的所有活动按钮。所以如果预览被激活,它会在执行命令前关闭 sw-visibility 按钮,之后会破坏当前的检查。 我认为在这种情况下,我们应该先通过检查 sw-visibility 是否激活来创建一个变量标志,然后再做: https://github.com/art...
mcottret
谢谢你的回复@artf! 抱歉,我不太确定该怎么做,据我了解,[active change listener](https://github.com/artf/grapesjs/blob/dev/src/panels/view/ButtonView.js#L101)是在“Preview”的“run”之前执行的,所以“sw-visibility”按钮无论如何都应该在执行“Preview”的“run”时被禁用,对吗? 根据你对相关问题的回复(https://github.com...