richTextEditors.jsx 9.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262
  1. import React from 'react';
  2. import theme from 'react-quill/dist/quill.snow.css';
  3. import { message } from 'antd';
  4. import ReactQuill,{Quill} from 'react-quill';
  5. import ajax from 'jquery/src/ajax/xhr.js';
  6. import $ from 'jquery/src/ajax';
  7. import audioIcon from '../../image/audio.png';
  8. let BlockEmbed = Quill.import('blots/block/embed');
  9. class AppPanelEmbed extends BlockEmbed {
  10. static create(value) {
  11. const node = super.create(value);
  12. node.setAttribute('contenteditable', 'false');
  13. node.setAttribute('width', '100%');
  14. // 设置自定义html
  15. node.innerHTML = this.transformValue(value)
  16. return node;
  17. }
  18. static transformValue(value) {
  19. let handleArr = value.split('\n')
  20. handleArr = handleArr.map(e => e.replace(/^[\s]+/, '')
  21. .replace(/[\s]+$/, ''))
  22. return handleArr.join('')
  23. }
  24. // 返回节点自身的value值 用于撤销操作
  25. static value(node) {
  26. return node.innerHTML
  27. }
  28. }
  29. // blotName
  30. AppPanelEmbed.blotName = 'AppPanelEmbed';
  31. // class名将用于匹配blot名称
  32. AppPanelEmbed.className = 'embed-innerApp';
  33. // 标签类型自定义
  34. AppPanelEmbed.tagName = 'p';
  35. Quill.register(AppPanelEmbed);
  36. var RichTextUploadUrl, RichTextUploadSign;
  37. //上传图片
  38. function uploadImg(s,_this) {
  39. let myform = new FormData()
  40. let file = document.getElementById(_this.props.id + "fileToUpload").files[0];
  41. if (!file) { return; };
  42. myform.append('file', file);
  43. myform.append('sign', RichTextUploadSign);
  44. $.ajax({
  45. method: "post",
  46. dataType: "json",
  47. url: location.origin + RichTextUploadUrl,
  48. data: myform,
  49. contentType: false,
  50. processData: false,
  51. success: function (data) {
  52. if (data.error && data.error.length) {
  53. message.warning(data.error[0].message);
  54. document.getElementById(_this.props.id + "fileToUpload").value = ''
  55. } else {
  56. const cursorPosition = s.quill.getSelection().index
  57. s.quill.insertEmbed(
  58. cursorPosition,
  59. 'AppPanelEmbed',
  60. `<img style="width: 100%" src="${globalConfig.avatarUploadHost + data.data}"/>`
  61. );
  62. s.quill.setSelection(cursorPosition + 1);
  63. document.getElementById(_this.props.id + "fileToUpload").value = ''
  64. };
  65. },
  66. error: function(XMLHttpRequest, textStatus, errorThrown){
  67. //查看错误信息
  68. message("上传失败");
  69. document.getElementById(_this.props.id + "fileToUpload").value = ''
  70. }
  71. })
  72. }
  73. //图片文件选择
  74. function fileSelect() {
  75. let _this = this.options._this;
  76. let uploader = document.getElementById(_this.props.id + "fileToUpload");
  77. if (!uploader.onchange) {
  78. uploader.onchange = () => {
  79. uploadImg(this,_this)
  80. }
  81. }
  82. uploader.click();
  83. }
  84. //音频文件选择
  85. function fileSelectAudio() {
  86. let _this = this.options._this;
  87. let uploader = document.getElementById(_this.props.id + "fileToUploadAudio");
  88. if (!uploader.onchange) {
  89. uploader.onchange = () => {
  90. uploadAudio(this,_this)
  91. }
  92. }
  93. uploader.click();
  94. }
  95. //音频文件上传
  96. function uploadAudio(s,_this) {
  97. let myform = new FormData()
  98. let file = document.getElementById(_this.props.id + "fileToUploadAudio").files[0]
  99. if (!file) { return; };
  100. myform.append('file', file);
  101. myform.append('sign', RichTextUploadSign);
  102. $.ajax({
  103. method: "post",
  104. dataType: "json",
  105. url: location.origin + RichTextUploadUrl,
  106. data: myform,
  107. contentType: false,
  108. processData: false,
  109. success: function (data) {
  110. if (data.error && data.error.length) {
  111. message.warning(data.error[0].message);
  112. document.getElementById(_this.props.id + "fileToUploadAudio").value = ''
  113. } else {
  114. const cursorPosition = s.quill.getSelection().index
  115. s.quill.insertEmbed(
  116. cursorPosition,
  117. 'AppPanelEmbed',
  118. `<audio src="${globalConfig.avatarUploadHost + data.data}" controls="controls">Your browser does not support the audio element.</audio>`
  119. );
  120. s.quill.setSelection(cursorPosition + 1)
  121. document.getElementById(_this.props.id + "fileToUploadAudio").value = ''
  122. };
  123. },
  124. error: function(XMLHttpRequest, textStatus, errorThrown){
  125. document.getElementById(_this.props.id + "fileToUploadAudio").value = ''
  126. //查看错误信息
  127. message("上传失败");
  128. }
  129. })
  130. }
  131. //视频文件选择
  132. function fileSelectVideo() {
  133. let _this = this.options._this;
  134. let uploader = document.getElementById(_this.props.id + "fileToUploadVideo");
  135. if (!uploader.onchange) {
  136. uploader.onchange = () => {
  137. uploadVideo(this,_this)
  138. }
  139. }
  140. uploader.click();
  141. }
  142. //视频文件上传
  143. function uploadVideo(s,_this) {
  144. let myform = new FormData()
  145. let file = document.getElementById(_this.props.id + "fileToUploadVideo").files[0]
  146. if (!file) { return; };
  147. myform.append('file', file);
  148. myform.append('sign', RichTextUploadSign);
  149. $.ajax({
  150. method: "post",
  151. dataType: "json",
  152. url: location.origin + RichTextUploadUrl,
  153. data: myform,
  154. contentType: false,
  155. processData: false,
  156. success: function (data) {
  157. if (data.error && data.error.length) {
  158. message.warning(data.error[0].message);
  159. document.getElementById(_this.props.id + "fileToUploadVideo").value = ''
  160. } else {
  161. const cursorPosition = s.quill.getSelection().index
  162. s.quill.insertEmbed(
  163. cursorPosition,
  164. 'AppPanelEmbed',
  165. `<video style="width:100%" controls="" autoPlay="" name="media">
  166. <source src=${globalConfig.avatarUploadHost + data.data} type="video/mp4">
  167. </video>`
  168. );
  169. s.quill.setSelection(cursorPosition + 1);
  170. document.getElementById(_this.props.id + "fileToUploadVideo").value = ''
  171. };
  172. },
  173. error: function(XMLHttpRequest, textStatus, errorThrown){
  174. document.getElementById(_this.props.id + "fileToUploadVideo").value = ''
  175. //查看错误信息
  176. }
  177. })
  178. }
  179. const Editors = React.createClass({
  180. getInitialState() {
  181. return {
  182. value: null,
  183. theBool: true
  184. }
  185. },
  186. handleRichText(value) {
  187. this.setState({ value: value });
  188. this.props.handleRichText(value);
  189. // this.props.handleRichText(value.replace(/iframe/g, 'video'));
  190. },
  191. componentDidMount() {
  192. document.getElementsByClassName( 'ql-audio')[this.props.id || 0].style = `background: url(${audioIcon}) no-repeat;background-size: contain;`
  193. },
  194. componentWillMount() {
  195. RichTextUploadUrl = this.props.uploadUrl;
  196. RichTextUploadSign = this.props.uploadSign;
  197. },
  198. componentWillReceiveProps(nextProps) {
  199. this.state.theBool = true;
  200. // if(nextProps.textContent){
  201. this.state.value = nextProps.textContent || '';
  202. // }
  203. },
  204. render() {
  205. const modules = {
  206. toolbar: {
  207. container: [
  208. [{ 'size': ['small', false, 'large', 'huge'] }], // custom dropdown
  209. [{ 'header': [1, 2, 3, false] }],
  210. ['bold', 'italic', 'underline', 'strike', 'blockquote'], // toggled buttons
  211. // [{ 'header': 1 }, { 'header': 2 }], // custom button values
  212. [{ 'list': 'ordered' }, { 'list': 'bullet' }],
  213. // [{ 'script': 'sub' }, { 'script': 'super' }], // superscript/subscript
  214. [{ 'indent': '-1' }, { 'indent': '+1' }], // outdent/indent
  215. // [{ 'direction': 'rtl' }], // text direction
  216. [{ 'color': [] }, { 'background': [] }], // dropdown with defaults from theme
  217. // [{ 'font': [] }],
  218. [{ 'align': [] }],
  219. ['link', 'image','video'],
  220. ['clean'],
  221. ['audio'],
  222. ],
  223. handlers: { 'image': fileSelect ,'video': fileSelectVideo,'audio':fileSelectAudio},
  224. _this:this
  225. },
  226. };
  227. const formats = [
  228. 'size', 'header',
  229. 'bold', 'italic', 'underline', 'strike', 'blockquote',
  230. 'list', 'bullet', 'indent',
  231. 'color', 'background',
  232. 'align',
  233. 'link', 'image','video','AppPanelEmbed','clean'
  234. ];
  235. return (
  236. <div>
  237. <ReactQuill
  238. theme="snow"
  239. value={this.state.value}
  240. modules={modules}
  241. formats={formats}
  242. placeholder='请填写内容!'
  243. onChange={this.handleRichText}
  244. />
  245. <input accept="image/*" type="file" name={this.props.id + "fileToUpload"} id={this.props.id + "fileToUpload"} placeholder='请填写内容!' style={{ "display": "none" }} />
  246. <input accept="video/*" type="file" name={this.props.id + "fileToUploadVideo"} id={this.props.id + "fileToUploadVideo"} placeholder='请填写视频!' style={{ "display": "none" }} />
  247. <input accept="audio/*" type="file" name={this.props.id + "fileToUploadAudio"} id={this.props.id + "fileToUploadAudio"} placeholder='请选择音频!' style={{ "display": "none" }} />
  248. </div>
  249. )
  250. },
  251. });
  252. export default Editors;