vue-tinymce富文本整合，并上传图片

安装tinymce-vue,tinymce

npm install @tinymce/tinymce-vue -S
npm install tinymce -S

集成tinymce并封装成组件

<template>
	<div>
		<Editor
			v-model="content"
			:init="options"
			:disabled="false"
		>
	</div>
</template>

<script>
//import tinymce plug
import tinymce from 'tinymce/tinymce' // 不引入不显示
import Editor from '@tinymce/tinymce-vue'
// Any plugins you want to use has to be imported
import 'tinymce/plugins/image' // 插入上传图片插件
import 'tinymce/plugins/imagetools' //上传图片插件
import 'tinymce/plugins/media'
import 'tinymce/plugins/table'
import 'tinymce/plugins/lists'
import 'tinymce/plugins/wordcount' // 字数统计
// import style
import 'tinymce/themes/silver'
import 'tinymce/skins/ui/oxide/content.css'
import 'tinymce/skins/ui/oxide/skin.css'
import 'tinymce/icons/default/icons'
// import format cn
// 中文包下载: https://www.tiny.cloud/?download=zh_CN
import '@u/tinymce/zh_CN'
</script>
export default{
	name:'TinyMce',
	components:{
		Editor
	},
	props:{
		htmlClass:{
			type:String,
			default:''
		},
		value:{
			type:String,
			default:''
		},
		plugins:{
			default:function(){
				return ['image imagetools table lists wordcount']
			},
			type: Array
		},
		inline:{
			type:Boolean,
			default:false
		},
		height:{
			type:Number,
			default:500
		},
		toolbar:{
			default:'undo redo | formatselect | bold italic forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | image table | removeformat',
			type:String
		},
		otherOptions:{
			default:function(){
				return {}
			}
			type:Object
		}
	},
	data(){
		return {
			content:'',
			options:Object.assign({
				language:'zh_CN',
				plugins:this.plugins,
				toolbar:this.toolbar,
				height:this.height,
				branding:false,
				menubar:true,
				image_title:false,
				images_upload_handler:(blobInfo,success,faliure)=>{
					const formData = new FormData()
					// 二进制文件，文件名装入form传到后台处理
					formData.append('file',blobInfo.blob(),blobInfo.filename())
					this.$http.request({
						url:'common/upload',
						method:'post',
						headers:{'Content-Type':'multipart/form-data'},
						data:formData
					}).then(res=>{
						if(res.data.result){
							// 上传成功后，返回正确的图片地址
							success(res.data.data.file_url)
						}
					})
				}
			},this.otherOptions)
		}
	},
	watch:{
		content(newValue){
			this.$emit('on-change',newValue)
		}
	},
	mounted(){
		// 初始化
		this.content=this.value
		tinymce.init(this.options)
	}
}