建议加入富文本编辑

[youngsailor]

建议加入富文本编辑

[zbow]

同等

[falcon95]

赞成

[lujunjian1570]

最近刚加了tinymce，用着还行

[similing4]

我这用的是WangEditor，集成了七牛云上传：

<template>
	<div>
		<div ref="editor"></div>
		<div style="display:none;">
			<input ref="inputUpload" type="file" @change="onFileChoose" accept="audio/*" />
		</div>
	</div>
</template>

<script>
	import {
		ossUpload
	} from '@/utils/qiniuOSS.js'
	import E from 'wangeditor';
	export default {
		data() {
			return {
				editor: null
			}
		},
		props: {
			value: {
				type: String,
				required: true
			}
		},
		watch: {
			value() {
				this.editor.txt.html(this.value);
			}
		},
		mounted() {
			this.editor = new E(this.$refs.editor);
			this.editor.config.onchange = (newHtml) => {
				this.$emit("input", newHtml);
			};
			this.editor.config.customUploadImg = async (files, insert) => {
				for (var i in files) {
					var res = await ossUpload(files[i])
					insert(res.url)
				}
				this.$message.success('上传成功')
			};
			this.editor.config.customUploadVideo = async (files, insert) => {
				for (var i in files) {
					var res = await ossUpload(files[i])
					insert(res.url)
				}
				this.$message.success('上传成功')
			};
			var that = this;
			const { BtnMenu } = E;
			class MP3Menu extends BtnMenu {
				constructor(editor) {
					const $elem = E.$('<div class="w-e-menu" data-title="音频"><span>MP3</span></div>');
					super($elem, editor);
				}
				clickHandler() {
					that.$refs.inputUpload.click();
				}
				tryChangeActive() {
					this.active();
				}
			}
			E.registerMenu("mp3Key", MP3Menu)
			this.editor.create();
			this.editor.txt.html(this.value);
		},
		beforeDestroy() {
			this.editor.destroy()
			this.editor = null
		},
		methods:{
			async onFileChoose(){				
				var res = await ossUpload(this.$refs.inputUpload.files[0])
				this.editor.cmd.do('insertHTML', '<audio src="' + res.url + '" controls />');
				this.$refs.inputUpload.value = "";
			}
		}
	}
</script>

<style>
	.w-e-menu {
		z-index: 2 !important;
	}

	.w-e-text-container {
		z-index: 1 !important;
	}

	.w-e-toolbar {
		z-index: 3 !important;
	}
</style>

qiniuOSS.js:

import Vue from "vue";
import md5 from 'js-md5';
import moment from 'moment';
import * as qiniu from 'qiniu-js'; //需要npm安装

/**
 * 获取时分秒的字符串
 * @param file
 */
export function getHis() {
	return moment().format("HHmmss");
}

// 文件扩展名提取
export function fileType(fileName) {
	return fileName.substring(fileName.lastIndexOf('.') + 1)
}

export function ossUpload(filef) {
	return new Promise((resolve, reject) => {
		Vue.prototype.$u.api.oss.getAdminToken({}).then((res) => { 
/*这里接口换成自己接口的axios，响应值范例:{
			"status": 1,
			"data": {
				"token": "七牛云提供的token",
				"host": "解析到七牛云的域名",
				"key": "限制的key前缀"
			},
			"msg": "",
			"code": 20000
		}*/
			if(!res.data.status)
				return reject(res.data.msg);
			res.data = res.data.data;
			var token = res.data.token;
			var file = res.data.key;
			var host = res.data.host;
			const key = file + md5(filef.name) + "_" + getHis() + "." + fileType(filef.name);
			const putExtra = {};
			const config = {
				useCdnDomain: true, //使用cdn加速
			};
			const observable = qiniu.upload(filef, key, token, putExtra, config);
			observable.subscribe({
				next: (result) => {
					console.warn(result);
				},
				error: (e) => {
					return reject(e);
				},
				complete: (res) => {
					var key = res.key;
					const data = {
						url: host + '/' + key,
						type: filef.name ? fileType(filef.name) : 'html'
					};
					resolve(data)
				}
			});
		});
	})
}

[wmhello]

富文本可以自己集成呀