tinyMCE富文本编辑器在 vue2.0项目中的使用

npm install tinymce -s
npm install @tinymce/tinymce-vue@3.2.8 -s
现在tinymce-vue最新版本是4.0，已经用的vue3.0的了，所以要使用之前版本
汉化包需要去官网上下： 官网地址

下载完后放到静态文件public目录下
1、在public目录的static下新建tinymce，将上面下载的语言包解压到该目录
2、在node_modules里面找到tinymce,将skins目录复制到public/static/tinymce里面

直接上组件

<template>
	<div class="tinymce-box">
		<myEditor v-model="myValue" :init="init" api-key="填写自己的key"> </myEditor>
	</div>
</template>

<script>
import myEditor from '@tinymce/tinymce-vue'
// import 'tinymce/themes/silver'
// import 'tinymce/plugins/image'// 上传图片
// import 'tinymce/plugins/table'// 表格
// import 'tinymce/plugins/lists'// 列表
// import 'tinymce/plugins/wordcount'// 字数统计
// import 'tinymce/icons/default/icons.min.js'//图标
export default {
	components:{
		myEditor
	},
	props: {
		value: {
			type: String,
			default: ''
		},
		plugins: {
			type: [String, Array],
			default: 'image table'
		},
		toolbar: {
			type: [String, Array],
			default: 'undo redo |  fontsizeselect | bold italic underline  forecolor backcolor | lineheight alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | lists image  table | removeformat'
		},
		height:{
			type:Number,
			default:300,
		}
	},
	data(){
		return{
			init: {
				language_url: 'static/tinymce/langs/zh_CN.js',
				language: 'zh_CN',
				height: this.height,
				plugins: this.plugins,
				toolbar: this.toolbar,
				branding: false,
				menubar: false,
				fontsize_formats: '10px 12px 14px 16px 18px 24px 36px 48px',
				images_upload_handler: (blobInfo, success, failure) => {
					const img = 'data:image/jpeg;base64,' + blobInfo.base64()
					success(img)
				}
			},
			myValue: this.value
		}
	},
	mounted () {
	  // tinymce.init({})
	},
	methods: {

	},
	watch: {
		value (newValue) {
			this.myValue = newValue
		},
		myValue (newValue) {
			this.$emit('input', newValue)
		}
	}
}
	
</script>
<style lang="scss">
	.mce-content-body{
		td{
			vertical-align: initial;
		}
	}
</style>

用的时候直接当正常组件使用就行