| 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768 | 
							- import React from 'react';
 
- import ReactDOM from 'react-dom';
 
- import LzEditor from 'react-lz-editor'
 
- class Editors extends React.Component {
 
-     constructor(props) {
 
-         super(props);
 
-         this.state = {
 
-             content: `<h1>一级标题 Head level 1</h1>
 
-               <p style='text-align:center;'><span style="color:#ED5565">红色文字</span>,居中对齐,<strong>加粗</strong>,<em>斜体</em></p>
 
-               <blockquote style='text-align:left;'><span style="color:#ffce54">其</span><span style="color:#a0d468">他</span><span style="color:#38afda">颜</span><span style="color:#967adc">色</span> <span style="color:#a0d468">C</span><span style="color:#48cfad">OL</span><span style="color:#4a89dc">O</span><span style="color:#967adc">R</span><span style="color:#434a54">S</span></blockquote>
 
-               <p><br></p>
 
-               <ul>
 
-                 <li><span style="color:#434a54">list 1</span></li>
 
-                 <li><span style="color:#434a54">list 2</span></li>
 
-                 <li><span style="color:#434a54">list 3</span></li>
 
-                 <li><span style="color:#434a54">......</span></li>
 
-               </ul>
 
-               <pre><code>Block here.Block here.Block here.Block here.</code></pre>
 
-               <pre><code>Block here.Block here.Block here.Block here.Block here.</code></pre>
 
-               <pre><code>Block here.Block here.Block here.Block here.Block here.</code></pre>
 
-               <p><img src="https://image.qiluyidian.mobi/43053508139910678747.jpg"/></p>
 
-               <p><br></p>
 
-               <h2>正文示例:</h2>
 
-               <h3>乐视金融传将收购数码视讯子公司,拿下互联网、数字电视两张支付牌照</h3>
 
-               <p>用场景化的方式表达就是,用户可以在观看电视购物频道的时候,直接从电视上进行支付购买商品,不用再通过银行汇款或者货到付款;可以选择对电视上的点播内容进行付费,还可能在电视上对水电煤等公用事业费用进行缴费。</p>
 
-               <p>一度金融的消息称,乐视金融同数码视讯的接触尚处在高层范围内进行,因此对于收购价格,暂时还不能确定。</p>
 
-               <p>如果乐视金融拿下数码视讯的两张金融牌照,并且在到期后能够获得央行审核顺利延期,意味着乐视可以通过移动设备和电视两个终端来链接用户的银行卡。</p>
 
-               <p>乐视金融在去年11月份首度公开亮相的时候,缺少银行和支付两张关键牌照就一直是外界关注的问题。</p>`
 
-         }
 
-         this.receiveHtml = this.receiveHtml.bind(this);
 
-         this.onChange = this.onChange.bind(this);
 
-         this.beforeUpload = this.beforeUpload.bind(this);
 
-     }
 
-     receiveHtml(content) {
 
-         console.log("Recieved content", content);
 
-     }
 
-     onChange(info) {
 
-         console.log("onChange:", info);
 
-     }
 
-     beforeUpload(file) {
 
-         console.log("beforeUpload:", file);
 
-     }
 
-     render() {
 
-         //uploadProps 配置方法见 https://ant.design/components/upload-cn/
 
-         const uploadProps = {
 
-             action: "",
 
-             onChange: this.onChange,
 
-             listType: 'picture',
 
-             fileList: [""],
 
-             data: (file) => {//支持自定义保存文件名、扩展名支持
 
-                 console.log("uploadProps data", file)
 
-             },
 
-             multiple: true,
 
-             beforeUpload: this.beforeUpload,
 
-             showUploadList: true
 
-         }
 
-         return <LzEditor
 
-             active={true}
 
-             importContent={this.state.content}
 
-             cbReceiver={this.receiveHtml}
 
-             uploadProps={uploadProps}
 
-             fullScreen={false}
 
-             convertFormat="html" />
 
-     }
 
- }
 
- export default Editors;
 
 
  |