react-grapesjs——开源代码学习与修改（初出茅庐）（一）https://developer.aliyun.com/article/1492696
⭐修改grapesjs配置项
屏蔽 views的两个按钮
原来的样式
panels/config配置
更改配置项 注释不需要的配置
import { PanelProperties } from '../model/Panel'; const swv = 'sw-visibility'; const expt = 'export-template'; const osm = 'open-sm'; const otm = 'open-tm'; const ola = 'open-layers'; const obl = 'open-blocks'; const ful = 'fullscreen'; const prv = 'preview'; interface ButtonProps { id?: string; active?: boolean; togglable?: boolean; className?: string; command?: string | (() => any); context?: string; attributes?: Record<string, any>; } interface PanelProps extends Omit<PanelProperties, 'id' | 'buttons'> { id?: string; buttons?: ButtonProps[]; } export interface PanelsConfig { stylePrefix?: string; /** * Default panels. */ defaults?: PanelProps[]; } const config: PanelsConfig = { stylePrefix: 'pn-', defaults: [ { id: 'commands', buttons: [{}], }, { id: 'options', buttons: [ { active: true, id: swv, className: 'fa fa-square-o', command: 'core:component-outline', context: swv, attributes: { title: 'View components' }, }, { id: prv, className: 'fa fa-eye', command: prv, context: prv, attributes: { title: 'Preview' }, }, { id: ful, className: 'fa fa-arrows-alt', command: ful, context: ful, attributes: { title: 'Fullscreen' }, }, { id: expt, className: 'fa fa-code', command: expt, attributes: { title: 'View code' }, }, ], }, { id: 'views', buttons: [ { id: osm, className: 'fa fa-paint-brush', command: osm, active: true, togglable: false, attributes: { title: 'Open Style Manager' }, }, // { // id: otm, // className: 'fa fa-cog', // command: otm, // togglable: false, // attributes: { title: 'Settings' }, // }, // { // id: ola, // className: 'fa fa-bars', // command: ola, // togglable: false, // attributes: { title: 'Open Layer Manager' }, // }, { id: obl, className: 'fa fa-th-large', command: obl, togglable: false, attributes: { title: 'Open Blocks' }, }, ], }, ], }; export default config;
修改成功！
同理合并配置项也是合并配置module的代码可以实现
⭐总结
⭐ 如何修改开源代码
修改开源代码的步骤如下：
- 首先要获取并安装开发环境。这包括编译器、文本编辑器和版本控制软件等。
- Fork开源项目，即在GitHub或其他代码托管平台上复制一份项目，这样你就有了自己的独立分支。
- 在你的本地机器上克隆你所Fork的项目。通过clone命令将整个项目下载到你的本地机器上。
- 创建新的分支。你需要创建一个新的分支，以便你可以在不影响其他贡献者的情况下进行更改。
- 对代码进行修改。使用你的文本编辑器打开项目文件并进行所需的更改，完成后保存文件。
- 运行测试。运行项目的测试套件，确保你的修改没有破坏现有代码的功能。
- 提交修改。使用git提交修改到你的本地分支并将这些更改推送到你的Fork仓库。
- 发送一个合并请求。你可以向原始项目的所有者发送一个请求，请求将你的分支合并到他们的主分支上。
以上是修改开源代码的基本步骤，需要结合实际情况进行具体操作。在修改开源代码时，不仅要尊重原作者的版权，还要了解开源授权协议及相应的规定。
⭐如何高效阅读开源代码
阅读开源代码可以帮助你学习其他程序员的技术，尤其是在你遇到类似的问题时，可以参考开源代码中的解决方案。以下是一些高效阅读开源代码的技巧：
- 了解项目结构：先了解项目的目录结构和代码风格，可以帮助你更快地定位代码位置和理解代码。
- 建立索引：可以使用工具或者手动建立索引，以便于更快地查找关键代码和内容。
- 浅阅读：先快速浏览代码，了解项目的整体结构和大致流程。
- 深度阅读：对于关键的代码部分，进行深度阅读，仔细理解其实现和作用。
- 调试代码：在自己的环境中运行代码，通过调试来理解代码的执行过程和实际效果。
- 参考文档：阅读开源项目的文档和介绍，可以更好地理解代码和项目。
- 学习工具：学习使用开源代码的工具，如IDE、版本控制软件等，可以更好地理解和使用开源代码。
最重要的是，在阅读开源代码时，要注重理解代码的思路和设计方式，而不是仅仅复制代码。
⭐结束
本文分享到这结束，如有错误或者不足之处欢迎指出！
