richTextEditors.jsx 3.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118
  1. import React from 'react';
  2. import theme from 'react-quill/dist/quill.snow.css';
  3. import { message } from 'antd';
  4. import ReactQuill from 'react-quill';
  5. import ajax from 'jquery/src/ajax/xhr.js';
  6. import $ from 'jquery/src/ajax';
  7. var RichTextUploadUrl, RichTextUploadSign;
  8. function uploadImg(s) {
  9. let myform = new FormData(), file = document.getElementById("fileToUpload").files[0];
  10. if (!file) {
  11. return;
  12. };
  13. myform.append('file', file);
  14. myform.append('sign', RichTextUploadSign);
  15. $.ajax({
  16. method: "post",
  17. dataType: "json",
  18. url: location.origin + RichTextUploadUrl,
  19. data: myform,
  20. contentType: false,
  21. processData: false,
  22. success: function (data) {
  23. if (data.error && data.error.length) {
  24. message.warning(data.error[0].message);
  25. } else {
  26. const cursorPosition = s.quill.getSelection().index
  27. s.quill.insertEmbed(cursorPosition, 'image', globalConfig.avatarHost + '/upload' + data.data)
  28. s.quill.setSelection(cursorPosition + 1)
  29. };
  30. }
  31. })
  32. }
  33. function fileSelect() {
  34. let uploader = document.getElementById("fileToUpload");
  35. if (!uploader.onchange) {
  36. uploader.onchange = () => {
  37. uploadImg(this)
  38. }
  39. }
  40. uploader.click();
  41. }
  42. const Editors = React.createClass({
  43. getInitialState() {
  44. return {
  45. value: null,
  46. theBool: true
  47. }
  48. },
  49. handleRichText(value) {
  50. this.setState({ value: value });
  51. this.props.handleRichText(value);
  52. },
  53. componentWillMount() {
  54. RichTextUploadUrl = this.props.uploadUrl;
  55. RichTextUploadSign = this.props.uploadSign;
  56. },
  57. componentWillReceiveProps(nextProps) {
  58. if (this.state.theBool && nextProps.textContent) {
  59. this.state.value = nextProps.textContent;
  60. this.state.theBool = false;
  61. }
  62. if (this.props.visible && !nextProps.visible) {
  63. this.state.theBool = true;
  64. this.state.value = '';
  65. }
  66. },
  67. render() {
  68. const modules = {
  69. toolbar: {
  70. container: [
  71. [{ 'size': ['small', false, 'large', 'huge'] }], // custom dropdown
  72. [{ 'header': [1, 2, 3, false] }],
  73. ['bold', 'italic', 'underline', 'strike', 'blockquote'], // toggled buttons
  74. // [{ 'header': 1 }, { 'header': 2 }], // custom button values
  75. [{ 'list': 'ordered' }, { 'list': 'bullet' }],
  76. // [{ 'script': 'sub' }, { 'script': 'super' }], // superscript/subscript
  77. [{ 'indent': '-1' }, { 'indent': '+1' }], // outdent/indent
  78. // [{ 'direction': 'rtl' }], // text direction
  79. [{ 'color': [] }, { 'background': [] }], // dropdown with defaults from theme
  80. // [{ 'font': [] }],
  81. [{ 'align': [] }],
  82. ['link', 'image'],
  83. ['clean']
  84. ],
  85. handlers: { 'image': fileSelect }
  86. }
  87. };
  88. const formats = [
  89. 'size', 'header',
  90. 'bold', 'italic', 'underline', 'strike', 'blockquote',
  91. 'list', 'bullet', 'indent',
  92. 'color', 'background',
  93. 'align',
  94. 'link', 'image'
  95. ];
  96. return (
  97. <div>
  98. <ReactQuill theme="snow"
  99. value={this.state.value}
  100. modules={modules}
  101. formats={formats}
  102. onChange={this.handleRichText} />
  103. <input type="file"
  104. name="fileToUpload"
  105. id="fileToUpload"
  106. style={{ "display": "none" }} />
  107. </div>
  108. )
  109. },
  110. });
  111. export default Editors;