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
切换思路 为了方便自定义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 图表组件