React+Redux. , |
! email , html . , 2 , , , . . (EmailEditor jQuery, , Mosaico KnockoutJS, ), EmailEditor, Angular Ionic, 2-3 , DOM .., ).
, , Mosaico Knockout, , ( Mosaico) , EmailEditor . , , Mosaico , . , , , , ...
, " , ! !". , pet-projects React+Redux . Redux, ! ! , , JSON ! , . , , , , , , :
store.
C NodeJS, npm, , , MongoDB, , , React+Redux . live development , create-react-app. , , :
npm install
npm start
en ru, JSON translations , , , , , , index.js src/, store, action', , ID , , ID , . - , , ( \ , ).
, , . ( , ), . , " ", , . , , , , :
, , , , Custom style. :
( , ), ( Undo\Redo , )
NodeJS ( server_nodejs), build npm run build ( npm install !). : \ (?id=_id) , 'OK' =). , , , app.js, app Controller , Router , TemplateModel ORM .
src/components blocks options .
import React from 'react';
const BlockHr = ({ blockOptions }) => {
return (
);
};
export default BlockHr;
import React from 'react';
const OptionsHr = ({ block, language, onPropChange }) => {
return (
);
};
export default OptionsHr;
src/components Block.js, blocks switch...case, block_type ( ) .
Options.js . ( - ?). BlockList.js , , tr>td , td . ( block.options.container), DnD . , onChange, onPropChange(prop, value, container?, element_index) (' , , color', , ( true, false), ). =). mindmap' :
P.S. master react_email_editor_wordpress. , sagas/api.js ( WP AJAX), feedback social ( WP ). WP .
! ,
. , :
WEBSITES, SERVICES, SEO. -, . . 6 : 3 3 , . , ( 3 -), . , go !
public/components.json JSON:
... ...
{
"preview": "images/3_icons.png",
"block": {
"block_type": "3_icons",
"options": {
"container": {
"padding": "0 50px",
"color": "#333333",
"fontSize": "20px",
"customStyle": false,
"backgroundColor": "#F7F8FA"
},
"elements": [{
"source": "https://images.vexels.com/media/users/3/136010/isolated/preview/e7e28c15388e5196611aa2d7b7056165-ghost-skull-circle-icon-by-vexels.png"
},
{
"source": "http://www.1pengguna.com/1pengguna/uploads/images/tipimgdemo/kesihatan.gif"
},
{
"source": "https://upload.wikimedia.org/wikipedia/commons/thumb/5/56/Circle-icons-cloud.svg/2000px-Circle-icons-cloud.svg.png"
},
{
"text": "DEADS",
"textAlign": "center"
},
{
"text": "LOVES",
"textAlign": "center"
},
{
"text": "CLOUDS",
"textAlign": "center"
}]
}
}
},
... ...
, 3_icons images/3_icons.png, . - , - . , GIMP ( ) preview_template.xcf, . , . (Cut\Paste\Colorize) :
src/images ( public/images, ) . , , components.json
. Block3Icons.js src/components/blocks:
, 2 3 . source text , BlockList.js, .
. Options3Icons.js src/components/options:
import React from 'react';
const Options3Icons = ({ block, language, onFileChange, onPropChange }) => {
let textIndex = 3;
let imageIndex = 0;
return (
{language["Text"]}
{language["Text"]} {textIndex - 2}
> onPropChange('text', e.target.value, false, +textIndex)} />
);
};
export default Options3Icons;
! ! , , , ? ( dumb component, .. props). (checkbox, input, etc...) , onPropChange ( ). . . , , =).
src/components/Block.js :
//... import'...
import Block3Icons from './blocks/Block3Icons';
//... ...
//... case'...
case '3_icons':
return ;
//... ...
src/containers/Options.js
//... import'...
import Options3Icons from '../components/options/Options3Icons';
//... ...
//... case'...
case '3_icons':
return ;
//... ...
, , npm start , . , . , :
, . Mosaico. ( Mosaico) ( EmailEditor') , , ( ).
:
, , , . =).
! , , , - .