text: //引入对应方法, 需要注意的是这里引用了4个方法, 那么在底部也需要window.wp.回调这4个方法
  //这4个方法的来源是functions.php里的wp_register_script时array()里传入, 需要注意一一对应
  (function (blocks, element, editor, i18n) {
  	var el = element.createElement; //用于输出HTML
  	var RichText = editor.RichText; //用于获取文本输入块
  
  	const {__} = wp.i18n; //translation functions
  	const {InspectorControls} = wp.editor; //Block inspector wrapper
  	const {TextControl,SelectControl,TextareaControl} = wp.components; //WordPress form inputs
  
  	blocks.registerBlockType('wp-plot/chart', {
  		title: 'Text2Chart', //标题
  		icon: 'chart-area', //图标
  		category: 'layout', //对应栏目
  		attributes: { //模块的属性
  			chl: {
  				default: ''
  			},
  			cht: {
  				default: 'gv:dot'
  			},
  			caption: {
  				default: 'WordPress Text2Chart'
  			},
  			chof: {
  				default: 'png'
  			},
  			width: {
  				default: ''
  			},
  			height: {
  				default: ''
  			},
  			align: {
  				default: 'center'
  			}
  		},
  		//编辑时
  		edit: function (props) {
  			const attributes =  props.attributes;
  			const setAttributes =  props.setAttributes;
  
  			function onChangeCht(cht) {
  				setAttributes({cht});
  			}
  
  			function onChangeChl(chl) {
  				setAttributes({chl});
  			}
  
  			function onChangeChof(chof) {
  				setAttributes({chof});
  			}
  
  			function onChangeCaption(caption) {
  				setAttributes({caption});
  			}
  
  			function onChangeAlign(align) {
  				setAttributes({align});
  			}
  
  			function onChangeWidth(width) {
  				setAttributes({width});
  			}
  
  			function onChangeHeight(height) {
  				setAttributes({height});
  			}
  			//返回HTML
  			//el的方法格式为: el( 对象, 属性, 值 ); 可以相互嵌套
  			//例如:
  			// el(
  			//	 'div',
  			//	 {
  			//		 className: 'demo-class',
  			//	 },
  			//	 'DEMO数据'
  			// );
  			// 输出为: <div class="demo-class">DEMO数据</div>
  			return el('div',{},[
  					el('div',{},[
  						el(RichText.Content,{
  							value: attributes.chl,
  							tagName: 'pre'
  						}),
  					]),
  					el(InspectorControls,{},[
  						el(TextControl, {
  							value: attributes.cht,
  							label: __( 'Chart Engine' ),
  							onChange: onChangeCht,
  						}),
  						el(TextareaControl, {
  							value: attributes.chl,
  							label: __( 'Code' ),
  							onChange: onChangeChl
  						}),
  						el(TextControl, {
  							value: attributes.caption,
  							label: __( 'Caption' ),
  							onChange: onChangeCaption,
  						}),
  						el(SelectControl, {
  							value: attributes.chof,
  							label: __( 'Output format' ),
  							onChange: onChangeChof,
  							options: [{value:'png',label:'png'},{value:'jpg',label:'jpg'},{value:'svg',label:'svg'},{value:'gif',label:'gif'}]
  						}),
  						el(TextControl, {
  							value: attributes.align,
  							label: __( 'Align' ),
  							onChange: onChangeAlign,
  						}),
  						el(TextControl, {
  							value: attributes.width,
  							label: __( 'Width' ),
  							onChange: onChangeWidth,
  						}),
  						el(TextControl, {
  							value: attributes.height,
  							label: __( 'Height' ),
  							onChange: onChangeHeight,
  						}),
  					])
  				]
  			);
  		},
  		//保存时
  		save: function (props) {
  			var o = props.attributes.chl;
  			o = o.replace(/</g, '&lt;');
  			o = o.replace(/>/g, '&gt;');
  			var plot = '[plot cht="' + props.attributes.cht + '"';
  			plot +=	' chof="' + props.attributes.chof + '"';
  			plot += ' caption="' + props.attributes.caption + '"';
  			plot += ' align="' + props.attributes.align + '"';
  			if ( props.attributes.width != '') plot += ' width=' + props.attributes.width;
  			if ( props.attributes.height != '') plot += ' height=' + props.attributes.height;
  			plot += "]\n";
  			plot += o;
  			plot += '[/plot]';
  
  			return el(RichText.Content,{tagName: 'div',value: plot});
  		},
  	});
  }(
  	window.wp.blocks,
  	window.wp.element,
  	window.wp.editor,
  	window.wp.i18n
  ));
  