Vue2使用富文本tinymce

1. 安装依赖

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

vue2使用tinymce-vue依赖只能安装3.x版本,4.x版本开始仅支持vue3

2.添加富文本样式

找到node_modules/tinymce/skins目录，并把所有内容复制到public/tinymce/skins文件中

3. 添加语言包

https://www.tiny.cloud/get-tiny/language-packages/这里有很多国家的语言包，可以根据需求自行添加

此刻public的结构为

4.创建组件并填充内容

<template>
	<div class="tinymce-editor">
		<Editor v-model="contentValue" :init="init" :disabled="disabled" :placeholder="placeholder" @onClick="onClick" />
	</div>
</template>

<script>
	import updateFile from "@/api";
	import Editor from '@tinymce/tinymce-vue'
	import tinymce from 'tinymce/tinymce'
	import 'tinymce/themes/silver'
	import 'tinymce/icons/default'
	import 'tinymce/models/dom'

	// 引入编辑器插件
	import 'tinymce/plugins/code'  //编辑源码
	import 'tinymce/plugins/image'  //插入编辑图片
	import 'tinymce/plugins/media'  //插入视频
	import 'tinymce/plugins/link'  //超链接
	import 'tinymce/plugins/preview'//预览
	import 'tinymce/plugins/template'//模板
	import 'tinymce/plugins/table'  //表格
	import 'tinymce/plugins/pagebreak'  //分页
	import 'tinymce/plugins/lists'  //列
	import 'tinymce/plugins/advlist'  //列
	import 'tinymce/plugins/quickbars'  //快速工具条

	export default {
		components: {
			Editor
		},
		props: {
			modelValue: {
				type: String,
				default: ""
			},
			placeholder: {
				type: String,
				default: ""
			},
			height: {
				type: Number,
				default: 300,
			},
			disabled: {
				type: Boolean,
				default: false
			},
			plugins: {
				type: [String, Array],
				default: 'code image media link preview table quickbars template pagebreak lists advlist'
			},
			toolbar: {
				type: [String, Array],
				default: 'undo redo |  forecolor backcolor bold italic underline strikethrough link | blocks fontfamily fontsize | \
					alignleft aligncenter alignright alignjustify | outdent indent | numlist bullist | pagebreak | \
					image media table template preview | code selectall'
			},
			templates: {
				type: Array,
				default: () => []
			},
			options: {
				type: Object,
				default: () => {}
			}
		},
		data() {
			return {
				init: {
					language_url: '/tinymce/langs/zh_CN.js',
					language: 'zh_CN',
					skin_url: '/tinymce/skins/ui/oxide',
					content_css: "/tinymce/skins/content/default/content.css",
					menubar: false,
					statusbar: true,
					plugins: this.plugins,
					toolbar: this.toolbar,
					toolbar_mode: 'sliding',
					font_size_formats: '12px 14px 16px 18px 22px 24px 36px 72px',
					height: this.height,
					placeholder: this.placeholder,
					branding: false,
					resize: true,
					elementpath: true,
					content_style: "",
					templates: this.templates,
					quickbars_selection_toolbar: 'forecolor backcolor bold italic underline strikethrough link',
					quickbars_image_toolbar: 'alignleft aligncenter alignright',
					quickbars_insert_toolbar: false,
					image_caption: true,
					image_advtab: true,
					convert_urls: false,
					images_upload_handler: function(blobInfo) {
						// eslint-disable-next-line no-unused-vars
						return new Promise((resolve, reject) => {
							const data = new FormData();
							data.append("file", blobInfo.blob() ,blobInfo.filename());
							updateFile(data).then((res) => {
							 	resolve(res.data.src)
							 }).catch(() => {
							 	reject("Image upload failed")
							 })
						})
					},
					setup: function(editor) {
						editor.on('init', function() {
							this.getBody().style.fontSize = '14px';
						})
						editor.on('OpenWindow', function(e) {
							//FIX 编辑器在el-drawer中，编辑器的弹框无法获得焦点
							var D = document.querySelector('.el-drawer.open')
							var E = e.target.editorContainer
							if(D && D.contains(E)){
								var nowDA = document.activeElement
								setTimeout(()=>{
									document.activeElement.blur()
									nowDA.focus()
								},0)
							}
						})
					},
					...this.options
				},
				contentValue: this.modelValue
			}
		},
		watch: {
			modelValue(val) {
				this.contentValue = val
			},
			contentValue(val){
				this.$emit('update:modelValue', val);
			}
		},
		mounted() {
			tinymce.init({})
		},
		methods: {
			onClick(e){
				this.$emit('onClick', e, tinymce)
			}
		}
	}
</script>

<style>
</style>

5.组件使用

<MyTinymcefrom v-model="yourValue" />
import MyTinymcefrom './components/MyTinymce.vue'
components: {
    MyTinymcefrom
  }

附上效果图：

中文文档：http://tinymce.ax-z.cn
英文文档：https://www.tiny.cloud