<template>
<div class="editorClass">
<div :id="params.id"></div>
<Audio
v-if="audioShow"
@uploadAudio="uploadAudio"
@uploadNetworkAudio="handleUploadNetworkAudio"
/>
</div>
</template>
<script>
import E from 'wangeditor';
import Audio from './audio.vue';
import Axios from 'axios';
import qs from 'querystring';
// import config from '@/conf';
export default {
name: 'wangEditor',
data() {
return {
fileSrc: '',
};
},
components: {
Audio,
},
props: {
id: {
type: String,
default: () => '',
},
content: {
type: String,
default: () => '',
},
},
watch: {
id: {
handler(val) {
if (val) {
this.params.id = val;
}
},
immediate: true,
},
},
data() {
return {
localEditor: null,
audioShow: false,
params: {
id: 'wang-editor', //富文本框ID
menus: ['bold', 'head', 'link', 'italic', 'underline'],
customImgUpload: {
flag: true, //是否自定义方法上传图片
methods: {
customUploadImg: (resultFiles, insertImgFn) => {
console.log(resultFiles, insertImgFn, '插入图片');
this.uploadFile('img', resultFiles, insertImgFn);
// resultFiles 是 input 中选中的文件列表
// insertImgFn 是获取图片 url 后,插入到编辑器的方法
// 上传图片,返回结果,将图片插入到编辑器中
},
},
},
customVideoUpload: {
flag: true, //是否自定义方法上传视频
methods: {
customUploadVideo: (resultFiles, insertVideoFn) => {
console.log(resultFiles, insertVideoFn, '插入视频');
this.uploadFile('video', resultFiles, insertVideoFn);
// resultFiles 是 input 中选中的文件列表
// insertVideoFn 是获取视频 url 后,插入到编辑器的方法
// 上传视频,返回结果,将视频地址插入到编辑器中
// insertVideoFn('https://touxianglogo.com/img/3.36eb1cce.jpg')
},
},
},
params: {
focus: false, //自动focus
placeholder: '请输入正文...', //placeholder内容提示
showMenuTooltips: true, //菜单栏提示
menuTooltipPosition: 'down',
excludeMenus: [
//自定义程度比较轻时,可以去除不需要的菜单
// 'emoticon'
],
// 图片参数配置
uploadFileName: 'your-custom-fileName', //自定义文件名
withCredentials: true, // 是否跨域上传
uploadImgTimeout: 60 * 1000, //超时时间默认10S
uploadImgServer: 'http://100.4.14.8:30384/file/newUpload', /
vue 富文本标签wang-editor组件的使用
最新推荐文章于 2024-10-11 14:49:00 发布
本文介绍如何在Vue.js项目中集成并使用wang-editor富文本编辑器组件,详细阐述了audio.vue文件的相关内容,帮助开发者实现前端富文本编辑功能。
摘要由CSDN通过智能技术生成