vue quill editor 使用富文本添加上传音频功能-前端开发

下面为您讲解vue quill editor 如何添加富文本上传音频功能的攻略：

下面为您讲解vue quill editor 如何添加富文本上传音频功能的攻略：

1. 安装依赖

首先需要安装vue-quill-editor和quill-image-extend-module的依赖，使用npm命令如下：

npm install vue-quill-editor quill-image-extend-module

2. 引入依赖

在需要实现富文本编辑器的组件中，import引入vue-quill-editor和quill-image-extend-module，并且将组件注册为本地组件，示例代码如下：

<template>
  <div>
    <!-- 编辑器组件 -->
    <vue-quill-editor ref="myQuillEditor"
                      v-model="editorContent"
                      :options="editorOption"/>
  </div>
</template>

<script>
import VueQuillEditor from 'vue-quill-editor'
import Quill from 'quill'
import 'quill/dist/quill.snow.css'
import ImageExtend from 'quill-image-extend-module'

Quill.register('modules/imageExtend', ImageExtend)

export default {
  name: "Editor",
  components: { VueQuillEditor },
  data () {
    return {
      editorContent: '',
      editorOption: {
        placeholder: '请输入详情',
        theme: 'snow',
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'],
            ['blockquote', 'code-block'],
            [{ 'header': 1 }, { 'header': 2 }],
            [{ 'list': 'ordered' }, { 'list': 'bullet' }],
            [{ 'script': 'sub' }, { 'script': 'super' }],
            [{ 'indent': '-1' }, { 'indent': '+1' }],
            [{ 'direction': 'rtl' }],
            [{ 'size': ['small', false, 'large', 'huge'] }],
            [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
            [{'color': []}, {'background': []}],
            [{'font': []}],
            [{'align': []}],
            ['clean'],
            ['link', 'image', 'video', 'audio']
          ],
          imageExtend: {
            loading: true,
            sizeLimit: 1000000,
            terminateOnImageLoad: true
          },
          audio: {
            buttonTitle: "添加音频"
          }
        }
      }
    };
  }
}
</script>

上面代码中，我们使用了"quill-image-extend-module"来实现上传音频文件的功能。在editor Option的modules中添加audio属性，为上传音频定义一个按钮标题，这个按钮将呈现在富文本编辑器的工具栏中。

3. 自定义规则Formats

在组件内定义一个formats的对象，使音频视频都可以被Quill在内容中识别：

<template>
  <div>
    ...
  </div>
</template>

<script>
import VueQuillEditor from 'vue-quill-editor'
import Quill from 'quill'
import 'quill/dist/quill.snow.css'
import ImageExtend from 'quill-image-extend-module'

Quill.register('modules/imageExtend', ImageExtend)

export default {
  name: "Editor",
  components: { VueQuillEditor },
  data () {
    return {
      ...
      editorOption: {
        ...
          formats: [
            'header', 'font', 'size', 'bold', 'italic', 'underline', 'strike', 'blockquote',
            'list', 'bullet', 'indent', 'link', 'image', 'video', 'audio'
          ],
        ...
      },
      ...
    };
  }
}
</script>

4. 定义audio上传事件

我们使用"quill-image-extend-module"来定义上传音频的事件，通过判断文件类型来判断是音频还是视频文件，最后将文件上传到服务器。

<template>
  <div>
    ...
  </div>
</template>

<script>

...

Quill.register('modules/audioExtend', function(quill, options) {
  var audioButton = document.querySelector('.ql-audio');
  audioButton.addEventListener('click', function() {
    var input = document.createElement('input');
    input.setAttribute('type', 'file');
    input.setAttribute('accept', 'audio/*');
    input.click();

    input.onchange = function() {
      var file = input.files[0];
      var formData = new FormData();
      formData.append('file', file);
      console.log(file);
      var url = '';
      postAudio(formData).then(data=>{
        if(data.code === 0){
          url = data.data.url;
          var range = quill.getSelection();
          quill.insertEmbed(range.index, 'audio', url);
        } else {
          Message({
            message: data.msg,
            type: 'error'
          })
        }
      })
    };
  });
});

function postAudio(data) {
  var promise = new Promise((resolve, reject) => {
    axios.post('/api/uploadAudio', data, {
      headers: { 'Content-Type': 'multipart/form-data' }
    })
      .then(response => {
        resolve(response.data)
      }, err => {
        reject(err)
      })
  })
  return promise
}

export default {
  name: "Editor",
  components: { VueQuillEditor },
  data () {
    return {
      ...
      editorOption: {
        ...
        modules: {
          ...
          audioExtend: {}
        } 
      }
      ...
    };
  }
}

</script>

上面代码中，我们使用了"axios"插件将音频文件上传到服务器，服务器可以返回上传后的url，然后将url插入到富文本编辑器的内容中。

5. 显示audio信息

现在音频文件已经上传到服务器，接下来要在富文本编辑器中显示它。在'snow'主题CSS中我们需要添加一个"ql-audio"类来实现这一点。

.ql-snow .ql-audio {
  background-position: center;
  background-repeat: no-repeat;
  background-size: 24px 24px;
  width: 24px;
  height: 24px;
}

最后，我们需要定义audio标签，来实现播放音频的功能。

<template>
  <div>
    <vue-quill-editor ref="myQuillEditor"
                      v-model="editorContent"
                      :options="editorOption"/>
    <audio ref="audioPlayer"/>
  </div>
</template>

<script>

...

Quill.register('modules/audioExtend', function(quill, options) {
  var Audio;

  Audio = Quill.import('formats/audio');
  Audio.tagName = 'AUDIO';
  Quill.register(Audio, true);

  var audioButton = document.querySelector('.ql-audio');
  audioButton.addEventListener('click', function() {
    var input = document.createElement('input');
    input.setAttribute('type', 'file');
    input.setAttribute('accept', 'audio/*');
    input.click();

    input.onchange = function() {
      var file = input.files[0];
      var formData = new FormData();
      formData.append('file', file);
      console.log(file);
      var url = '';
      postAudio(formData).then(data=>{
        if(data.code === 0){
          url = data.data.url;
          var range = quill.getSelection();
          quill.insertEmbed(range.index, 'audio', url);
        } else {
          Message({
            message: data.msg,
            type: 'error'
          })
        }
      })
    };
  });

  Quill.register('modules/audioHandler', function(quill, options) {
    var container = document.querySelector('.ql-editor');
    container.addEventListener('click', function(e) {
      if (e.target && e.target.classList.contains('ql-audio')) {
        var url = e.target.getAttribute('src');
        var audio = this.$refs.audioPlayer;
        audio.src = url;
        e.target.classList.add('playing');
        audio.addEventListener("ended", function() {
          e.target.classList.remove('playing');
        });
        audio.play();
      }
    }.bind(this));
  });
});

...

export default {
  name: "Editor",
  components: { VueQuillEditor },
  data () {
    return {
      ...
      editorOption: {
        ...
        modules: {
          ...
          audioExtend: {},
          audioHandler: {}
        }
      }
      ...
    };
  }
}

</script>

上面代码中，我们通过输入audio标签语句将服务器上的音频文件连接到富文本编辑器的内容。然后，我们又将控制端口添加到了富文本编辑器上，以激活音频播放器。

这就是给vue quill editor添加上传音频功能的完整攻略。