|  | @@ -1,11 +1,42 @@
 | 
												
													
														
															|  |  import React from 'react';
 |  |  import React from 'react';
 | 
												
													
														
															|  |  import theme from 'react-quill/dist/quill.snow.css';
 |  |  import theme from 'react-quill/dist/quill.snow.css';
 | 
												
													
														
															|  |  import { message } from 'antd';
 |  |  import { message } from 'antd';
 | 
												
													
														
															|  | -import ReactQuill from 'react-quill';
 |  | 
 | 
												
													
														
															|  | -
 |  | 
 | 
												
													
														
															|  | 
 |  | +import ReactQuill,{Quill} from 'react-quill';
 | 
												
													
														
															|  |  import ajax from 'jquery/src/ajax/xhr.js';
 |  |  import ajax from 'jquery/src/ajax/xhr.js';
 | 
												
													
														
															|  |  import $ from 'jquery/src/ajax';
 |  |  import $ from 'jquery/src/ajax';
 | 
												
													
														
															|  |  
 |  |  
 | 
												
													
														
															|  | 
 |  | +
 | 
												
													
														
															|  | 
 |  | +let BlockEmbed = Quill.import('blots/block/embed');
 | 
												
													
														
															|  | 
 |  | +class AppPanelEmbed extends BlockEmbed {
 | 
												
													
														
															|  | 
 |  | +    static create(value) {
 | 
												
													
														
															|  | 
 |  | +        const node = super.create(value);
 | 
												
													
														
															|  | 
 |  | +        node.setAttribute('contenteditable', 'false');
 | 
												
													
														
															|  | 
 |  | +        node.setAttribute('width', '100%');
 | 
												
													
														
															|  | 
 |  | +        //   设置自定义html
 | 
												
													
														
															|  | 
 |  | +        node.innerHTML = this.transformValue(value)
 | 
												
													
														
															|  | 
 |  | +        return node;
 | 
												
													
														
															|  | 
 |  | +    }
 | 
												
													
														
															|  | 
 |  | +
 | 
												
													
														
															|  | 
 |  | +    static transformValue(value) {
 | 
												
													
														
															|  | 
 |  | +        let handleArr = value.split('\n')
 | 
												
													
														
															|  | 
 |  | +        handleArr = handleArr.map(e => e.replace(/^[\s]+/, '')
 | 
												
													
														
															|  | 
 |  | +            .replace(/[\s]+$/, ''))
 | 
												
													
														
															|  | 
 |  | +        return handleArr.join('')
 | 
												
													
														
															|  | 
 |  | +    }
 | 
												
													
														
															|  | 
 |  | +
 | 
												
													
														
															|  | 
 |  | +    // 返回节点自身的value值 用于撤销操作
 | 
												
													
														
															|  | 
 |  | +    static value(node) {
 | 
												
													
														
															|  | 
 |  | +        return node.innerHTML
 | 
												
													
														
															|  | 
 |  | +    }
 | 
												
													
														
															|  | 
 |  | +}
 | 
												
													
														
															|  | 
 |  | +// blotName
 | 
												
													
														
															|  | 
 |  | +AppPanelEmbed.blotName = 'AppPanelEmbed';
 | 
												
													
														
															|  | 
 |  | +// class名将用于匹配blot名称
 | 
												
													
														
															|  | 
 |  | +AppPanelEmbed.className = 'embed-innerApp';
 | 
												
													
														
															|  | 
 |  | +// 标签类型自定义
 | 
												
													
														
															|  | 
 |  | +AppPanelEmbed.tagName = 'p';
 | 
												
													
														
															|  | 
 |  | +Quill.register(AppPanelEmbed);
 | 
												
													
														
															|  | 
 |  | +
 | 
												
													
														
															|  |  var RichTextUploadUrl, RichTextUploadSign;
 |  |  var RichTextUploadUrl, RichTextUploadSign;
 | 
												
													
														
															|  |  //上传图片
 |  |  //上传图片
 | 
												
													
														
															|  |  function uploadImg(s) {
 |  |  function uploadImg(s) {
 | 
												
											
												
													
														
															|  | @@ -46,6 +77,50 @@ function fileSelect() {
 | 
												
													
														
															|  |      }
 |  |      }
 | 
												
													
														
															|  |      uploader.click();
 |  |      uploader.click();
 | 
												
													
														
															|  |  }
 |  |  }
 | 
												
													
														
															|  | 
 |  | +//音频文件选择
 | 
												
													
														
															|  | 
 |  | +function fileSelectAudio() {
 | 
												
													
														
															|  | 
 |  | +    let uploader = document.getElementById("fileToUploadAudio");
 | 
												
													
														
															|  | 
 |  | +    if (!uploader.onchange) {
 | 
												
													
														
															|  | 
 |  | +        uploader.onchange = () => {
 | 
												
													
														
															|  | 
 |  | +            uploadAudio(this)
 | 
												
													
														
															|  | 
 |  | +        }
 | 
												
													
														
															|  | 
 |  | +    }
 | 
												
													
														
															|  | 
 |  | +    uploader.click();
 | 
												
													
														
															|  | 
 |  | +}
 | 
												
													
														
															|  | 
 |  | +//音频文件上传
 | 
												
													
														
															|  | 
 |  | +function uploadAudio(s) {
 | 
												
													
														
															|  | 
 |  | +    let myform = new FormData()
 | 
												
													
														
															|  | 
 |  | +    let file = document.getElementById("fileToUploadAudio").files[0]
 | 
												
													
														
															|  | 
 |  | +    if (!file) { return; };
 | 
												
													
														
															|  | 
 |  | +    myform.append('file', file);
 | 
												
													
														
															|  | 
 |  | +    myform.append('sign', RichTextUploadSign);
 | 
												
													
														
															|  | 
 |  | +    $.ajax({
 | 
												
													
														
															|  | 
 |  | +        method: "post",
 | 
												
													
														
															|  | 
 |  | +        dataType: "json",
 | 
												
													
														
															|  | 
 |  | +        url: location.origin + RichTextUploadUrl,
 | 
												
													
														
															|  | 
 |  | +        data: myform,
 | 
												
													
														
															|  | 
 |  | +        contentType: false,
 | 
												
													
														
															|  | 
 |  | +        processData: false,
 | 
												
													
														
															|  | 
 |  | +        success: function (data) {
 | 
												
													
														
															|  | 
 |  | +            if (data.error && data.error.length) {
 | 
												
													
														
															|  | 
 |  | +                message.warning(data.error[0].message);
 | 
												
													
														
															|  | 
 |  | +            } else {
 | 
												
													
														
															|  | 
 |  | +                const cursorPosition = s.quill.getSelection().index
 | 
												
													
														
															|  | 
 |  | +                s.quill.insertEmbed(
 | 
												
													
														
															|  | 
 |  | +                    cursorPosition,
 | 
												
													
														
															|  | 
 |  | +                    'AppPanelEmbed',
 | 
												
													
														
															|  | 
 |  | +                    `<audio src="${globalConfig.avatarUploadHost + data.data}" controls="controls">Your browser does not support the audio element.</audio>`
 | 
												
													
														
															|  | 
 |  | +                );
 | 
												
													
														
															|  | 
 |  | +                s.quill.setSelection(cursorPosition + 1)
 | 
												
													
														
															|  | 
 |  | +            };
 | 
												
													
														
															|  | 
 |  | +
 | 
												
													
														
															|  | 
 |  | +        },
 | 
												
													
														
															|  | 
 |  | +        error: function(XMLHttpRequest, textStatus, errorThrown){
 | 
												
													
														
															|  | 
 |  | +            //查看错误信息
 | 
												
													
														
															|  | 
 |  | +            message("上传失败");
 | 
												
													
														
															|  | 
 |  | +        }
 | 
												
													
														
															|  | 
 |  | +    })
 | 
												
													
														
															|  | 
 |  | +}
 | 
												
													
														
															|  |  //视频文件选择
 |  |  //视频文件选择
 | 
												
													
														
															|  |  function fileSelectVideo() {
 |  |  function fileSelectVideo() {
 | 
												
													
														
															|  |      let uploader = document.getElementById("fileToUploadVideo");
 |  |      let uploader = document.getElementById("fileToUploadVideo");
 | 
												
											
												
													
														
															|  | @@ -75,10 +150,15 @@ function uploadVideo(s) {
 | 
												
													
														
															|  |                  message.warning(data.error[0].message);
 |  |                  message.warning(data.error[0].message);
 | 
												
													
														
															|  |              } else {
 |  |              } else {
 | 
												
													
														
															|  |                  const cursorPosition = s.quill.getSelection().index
 |  |                  const cursorPosition = s.quill.getSelection().index
 | 
												
													
														
															|  | -                s.quill.insertEmbed( cursorPosition, "video", globalConfig.avatarUploadHost + data.data );
 |  | 
 | 
												
													
														
															|  | 
 |  | +                s.quill.insertEmbed(
 | 
												
													
														
															|  | 
 |  | +                    cursorPosition,
 | 
												
													
														
															|  | 
 |  | +                    'AppPanelEmbed',
 | 
												
													
														
															|  | 
 |  | +                    `<video controls="" autoPlay="" name="media">
 | 
												
													
														
															|  | 
 |  | +                            <source src=${globalConfig.avatarUploadHost + data.data} type="video/mp4">
 | 
												
													
														
															|  | 
 |  | +                    </video>`
 | 
												
													
														
															|  | 
 |  | +                );
 | 
												
													
														
															|  |                  s.quill.setSelection(cursorPosition + 1)
 |  |                  s.quill.setSelection(cursorPosition + 1)
 | 
												
													
														
															|  |              };
 |  |              };
 | 
												
													
														
															|  | -            console.log("上传成功")
 |  | 
 | 
												
													
														
															|  |  
 |  |  
 | 
												
													
														
															|  |          },
 |  |          },
 | 
												
													
														
															|  |          error: function(XMLHttpRequest, textStatus, errorThrown){
 |  |          error: function(XMLHttpRequest, textStatus, errorThrown){
 | 
												
											
												
													
														
															|  | @@ -98,6 +178,10 @@ const Editors = React.createClass({
 | 
												
													
														
															|  |      handleRichText(value) {
 |  |      handleRichText(value) {
 | 
												
													
														
															|  |          this.setState({ value: value });
 |  |          this.setState({ value: value });
 | 
												
													
														
															|  |          this.props.handleRichText(value);
 |  |          this.props.handleRichText(value);
 | 
												
													
														
															|  | 
 |  | +        // this.props.handleRichText(value.replace(/iframe/g, 'video'));
 | 
												
													
														
															|  | 
 |  | +    },
 | 
												
													
														
															|  | 
 |  | +    componentDidMount() {
 | 
												
													
														
															|  | 
 |  | +        document.getElementsByClassName('ql-audio')[0].style = 'background: url("../../image/audio.png") no-repeat;background-size: contain;'
 | 
												
													
														
															|  |      },
 |  |      },
 | 
												
													
														
															|  |      componentWillMount() {
 |  |      componentWillMount() {
 | 
												
													
														
															|  |          RichTextUploadUrl = this.props.uploadUrl;
 |  |          RichTextUploadUrl = this.props.uploadUrl;
 | 
												
											
												
													
														
															|  | @@ -125,10 +209,11 @@ const Editors = React.createClass({
 | 
												
													
														
															|  |                      //  [{ 'font': [] }],
 |  |                      //  [{ 'font': [] }],
 | 
												
													
														
															|  |                      [{ 'align': [] }],
 |  |                      [{ 'align': [] }],
 | 
												
													
														
															|  |                      ['link', 'image','video'],
 |  |                      ['link', 'image','video'],
 | 
												
													
														
															|  | -                    ['clean']
 |  | 
 | 
												
													
														
															|  | 
 |  | +                    ['clean'],
 | 
												
													
														
															|  | 
 |  | +                    ['audio']
 | 
												
													
														
															|  |                  ],
 |  |                  ],
 | 
												
													
														
															|  | -                handlers: { 'image': fileSelect ,'video': fileSelectVideo}
 |  | 
 | 
												
													
														
															|  | -            }
 |  | 
 | 
												
													
														
															|  | 
 |  | +                handlers: { 'image': fileSelect ,'video': fileSelectVideo,'audio':fileSelectAudio}
 | 
												
													
														
															|  | 
 |  | +            },
 | 
												
													
														
															|  |          };
 |  |          };
 | 
												
													
														
															|  |          const formats = [
 |  |          const formats = [
 | 
												
													
														
															|  |              'size', 'header',
 |  |              'size', 'header',
 | 
												
											
												
													
														
															|  | @@ -136,7 +221,7 @@ const Editors = React.createClass({
 | 
												
													
														
															|  |              'list', 'bullet', 'indent',
 |  |              'list', 'bullet', 'indent',
 | 
												
													
														
															|  |              'color', 'background',
 |  |              'color', 'background',
 | 
												
													
														
															|  |              'align',
 |  |              'align',
 | 
												
													
														
															|  | -            'link', 'image','video'
 |  | 
 | 
												
													
														
															|  | 
 |  | +            'link', 'image','video','AppPanelEmbed'
 | 
												
													
														
															|  |          ];
 |  |          ];
 | 
												
													
														
															|  |          return (
 |  |          return (
 | 
												
													
														
															|  |              <div>
 |  |              <div>
 | 
												
											
												
													
														
															|  | @@ -148,8 +233,9 @@ const Editors = React.createClass({
 | 
												
													
														
															|  |                      placeholder='请填写内容!'
 |  |                      placeholder='请填写内容!'
 | 
												
													
														
															|  |                      onChange={this.handleRichText}
 |  |                      onChange={this.handleRichText}
 | 
												
													
														
															|  |                  />
 |  |                  />
 | 
												
													
														
															|  | -                <input type="file" name="fileToUpload" id="fileToUpload" placeholder='请填写内容!' style={{ "display": "none" }} />
 |  | 
 | 
												
													
														
															|  | -                <input type="file" name="fileToUploadVideo" id="fileToUploadVideo" placeholder='请填写视频!' style={{ "display": "none" }} />
 |  | 
 | 
												
													
														
															|  | 
 |  | +                <input accept="image/*" type="file" name="fileToUpload" id="fileToUpload" placeholder='请填写内容!' style={{ "display": "none" }} />
 | 
												
													
														
															|  | 
 |  | +                <input accept="video/*" type="file" name="fileToUploadVideo" id="fileToUploadVideo" placeholder='请填写视频!' style={{ "display": "none" }} />
 | 
												
													
														
															|  | 
 |  | +                <input accept="audio/*" type="file" name="fileToUploadAudio" id="fileToUploadAudio" placeholder='请选择音频!' style={{ "display": "none" }} />
 | 
												
													
														
															|  |              </div>
 |  |              </div>
 | 
												
													
														
															|  |          )
 |  |          )
 | 
												
													
														
															|  |      },
 |  |      },
 |