react-grapesjs——开源代码学习与修改（初出茅庐）

文章目录

- ⭐前言
- ⭐grapesjs初始化过程
- - 💖 渲染大体流程
  - - 💖 Editor对象创建
    - 💖 EditorModel 对象创建
    - 💖 load modules 加载定义的目录模块Module
    - 💖 StyleManager渲染过程
- ⭐修改grapesjs配置项
- ⭐总结
- - ⭐ 如何修改开源代码
  - ⭐如何高效阅读开源代码
- ⭐结束

⭐前言

大家好，我是yma16，本文分享关于react-grapesjs——源码学习。
该系列往期文章：
react搭建在线编辑html的站点——引入grapes实现在线拖拉拽编辑html
结果演示：
https://yongma16.xyz/react-mjml/
demo

⭐grapesjs初始化过程

源码：https://github.com/GrapesJS/grapesjs
目录结构
dir
运行源码
在这里插入图片描述

💖 渲染大体流程

💖 Editor对象创建

new Editor进入 Editor对象
class Editor implements IBaseModule<EditorConfig> 执行构造函数 constructor

  constructor(config: EditorConfig = {}, opts: any = {}) {
    this.config = {
      ...defaults,
      ...config,
      pStylePrefix: config.stylePrefix ?? defaults.stylePrefix,
    };
    this.em = new EditorModel(this.config);
    this.$ = opts.$;
    this.em.init(this);
    this.editor = this.em;
  }

💖 EditorModel 对象创建

class EditorModel extends Model 执行构造函数

  constructor(conf: EditorConfig = {}) {
   super();
   this._config = conf;
   const { config } = this;
   this.set('Config', conf);
   this.set('modules', []);
   this.set('toLoad', []);
   this.set('storables', []);
   this.set('selected', new Selected());
   this.set('dmode', config.dragMode);
   const { el, log } = config;
   const toLog = log === true ? keys(logs) : isArray(log) ? log : [];
   bindAll(this, 'initBaseColorPicker');

   if (el && config.fromElement) {
     config.components = el.innerHTML;
   }

   this.attrsOrig = el
     ? toArray(el.attributes).reduce((res, next) => {
         res[next.nodeName] = next.nodeValue;
         return res;
       }, {} as Record<string, any>)
     : '';

   // Move components to pages
   if (config.components && !config.pageManager) {
     config.pageManager = { pages: [{ component: config.components }] };
   }

   // Load modules
   deps.forEach(constr => this.loadModule(constr));
   storableDeps.forEach(constr => this.loadStorableModule(constr));
   this.on('change:componentHovered', this.componentHovered, this);
   this.on('change:changesCount', this.updateChanges, this);
   this.on('change:readyLoad change:readyCanvas', this._checkReady, this);
   toLog.forEach(e => this.listenLog(e));

   // Deprecations
   [{ from: 'change:selectedComponent', to: 'component:toggled' }].forEach(event => {
     const eventFrom = event.from;
     const eventTo = event.to;
     this.listenTo(this, eventFrom, (...args) => {
       this.trigger(eventTo, ...args);
       this.logWarning(`The event '${eventFrom}' is deprecated, replace it with '${eventTo}'`);
     });
   });
 }

💖 load modules 加载定义的目录模块Module

deps的类型

const deps: (new (em: EditorModel) => IModule)[] = [
  UtilsModule,
  I18nModule,
  KeymapsModule,
  UndoManagerModule,
  StorageManager,
  DeviceManager,
  ParserModule,
  StyleManager,
  SelectorManager,
  ModalModule,
  CodeManagerModule,
  PanelManager,
  RichTextEditorModule,
  TraitManager,
  LayerManager,
  CanvasModule,
  CommandsModule,
  BlockManager,
];

    // Load modules
    deps.forEach(constr => this.loadModule(constr));

💖 StyleManager渲染过程

路径 src/style_manager

在这里插入图片描述

构造函数

constructor(em: EditorModel) {
    super(em, 'StyleManager', new Sectors([], { em }), stylesEvents, defaults);
    bindAll(this, '__clearStateTarget');
    const c = this.config;
    const ppfx = c.pStylePrefix;
    if (ppfx) c.stylePrefix = ppfx + c.stylePrefix;
    this.builtIn = new PropertyFactory();
    this.properties = new Properties([], { em, module: this });
    this.sectors = this.all; // TODO check if (module: this) is required
    const model = new Model({ targets: [] });
    this.model = model;

    // Triggers for the selection refresh and properties
    const ev = 'component:toggled component:update:classes change:state change:device frame:resized selector:type';
    this.upAll = debounce(() => this.__upSel(), 0);
    model.listenTo(em, ev, this.upAll as any);
    // Clear state target on any component selection change, without debounce (#4208)
    model.listenTo(em, 'component:toggled', this.__clearStateTarget);

    // Triggers only for properties (avoid selection refresh)
    const upProps = debounce(() => {
      this.__upProps();
      this.__trgCustom();
    }, 0);
    model.listenTo(em, 'styleable:change undo redo', upProps);

    // Triggers only custom event
    const trgCustom = debounce(() => this.__trgCustom(), 0);
    model.listenTo(em, `${evLayerSelect} ${evTarget}`, trgCustom);

    // Other listeners
    model.on('change:lastTarget', () => em.trigger(evTarget, this.getSelected()));
  }

⭐修改grapesjs配置项

屏蔽 views的两个按钮
原来的样式
init

panels/config配置
change-panels
更改配置项注释不需要的配置

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;