mjml

Grapesjs mjml

Требуется виноград V0.15.9 или выше

Этот плагин обеспечивает использование компонентов MJML в среде GrapeSJS. Компоненты MJML отображаются в режиме реального времени с использованием официального компилятора V4 (+ некоторых макетов, чтобы он запустил в браузере), поэтому результат почти так же, как использование живого редактора MJML.

Демо

Supported MJML components (using default mjml-browser parser): mj-mjml mj-head mj-body mj-wrapper mj-group mj-section mj-column mj-text mj-image mj-button mj-social mj-social-element mj-divider mj-spacer mj-style mj-font mj-hero mj-navbar mj-navbar-link mj-raw

Параметры

Вариант	Описание	По умолчанию
blocks	Какие блоки добавить	(все)
block	Добавьте пользовательские параметры блоков, на основе идентификатора блока.	(blockId) => ({})
codeViewerTheme	Тема просмотра кода.	hopscotch
customComponents	Список компонентов, которые будут добавлены по умолчанию один	[]
importPlaceholder	Шаблон заполнителя MJML для модала импорта	''
imagePlaceholderSrc	Изображение Источник заполнителей	'https://via.placeholder.com/350x250/78c5d6/fff'
i18n	I18n объект, содержащий язык, больше информации	{}
mjmlParser	Пользовательский экземпляр MJML-Browser. Позволяет расширить функциональность MJML или добавлять пользовательские компоненты MJML	(input: string | MJMLJsonObject, opt: MJMLParsingOptions) => MJMLParseResults
overwriteExport	Перезаписать команду экспорта по умолчанию	true
preMjml	Строка перед MJML в коде экспорта	''
postMjml	Строка после MJML в коде экспорта	''
resetBlocks	Очистите все предыдущие блоки, если это правда	true
resetDevices	Очистите все предыдущие устройства и установите новый для мобильных	true
resetStyleManager	Сбросить менеджер стиля и добавить новые свойства для MJML	true
resetDevices	Очистите все предыдущие устройства и установите новый для мобильных	true
hideSelector	Скрыть диспетчер селекторов по умолчанию	true
useXmlParser	Экспериментальный: используйте XML -анализатор вместо HTML. Это должно позволять импортировать элементы void MJML (без закрытия тегов), таких как <mj-image/>	false
columnsPadding	Заполнение столбца (таким образом, проще выбрать столбцы)	10px 0
useCustomTheme	Загрузите пользовательскую предварительную тему	true

Скачать

• npm i grapesjs-mjml

Использование

 < 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 " >
  const editor = grapesjs . init ( {
      fromElement : true ,
      container : '#gjs' ,
      plugins : [ 'grapesjs-mjml' ] ,
      pluginsOpts : {
        'grapesjs-mjml' : { /* ...options */ }
      }
  } ) ;
</ script > 

Или используя ESM -импорт:

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

grapesJS . init ( {
   fromElement : true ,
   container : '#gjs' ,
   plugins : [ grapesJSMJML ] ,
   pluginsOpts : {
      [ grapesJSMJML ] : { /* ...options */ }
   } ,
} ) ; 

I18N Использование:

 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 : true ,
   container : '#gjs' ,
   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 }
      }
   } ,
} ) ;

Использование независимой сборки MJML-Browser

В случае, если у вас есть собственная версия MJML с пользовательскими или расширенными компонентами, можно переопределить анализатор MJML по умолчанию с помощью Custom One и создать пользовательские компоненты GrapesJS.

Для получения дополнительной информации, как создать компонент MJML, вы можете посетить папку компонентов или перейти к документам.

 import 'grapesjs/dist/css/grapes.min.css'
import grapesJS from 'grapesjs'
import grapesJSMJML from 'grapesjs-mjml'
import customMjmlParser from 'custom-mjml-parser' ;

import customImage from 'custom/components/path'

grapesJS . init ( {
   fromElement : true ,
   container : '#gjs' ,
   plugins : [ grapesJSMJML ] ,
   pluginsOpts : {
      [ grapesJSMJML ] : {
        mjmlParser : customMjmlParser ,
        customComponents : [
          customImage ,
        ]
      }
   } ,
} ) ; 

Разработка

Клонировать репозиторий

$ git clone https://github.com/GrapesJS/mjml.git
$ cd mjml

Установите его

$ npm i

Запустите Dev Server

$ npm start

Выпуск

1. Запустите npm run v:patch , чтобы увеличить версию в package.json и создать тег GIT
2. Нажмите кнопку Commit + New Tag
3. Перейти к GitHub и составьте новый релиз
4. Выберите новый тег и добавьте несколько заметок о выпуске
5. Hit Publish, релиз автоматически опубликован в NPM

Лицензия

BSD 3-CLAUSE