在SCSS中导入codemirror库时出现错误
问题
葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? Firefox 112.0.1 可复制演示链接 https://github.com/davidrhoderick/grapesjs-test 描述一下那个虫子 如何复现这个漏洞?跟随入门(你可以用Typescript和SCSS看到我用一个基础的Parcel项目来理解的结构)当你进入“主题”步骤时,尝试导入Grapes SCSS时会报错。 预期的行为是什么? 只要我按照“入门教程”操作,一切都能正常工作。 目前的行为是什么? 当我进入应该允许我用SCSS自定义应用外观的步骤时,出现了以下错误: “壳” @parcel/transformer-sass:预期的“{”。 ╷ 11 │ typeof exports === 'object' & typeof module !== '未定义'?module.exports = factory() : │ ^ ╵ nodemodules/codemirror/lib/codemirror.js 11:48 @import nodemodules/grapesjs/src/styles/scss/main.scsss 2:9 @import src/styles.scss 10:9 @import src/index.html 2:15 根样式表 行为准则 [...
回答(3)
有趣的是,基于CSS的样式确实有效。
看起来 Parcel 变换器试图导入的是 'codemirror/lib/codemirror.js',而不是 'codemirror/lib/codemirror.css': “''CSS @import“codemirror/lib/codemirror”;
所以我建议你在相关包裹上开启问题
谢谢你举报,@davidrhoderick。 关于在SCSS中导入codemirror库出错的好建议!虽然这个具体功能还没有出现在核心 API 中,但有几种方法可以实现类似的行为。 使用事件系统: “JavaScript editor.on('component:update', (component) => { 你的逻辑 }); ``` 替代方法: 听取“selector:add”以获取CSS选择器更改 使用“selector:custom”来表示自定义规则 利用“change:*”事件进行细致跟踪 构建一个插件,扩展编辑器并具备此功能 正式宣布: 如果此功能能惠及更多用户,考虑在 Gra...
相关问答
通过相似的问题讨论继续研究。
问题 #6663
符号在逐步加载页面时会断裂(实例丢失__symbol链接)
这里有一段展示这个bug的视频: https://github.com/user-attachments/assets/0fdc76ed-cee5-4481-98b1-cbbf52572b31 GrapesJS版本 [x] 我确认使用最新版本的GrapesJS 你用的是什么浏览...
问题 #6659
符号样式未同步
GrapesJS版本 [x] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? Firefox 145.0(64位) 可复制演示链接 https://jsfiddle.net/arturarseniev/ta19s6go/ 描述一下那个虫子 如何复现这个漏洞? 进入官...
问题 #6318
无法在Block media svg中使用透明填充
葡萄JS版本[X] 我确认使用最新版本的GrapesJS本期提交时为“[email protected]”你用的是什么浏览器? Firefox 132,Chrome 131可复制演示链接 https://jsfiddle.net/x54f9v68/1/描述一下那个虫子 如何复现这个...
问题 #6646
当我想添加填充时出现JavaScript错误
GrapesJS版本 [x] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? Chrome 与 Firefox 可复制演示链接 描述一下那个虫子 如何复现这个漏洞? Chrome 和 Firefox: 为图片/文本添加填充 有时会出现错误,有时不会发生。 https...
与此问题匹配的付费插件
根据问题关键词和标签相关性精选,助你更快交付。
正在加载付费插件推荐……
相关教程
关于同一主题的深入指南。
教程
GrapesJS DevTools: A Developer Panel Inside Your Editor
If you've ever debugged GrapesJS with console.log(editor.getSelected()) and a dozen throwaway event listeners — this post is for you.
教程
How to Build a Production GrapesJS Editor: The Complete Walkthrough of Brief, Preset, Plugins, and Services
A complete walkthrough of building a production GrapesJS editor: how to choose a preset, pick plugins, and scope setup services without burning a sprint.
教程
Big Updates: TinyMCE 8 and Placeholder 2.0 for GrapesJS
In May we shipped major updates to two of our most popular GrapesJS plugins — TinyMCE Inline Text Editor and Placeholder.
浏览插件分类
直接跳转到市场上的插件分类页面。