richTextEditors.jsx 8.6 KB

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