mjml
v1.0.6
Grapesjs v0.15.9 이상이 필요합니다
이 플러그인을 사용하면 GrapesJS 환경 내에서 MJML 구성 요소를 사용 할 수 있습니다. MJML 구성 요소는 공식 V4 컴파일러를 사용하여 실시간으로 렌더링됩니다 (브라우저에서 실행하기 위해 일부 조롱). 따라서 결과는 거의 MJML 라이브 편집기를 사용하는 것과 동일합니다.
데모
지원되는 MJML 구성 요소 (기본 MJML-Browser 파서 사용) : mj-mjml mj-head mj-body mj-wrapper mj-group mj-section mj-column TEXT mj-image mj-text mj-button mj-social SOCIAL-ELEMENT MJ- mj-spacer mj-social-element mj-divider mj-style mj-font 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 |
resetDevices | 이전의 모든 장치를 청소하고 모바일 용 새 장치를 설정하십시오. | true |
resetStyleManager | 스타일 관리자를 재설정하고 MJML에 대한 새로운 속성 추가 | true |
resetDevices | 이전의 모든 장치를 청소하고 모바일 용 새 장치를 설정하십시오. | true |
hideSelector | 기본 선택기 관리자를 숨 깁니다 | true |
useXmlParser | 실험 : HTML 대신 XML 파서를 사용하십시오. 이를 통해 <mj-image/> 와 같은 무효 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 > 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 */ }
} ,
} ) ; 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이있는 경우 사용자 지정 MJML 파서를 사용자 정의 MJML 파서를 재정의하고 사용자 정의 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 startnpm run v:patch to for package.json에서 버전을 부딪 히고 git 태그를 만듭니다.BSD 3-Clause
