|
1 | 1 | # GrapesJS Builder with MJML support for Mautic |
2 | 2 |
|
3 | | -## This plugin is now managed centrally in https://github.com/mautic/mautic and https://github.com/mautic/plugin-grapesjs-builder will become a read-only repository. |
| 3 | +## This plugin is managed centrally in https://github.com/mautic/mautic/blob/head/plugins/GrapesJsBuilderBundle and this is a read-only mirror repository. |
4 | 4 |
|
5 | | -**📣 Please make PRs and issues against Mautic Core, not here!** |
6 | | - |
7 | | -⚠️ This Plugin is still Beta! It works great already and we're developing it actively! Please use it and report everything inside the "Issues" in https://github.com/mautic/mautic/issues. ⚠️ |
8 | | - |
9 | | -## Installation in Mautic 3.x |
10 | | - |
11 | | -Enable the plugin in Mautic. |
12 | | - |
13 | | -via SSH: |
14 | | -``` |
15 | | -sudo cd /path/to/mautic |
16 | | -sudo php bin/console mautic:plugins:update |
17 | | -``` |
18 | | -or directly in Mautic: |
19 | | - |
20 | | -Go to the Plugins tab in Mautic: |
21 | | -» Click on the cogwheel (Settings) on the right hand top corner » Go to Plugins » Click on Update Plugins on the right hand top corner |
22 | | - |
23 | | -Now activate the Plugin |
24 | | - |
25 | | -Head over to the Plugins tab in Mautic: |
26 | | -» Click on the cogwheel (Settings) on the right hand top corner » Go to Plugins » Find the Plugin called "GrapesJs" and click on it » Click "yes" in the modal popup » Click the "Save and Close" button |
27 | | - |
28 | | -7. Clear Cache again |
29 | | -``` |
30 | | -sudo cd /path/to/mautic |
31 | | -sudo php bin/console cache:clear |
32 | | -``` |
33 | | - |
34 | | -Ready to go. Now the GrapesJs Builder is loaded for Emails and Landing pages. |
35 | | - |
36 | | -------------------------------------------------------------------- |
37 | | - |
38 | | -## MJML support |
39 | | - |
40 | | -GrapesJS plugin introduce also support for [MJML](https://mjml.io/) language. Just [create template](https://developer.mautic.org/#themes) as usual and add to template `email.mjml.tpl` file with properly formatted MJML syntax. |
41 | | - |
42 | | -You can use the Blank template as a starting point - this ships with Mautic. |
43 | | - |
44 | | -## Existing Templates |
45 | | - |
46 | | -**If you want to use any of your existing themes with the new builder, add the following to your theme's configuration file:** |
47 | | - |
48 | | -Read more in the documentation here: https://docs.mautic.org/en/builders |
49 | | - |
50 | | -## Support |
51 | | - |
52 | | -Use Github issues at https://github.com/mautic/mautic/issues for reporting and discuss more about this plugin. Please join #i-builders on Slack if you would like to get involved in supporting, maintaining and improving the builders! Get your Slack invite at [https://mautic.org/slack](https://mautic.org/slack) |
53 | | - |
54 | | -## Contribution |
55 | | - |
56 | | -Create Pull Requests and we will review them soon as possible. |
57 | | - |
58 | | -## Dependencies |
59 | | - |
60 | | -This plugin use following GrapesJS plugins and preset: |
61 | | - |
62 | | -- Custom for Mautic : https://github.com/mautic/grapesjs-preset-mautic |
63 | | -- Builder email MJML : https://github.com/artf/grapesjs-mjml |
64 | | -- Builder email HTML : https://github.com/artf/grapesjs-preset-newsletter |
65 | | -- Builder page HTML : https://github.com/artf/grapesjs-preset-webpage |
66 | | -- Parser CSS : https://github.com/artf/grapesjs-parser-postcss |
67 | | - |
68 | | -If you want to update it, the code can be found in the `plugin/GrapesJsBuilderBundle/Assets/js` folder. |
69 | | - |
70 | | -------------------------------------------------------------------- |
71 | | - |
72 | | -## Switching back to the legacy Builder |
73 | | - |
74 | | -In case you are not happy with the plugin at the moment, you can easily switch back to the legacy Builder (original Mautic builder). You can do so very quickly: |
75 | | -1. Go to Mautic Settings » Click the cogwheel on the right-hand top corner |
76 | | -2. Open the Plugins Directory » click on "Plugins" inside the menu |
77 | | -3. Find the GrapesJs Plugin and click on it » Click "No" and then "Save and Close" |
78 | | -4. Clear the cache |
79 | | - |
80 | | -Mautic unloaded the GrapesJs Plugin and uses the legacy builder again. |
81 | | -------------------------------------------------------------------- |
82 | | - |
83 | | -## Code |
84 | | -### Setup |
85 | | -```bash |
86 | | -npm install |
87 | | -``` |
88 | | - |
89 | | -#### Configure babel, eslint, prettier |
90 | | -use the template files provided. E.g. .eslintrc.temp |
91 | | - |
92 | | -### How to develop and test Grapesjs standalone |
93 | | -```bash |
94 | | -# for the bare grapesjs editor |
95 | | -npm run start-helloWorld |
96 | | - |
97 | | -# or for the light mautic experience (no dynamic content) |
98 | | -npm run start-mautic |
99 | | - |
100 | | -# or for the full mautic experience |
101 | | -npm run start-mautic-full |
102 | | -``` |
103 | | - |
104 | | -#### Hints |
105 | | -- In order for start-mautic* to work a running ddev container has to be present. |
106 | | -- If you are on some other development environment you need to update some paths in the html files. E.g. Demo/mautic/index.html |
107 | | -- Tell Chrome to ignore cors issues: ?open -n -a /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --args --user-data-dir="/tmp/chrome_dev_test" --disable-web-security? |
108 | | - |
109 | | -### How to build for production |
110 | | -```bash |
111 | | -npm run build |
112 | | -``` |
113 | | - |
114 | | -## Code Architecture |
115 | | - |
116 | | -There is the JS code in the Assets/libarary folder. This handles the bootstrapping and management. |
117 | | - |
118 | | -In addition there is the mautic preset. This handles the basic Mautic specific code. The general idea is that this preset repo can be used as a base for various Mautic builder plugins. E.g one where the RTE ediotor is the CKEditor, or where we have some very customer specific functionality. |
119 | | -``` |
120 | | -- It's a pack of configurable feautures: |
121 | | -- Adds the function to edit source code |
122 | | -- Extends the original image and add a confirm dialog before removing it |
123 | | -- Add the option to hide/show the Layers Manager |
124 | | -- Add the option to enable/disable the import code button |
125 | | -- Moves the Settings panel inside Style Manager panel |
126 | | -- Opens the Block Manager at launch |
127 | | -- Replace Rich Text Editor by Froala used in Mautic (add token support) |
128 | | -- Add Dynamic Content Block for HTML used in Mautic |
129 | | -``` |
130 | | - |
131 | | -## Sources |
132 | | -[New builder documentation resources](https://docs.mautic.org/en/builders) |
| 5 | +**📣 Please make PRs and issues against Mautic Core, not here!** |
0 commit comments