下面为您讲解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添加上传音频功能的完整攻略。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：vue quill editor 使用富文本添加上传音频功能 - Python技术站
微信扫一扫 
支付宝扫一扫 