增加语音上传

js/component/richTextEditors.jsx

@@ -1,11 +1,42 @@
 import React from 'react';
 import theme from 'react-quill/dist/quill.snow.css';
 import { message } from 'antd';
-import ReactQuill from 'react-quill';
-
+import ReactQuill,{Quill} from 'react-quill';
 import ajax from 'jquery/src/ajax/xhr.js';
 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;
 //上传图片
 function uploadImg(s) {
@@ -46,6 +77,50 @@ function fileSelect() {
     }
     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() {
     let uploader = document.getElementById("fileToUploadVideo");
@@ -75,10 +150,15 @@ function uploadVideo(s) {
                 message.warning(data.error[0].message);
             } else {
                 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)
             };
-            console.log("上传成功")
 
         },
         error: function(XMLHttpRequest, textStatus, errorThrown){
@@ -98,6 +178,10 @@ const Editors = React.createClass({
     handleRichText(value) {
         this.setState({ value: 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() {
         RichTextUploadUrl = this.props.uploadUrl;
@@ -125,10 +209,11 @@ const Editors = React.createClass({
                     //  [{ 'font': [] }],
                     [{ 'align': [] }],
                     ['link', 'image','video'],
-                    ['clean']
+                    ['clean'],
+                    ['audio']
                 ],
-                handlers: { 'image': fileSelect ,'video': fileSelectVideo}
-            }
+                handlers: { 'image': fileSelect ,'video': fileSelectVideo,'audio':fileSelectAudio}
+            },
         };
         const formats = [
             'size', 'header',
@@ -136,7 +221,7 @@ const Editors = React.createClass({
             'list', 'bullet', 'indent',
             'color', 'background',
             'align',
-            'link', 'image','video'
+            'link', 'image','video','AppPanelEmbed'
         ];
         return (
             <div>
@@ -148,8 +233,9 @@ const Editors = React.createClass({
                     placeholder='请填写内容！'
                     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>
         )
     },