react

docs:

https://create-react-app.dev/docs

https://grapesjs.com/docs/modules/Components.html#tips

unlayer

https://docs.unlayer.com/docs/custom-tools

view:

https://yongma16.xyz/react-mjml/

邮件测试

由于gitcode 仓库 使用少

git@gitcode.net:qq_38870145/react-grape.git

迁移到

git@github.com:yongma16/grapes-mjml-react.git

语言：react

背景： 开发grapesjs插件

对比 grapesjs mjml preset 发送邮件区别

自定义grapesj组件

依赖安装

$ npm i grapesjs

$ npm i grapesjs-mjml

$ npm i grapesjs-preset-webpage

$ npm i juice

前提条件

grapesjs-mjml 版本<grapejs 版本

引入

$ npm install tea-component

引入ckEditor

https://github.com/GrapesJS/ckeditor

$ npm i grapesjs-plugin-ckeditor

ckeditor 自定义工具栏 tools

安装 editor4

$ npm install --save ckeditor4

dialog bug

GrapesJS/ckeditor#26

切换思路 为了方便自定义plugin

完整引入 ckeditor 官方包 到 components

https://github.com/ckeditor/ckeditor4

fork

https://github.com/yongma16/ckeditor4

官网

https://ckeditor.com/docs/ckeditor4/latest/guide/dev_ckeditor_js_load.html

自定义 插件

https://ckeditor.com/docs/ckeditor4/latest/guide/plugin_sdk_sample.html

下载 https://ckeditor.com/ckeditor-4/download/

下载 openSource

online builder https://ckeditor.com/cke4/builder

自定义插件调用api https://ckeditor.com/docs/ckeditor4/latest/api

react 引入 ckeditor

npm install ckeditor4-react

inline 内联富文本 ckeditor

https://ckeditor.com/docs/ckeditor4/latest/examples/inline.html

sharedspace 组件 必须 维持位置和事件

chart 图表组件

git+https://github.com/image-charts/mjml-chart.git

react 引入 monaco editor

npm install  react-monaco-editor
npm install  monaco-editor-webpack-plugin
npm install  react-app-rewired