vue中使用tinymce富文本，以及如何使用图片上传

最近在写tinymce富文本，这里特别记录一下，以便于以后方便使用，因为也涉及到图片的上传，刚刚使用的时候图片上传这里只能输入地址保存，就想能手动上传，然后在网上看了好多方法，需要这个插件那个插件的感觉很复杂，后来阴差阳错的把手动上传配置出来了，操作很简单。tinymce中文文档

1.安装

npm install tinymce
npm install @tinymce/tinymce-vue

2.在官网下载语言包 https://www.tiny.cloud/get-tiny/language-packages/
在目录public下边新建一个tinymce文件夹，然后在node_modules里找到tinymce的skin包，复制到public/tinymce里，新建langs文件，将语言包放到下边。

3.使用，我是将富文本做成了一个组件，具体代码如下

<!-- 富文本编辑器 -->
<template>
	<div class="tinymce-editor">
		<editor v-model="myValue" :init="init" :disabled="disabled" @onClick="onClick" style="height:100%;">
		</editor>
	</div>
</template>

<script>
	import tinymce from 'tinymce/tinymce'
	import Editor from "@tinymce/tinymce-vue";
	import 'tinymce/themes/silver/theme'
	import "tinymce/plugins/image"; // 插入上传图片插件
	import "tinymce/plugins/link"; //超链接插件
	import "tinymce/plugins/code"; //代码块插件
	import "tinymce/plugins/table"; // 插入表格插件
	import "tinymce/plugins/lists"; // 列表插件
	import 'tinymce/plugins/contextmenu' //右键菜单插件
	import 'tinymce/plugins/wordcount' // 字数统计插件
	import 'tinymce/plugins/colorpicker' //选择颜色插件
	import 'tinymce/plugins/textcolor' //文本颜色插件
	import 'tinymce/plugins/fullscreen' //全屏
	import 'tinymce/plugins/paste'
	export default {
		components: {
			Editor
		},
		props: {
			value: {
				type: String,
				required: false
			},
			disabled: {
				type: Boolean,
				default: false
			},
			plugins: {
				type: [String, Array],
				default: 'lists image imagetools link media table textcolor wordcount contextmenu fullscreen paste'
			},
			toolbar: {
				type: [String, Array],
				default: 'imagetools bold italic underline strikethrough blockquote | forecolor backcolor | formatselect | fontsizeselect | fontselect | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | lists link unlink image media table | removeformat | undo redo  | fullscreen',
				branding: false
			}
		},
		data() {
			return {
				init: {
					language_url: "/tinymce/langs/zh_CN.js",
					language: "zh_CN",
					skin_url: "/tinymce/skins/lightgray",
					plugins: this.plugins,
					toolbar: this.toolbar,
					branding: false, //隐藏品牌标识
					branding: false, //水印
					height: 500,
					menubar: false, // 最上方menu菜单的显示隐藏
					toolbar_drawer: true,
					statusbar: false, // 隐藏编辑器底部的状态栏
					elementpath: false, //禁用下角的当前标签路径
					// CONFIG: Paste
					paste_retain_style_properties: 'all',
					paste_word_valid_elements: '*[*]', //word需要它
					paste_data_images: true, // 粘贴的同时能把内容里的图片自动上传，非常强力的功能
					paste_convert_word_fake_lists: false, // 插入word文档需要该属性
					paste_webkit_styles: 'all',
					paste_merge_formats: true,
					nonbreaking_force_tab: false,
					paste_auto_cleanup_on_paste: false,
					//CONFIG: Font
					fontsize_formats: '10px 11px 12px 14px 16px 18px 20px 24px',
					images_upload_handler: (blobInfo, success) => {
						this.upload(blobInfo,(e)=>{
							success(e)
						})
					}
				},
				myValue: this.value,
			}
		},
		mounted() {
			tinymce.init({});
		},
		methods: {
			onClick(e) {
				this.$emit('onClick', e, tinymce)
			},
			//可以添加一些自己的自定义事件，如清空内容
			clear() {
				this.myValue = ''
			},
			upload(blobInfo,fn) {
				let formData = new FormData()
				formData.append('file', blobInfo.blob())
				//这里为自己的上传接口调用方法
				this.$api.product.fileUploading(formData).then(res => {
					if (res.code === 200) {
						fn && fn(res.result)
					} else {
						this.$message.error('图片上传失败')
						fn && fn('')
					}
				})
			}
		},
		watch: {
			value(newValue) {
				this.myValue = (newValue == null ? '' : newValue)
			},
			myValue(newValue) {
				if (this.triggerChange) {
					this.$emit('change', newValue)
				} else {
					this.$emit('input', newValue)
				}
			},
		}
	}
</script>

<style scoped>
	.tinymce-editor {
		width: 100%;
		height: 100%;
	}
</style>

4.另外 只要配置上images_upload_handler 就会出来手动上传，
如果需要粘贴图像进去，也是需要配置images_upload_handler的