Skip to content

Commit

Permalink
Skip fonts usage from README as it's not complete. Ref #284
Browse files Browse the repository at this point in the history
  • Loading branch information
artf committed Aug 23, 2024
1 parent 0b896a9 commit bc640a1
Showing 1 changed file with 0 additions and 41 deletions.
41 changes: 0 additions & 41 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,6 @@ Supported MJML components (using default mjml-browser parser):
|`block`|Add custom block options, based on block id.|`(blockId) => ({})`|
|`codeViewerTheme`|Code viewer theme.|`hopscotch`|
|`customComponents`|List of components which will be added to default one |`[]` |
|`fonts`|Custom fonts on exported HTML header [more info](https://github.com/mjmlio/mjml#inside-nodejs)|`{}`|
|`importPlaceholder`|Placeholder MJML template for the import modal|`''`|
|`imagePlaceholderSrc`|Image placeholder source|`'https://via.placeholder.com/350x250/78c5d6/fff'`|
|`i18n`|I18n object containing language [more info](https://grapesjs.com/docs/modules/I18n.html#configuration)|`{}`|
Expand Down Expand Up @@ -141,46 +140,6 @@ grapesJS.init({
});
```

#### fonts usage:

```js
import 'grapesjs/dist/css/grapes.min.css'
import grapesJS from 'grapesjs'
import grapesJSMJML from 'grapesjs-mjml'

const editor = grapesJS.init({
fromElement: true,
container: '#gjs',
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', () => {
const styleManager = editor.StyleManager;
const fontProperty = styleManager.getProperty('typography', 'font-family');

const 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();
});
```

### Using Independent mjml-browser Build

In case, you have your own version of MJML with custom or extended components, it is possible
Expand Down

0 comments on commit bc640a1

Please sign in to comment.