mjml

grapesjs mjml

Grapesjs v0.15.9以降が必要です

このプラグインにより、Grapesjs環境内のMJMLコンポーネントの使用が可能になります。 MJMLコンポーネントは、公式のV4コンパイラ（+一部のモックをブラウザで実行するためのモック）を使用してリアルタイムでレンダリングされます。したがって、結果は、MJMLライブエディターを使用するのとほぼ同じです。

デモ

サポートされているMJMLコンポーネント（デフォルトのMJML-Browserパーサーを使用）： mj-mjml mj-head mj-body mj-group mj-wrapper MJ-Group mj-column mj-section -Column mj-divider mj-social mj-social-element mj-spacer mj-button mj-image mj-text mj-font mj-style mj-hero mj-navbar mj-navbar-link mj-raw

オプション

オプション	説明	デフォルト
blocks	追加するブロック	（全て）
block	ブロックIDに基づいて、カスタムブロックオプションを追加します。	(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の場合、以前のすべてのブロックをクリーニングします	true
resetDevices	以前のすべてのデバイスをクリーンにして、モバイル用に新しいデバイスを設定します	true
resetStyleManager	スタイルマネージャーをリセットし、MJMLの新しいプロパティを追加します	true
resetDevices	以前のすべてのデバイスをクリーンにして、モバイル用に新しいデバイスを設定します	true
hideSelector	デフォルトのセレクターマネージャーを非表示にします	true
useXmlParser	実験：HTMLの代わりにXMLパーサーを使用します。これにより<mj-image/>のようなvoid mjml要素（閉じるタグなし）をインポートすることができます	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パーサーをカスタム1でオーバーライドし、カスタム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

開発サーバーを起動します

$ npm start

リリース

1. npm run v:patch
2. コミット +新しいタグを押します
3. Githubに移動して、新しいリリースをドラフトします
4. 新しいタグを選択し、いくつかのリリースノートを追加します
5. 公開をヒットすると、リリースはNPMに自動的に公開されます

ライセンス

BSD 3節