richTextEditors.jsx 3.7 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768
  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import LzEditor from 'react-lz-editor'
  4. class Editors extends React.Component {
  5. constructor(props) {
  6. super(props);
  7. this.state = {
  8. content: `<h1>一级标题 Head level 1</h1>
  9. <p style='text-align:center;'><span style="color:#ED5565">红色文字</span>,居中对齐,<strong>加粗</strong>,<em>斜体</em></p>
  10. <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>
  11. <p><br></p>
  12. <ul>
  13. <li><span style="color:#434a54">list 1</span></li>
  14. <li><span style="color:#434a54">list 2</span></li>
  15. <li><span style="color:#434a54">list 3</span></li>
  16. <li><span style="color:#434a54">......</span></li>
  17. </ul>
  18. <pre><code>Block here.Block here.Block here.Block here.</code></pre>
  19. <pre><code>Block here.Block here.Block here.Block here.Block here.</code></pre>
  20. <pre><code>Block here.Block here.Block here.Block here.Block here.</code></pre>
  21. <p><img src="https://image.qiluyidian.mobi/43053508139910678747.jpg"/></p>
  22. <p><br></p>
  23. <h2>正文示例:</h2>
  24. <h3>乐视金融传将收购数码视讯子公司,拿下互联网、数字电视两张支付牌照</h3>
  25. <p>用场景化的方式表达就是,用户可以在观看电视购物频道的时候,直接从电视上进行支付购买商品,不用再通过银行汇款或者货到付款;可以选择对电视上的点播内容进行付费,还可能在电视上对水电煤等公用事业费用进行缴费。</p>
  26. <p>一度金融的消息称,乐视金融同数码视讯的接触尚处在高层范围内进行,因此对于收购价格,暂时还不能确定。</p>
  27. <p>如果乐视金融拿下数码视讯的两张金融牌照,并且在到期后能够获得央行审核顺利延期,意味着乐视可以通过移动设备和电视两个终端来链接用户的银行卡。</p>
  28. <p>乐视金融在去年11月份首度公开亮相的时候,缺少银行和支付两张关键牌照就一直是外界关注的问题。</p>`
  29. }
  30. this.receiveHtml = this.receiveHtml.bind(this);
  31. this.onChange = this.onChange.bind(this);
  32. this.beforeUpload = this.beforeUpload.bind(this);
  33. }
  34. receiveHtml(content) {
  35. console.log("Recieved content", content);
  36. }
  37. onChange(info) {
  38. console.log("onChange:", info);
  39. }
  40. beforeUpload(file) {
  41. console.log("beforeUpload:", file);
  42. }
  43. render() {
  44. //uploadProps 配置方法见 https://ant.design/components/upload-cn/
  45. const uploadProps = {
  46. action: "",
  47. onChange: this.onChange,
  48. listType: 'picture',
  49. fileList: [""],
  50. data: (file) => {//支持自定义保存文件名、扩展名支持
  51. console.log("uploadProps data", file)
  52. },
  53. multiple: true,
  54. beforeUpload: this.beforeUpload,
  55. showUploadList: true
  56. }
  57. return <LzEditor
  58. active={true}
  59. importContent={this.state.content}
  60. cbReceiver={this.receiveHtml}
  61. uploadProps={uploadProps}
  62. fullScreen={false}
  63. convertFormat="html" />
  64. }
  65. }
  66. export default Editors;