artf / Grapesjs Mjml
Licence: bsd-3-clause
Newsletter Builder with MJML components in GrapesJS
Stars: ✭ 379
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Grapesjs Mjml
Vditor
♏ 一款浏览器端的 Markdown 编辑器,支持所见即所得(富文本)、即时渲染(类似 Typora)和分屏预览模式。An In-browser Markdown editor, support WYSIWYG (Rich Text), Instant Rendering (Typora-like) and Split View modes.
Stars: ✭ 3,773 (+895.51%)
Mutual labels: editor, wysiwyg
Builder
Drag and drop page building using your code components
Stars: ✭ 1,281 (+237.99%)
Mutual labels: builder, wysiwyg
Text
📑 Collaborative document editing using Markdown
Stars: ✭ 282 (-25.59%)
Mutual labels: editor, wysiwyg
Medium Editor
Medium.com WYSIWYG editor clone. Uses contenteditable API to implement a rich text solution.
Stars: ✭ 15,421 (+3968.87%)
Mutual labels: editor, wysiwyg
Cl Editor
Lightweight text editor built with svelte, typescript
Stars: ✭ 148 (-60.95%)
Mutual labels: editor, wysiwyg
plasmic
Visual page builder and web design tool for any website or web app tech stack
Stars: ✭ 1,475 (+289.18%)
Mutual labels: builder, wysiwyg
grapesjs-plugin-forms
Set of form components and blocks for the GrapesJS editor
Stars: ✭ 39 (-89.71%)
Mutual labels: builder, wysiwyg
Awesome Web Editor
🔨 Open source WEB editor summary
Stars: ✭ 306 (-19.26%)
Mutual labels: editor, wysiwyg
Pell
📝 the simplest and smallest WYSIWYG text editor for web, with no dependencies
Stars: ✭ 11,653 (+2974.67%)
Mutual labels: editor, wysiwyg
Tui.editor
🍞📝 Markdown WYSIWYG Editor. GFM Standard + Chart & UML Extensible.
Stars: ✭ 14,016 (+3598.15%)
Mutual labels: editor, wysiwyg
Rich Markdown Editor
The open source React and Prosemirror based markdown editor that powers Outline. Want to try it out? Create an account:
Stars: ✭ 2,468 (+551.19%)
Mutual labels: editor, wysiwyg
Editor.js
A block-styled editor with clean JSON output
Stars: ✭ 17,061 (+4401.58%)
Mutual labels: editor, wysiwyg
Phaser3 Particle Editor
A flexible editor for building phaser particles.
Stars: ✭ 131 (-65.44%)
Mutual labels: editor, wysiwyg
Ngx Quill Example
demo app for the advanced usage of ngx-quill module
Stars: ✭ 137 (-63.85%)
Mutual labels: editor, wysiwyg
Piper
A drag-and-drop mobile website builder base on Vue
Stars: ✭ 228 (-39.84%)
Mutual labels: builder, editor
React Native Rich Editor
Lightweight React Native (JavaScript, H5) rich text editor
Stars: ✭ 281 (-25.86%)
Mutual labels: editor, wysiwyg
GrapesJS MJML
Requires GrapesJS v0.15.9 or higher
This plugin enables the usage of MJML components inside the GrapesJS environment. MJML components are rendered in real-time using the official v4 compiler (+ some mocks to make it run in the browser), therefore the result is, almost, the same as using the MJML Live Editor.
Supported components:
mj-wrapper
mj-group
mj-section
mj-column
mj-text
mj-image
mj-button
mj-social
mj-divider
mj-spacer
mj-style
mj-font
mj-hero
Options
Option | Description | Default |
---|---|---|
fonts |
Custom fonts on exported HTML header more info | {} |
importPlaceholder |
Import placeholder MJML | '' |
i18n |
I18n object containing language more info | {} |
overwriteExport |
Overwrite default export command | true |
preMjml |
String before the MJML in export code | '' |
postMjml |
String after the MJML in export code | '' |
resetBlocks |
Clean all previous blocks if true | true |
resetDevices |
Clean all previous devices and set a new one for mobile | true |
resetStyleManager |
Reset the Style Manager and add new properties for MJML | true |
Download
npm i grapesjs-mjml
Usage
<link href="path/to/grapes.min.css" rel="stylesheet"/>
<script src="path/to/grapes.min.js"></script>
<script src="path/to/grapesjs-mjml.min.js"></script>
<div id="gjs">
<mjml>
<mj-body>
<!-- Your MJML body here -->
<mj-section>
<mj-column>
<mj-text>My Company</mj-text>
</mj-column>
</mj-section>
</mj-body>
</mjml>
</div>
<script type="text/javascript">
var editor = grapesjs.init({
fromElement: 1,
container : '#gjs',
plugins: ['grapesjs-mjml'],
pluginsOpts: {
'grapesjs-mjml': {/* ...options */}
}
});
</script>
Or using ESM imports:
import 'grapesjs/dist/css/grapes.min.css'
import grapesJS from 'grapesjs'
import grapesJSMJML from 'grapesjs-mjml'
grapesJS.init({
fromElement: 1,
container : '#gjs',
avoidInlineStyle : false,
plugins: [grapesJSMJML],
pluginsOpts: {
[grapesJSMJML]: {/* ...options */}
},
});
i18n usage:
import 'grapesjs/dist/css/grapes.min.css'
import grapesJS from 'grapesjs'
import nl from 'grapesjs/locale/nl'
import grapesJSMJML from 'grapesjs-mjml'
import mjmlNL from 'grapesjs-mjml/locale/nl'
grapesJS.init({
fromElement: 1,
container : '#gjs',
avoidInlineStyle : false,
i18n: {
// locale: 'en', // default locale
// detectLocale: true, // by default, the editor will detect the language
// localeFallback: 'en', // default fallback
messages: { nl: nl },
},
plugins: [grapesJSMJML],
pluginsOpts: {
[grapesJSMJML]: {
// Optional options
i18n: { nl: mjmlNL }
}
},
});
fonts usage:
import 'grapesjs/dist/css/grapes.min.css'
import grapesJS from 'grapesjs'
import grapesJSMJML from 'grapesjs-mjml'
let editor = grapesJS.init({
fromElement: 1,
container : '#gjs',
avoidInlineStyle : false,
plugins: [grapesJSMJML],
pluginsOpts: {
[grapesJSMJML]: {
// The font imports are included on HTML <head/> when fonts are used on the template
fonts: {
Montserrat: 'https://fonts.googleapis.com/css?family=Montserrat',
'Open Sans': 'https://fonts.googleapis.com/css?family=Open+Sans'
}
}
},
});
// add custom fonts options on editor's font list
editor.on('load', () => {
let styleManager = editor.StyleManager;
let fontProperty = styleManager.getProperty('typography', 'font-family');
let list = [];
// empty list
fontProperty.set('list', list);
// custom list
list.push(fontProperty.addOption({value: 'Montserrat, sans-serif', name: 'Montserrat'}));
list.push(fontProperty.addOption({value: 'Open Sans, sans-serif', name: 'Open Sans'}));
fontProperty.set('list', list);
styleManager.render();
});
Development
Clone the repository
$ git clone https://github.com/artf/grapesjs-mjml.git
$ cd grapesjs-mjml
Install it
$ npm i
Start the dev server
$ npm start
Releasing
- Run
npm run v:patch
to bump the version in package.json and create a git tag - Push the commit + new tag
- Go to github and draft a new release
- Select the new tag and add some release notes
- Hit publish, the release will automatically publish to npm
License
BSD 3-Clause
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].