15、Vue CLI 3+tinymce 5富文本编辑器整合

富文本编辑器里大佬们都说tinymce NB！

插件安装

inymce官方提供了一个vue的组件tinymce-vue

如果有注册或购买过服务的话，直接通过组件配置api-key直接使用，懒的注册或者购买的直接下载tinymce

安装tinymce

npm install tinymce -S

安装tinymce-vue

npm install @tinymce/tinymce-vue -S

package.json

"@tinymce/tinymce-vue": "^2.1.0",

"tinymce": "^5.0.11",

下载中文语言包

tinymce提供了很多的语言包，这里我们下载中文语言包

地址：https://www.tiny.cloud/get-tiny/language-packages/

下载完后放到静态文件public目录下

1、在public目录下新建tinymce，将上面下载的语言包解压到该目录

2、在node_modules里面找到tinymce,将skins目录复制到public/tinymce里面

tinymce使用

封装成组件

<template>
	<div class="tinymce-box">
		<editor v-model="myValue"
	      :init="init"
	      :disabled="disabled"
	      @onClick="onClick">
	    </editor>
	</div>
</template>

<script>
import tinymce from 'tinymce/tinymce' //tinymce默认hidden，不引入不显示
import Editor from '@tinymce/tinymce-vue'
import 'tinymce/themes/silver'
// 编辑器插件plugins
// 更多插件参考：https://www.tiny.cloud/docs/plugins/
import 'tinymce/plugins/image'// 插入上传图片插件
import 'tinymce/plugins/media'// 插入视频插件
import 'tinymce/plugins/table'// 插入表格插件
import 'tinymce/plugins/lists'// 列表插件
import 'tinymce/plugins/wordcount'// 字数统计插件
export default {
	components:{
		Editor
	},
	name:'tinymce',
	props: {
	    value: {
	      type: String,
	      default: ''
	    },
	    disabled: {
	      type: Boolean,
	      default: false
	    },
	    plugins: {
	      type: [String, Array],
	      default: 'lists image media table wordcount'
	    },
	    toolbar: {
	      type: [String, Array],
	      default: 'undo redo |  formatselect | bold italic forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | lists image media table | removeformat'
	    }
	},
	data(){
		return{
			init: {
		        language_url: '/tinymce/langs/zh_CN.js',
		        language: 'zh_CN',
		        skin_url: '/tinymce/skins/ui/oxide',
		        // skin_url: 'tinymce/skins/ui/oxide-dark',//暗色系
		        height: 300,
		        plugins: this.plugins,
		        toolbar: this.toolbar,
		        branding: false,
		        menubar: false,
		        // 此处为图片上传处理函数，这个直接用了base64的图片形式上传图片，
		        // 如需ajax上传可参考https://www.tiny.cloud/docs/configure/file-image-upload/#images_upload_handler
		        images_upload_handler: (blobInfo, success, failure) => {
		          const img = 'data:image/jpeg;base64,' + blobInfo.base64()
		          success(img)
		        }
		      },
		      myValue: this.value
		}
	},
	mounted () {
	    tinymce.init({})
	},
	methods: {
	    // 添加相关的事件，可用的事件参照文档=> https://github.com/tinymce/tinymce-vue => All available events
	    // 需要什么事件可以自己增加
	    onClick (e) {
	      this.$emit('onClick', e, tinymce)
	    },
	    // 可以添加一些自己的自定义事件，如清空内容
	    clear () {
	      this.myValue = ''
	    }
	},
	watch: {
	    value (newValue) {
	      this.myValue = newValue
	    },
	    myValue (newValue) {
	      this.$emit('input', newValue)
	    }
	}
}

</script>
<style scoped>

</style>

组件引用

<template>
  <div class="home">
    <tinymce
		ref="editor"
		v-model="msg"
		:disabled="disabled"
		@onClick="onClick"
    />
    <button @click="clear">清空内容</button>
    <button @click="disabled = true">禁用</button>
  </div>
</template>
<script>
import tinymce from '@/components/tinymce.vue'

export default {
	name: 'home',
	components: {
		tinymce
	},
	data(){
		return{
			msg: 'Welcome to Use Tinymce Editor',
	                disabled: false
		}
	},
	methods: {
		// 鼠标单击的事件
		onClick (e, editor) {
			console.log('Element clicked')
			console.log(e)
			console.log(editor)
		},
		// 清空内容
		clear () {
		    this.$refs.editor.clear()
		}
	}
}
</script>

更详细看官方api