richTextEditors.jsx 3.8 KB

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