vue +vue cli3 + tinymce 封装tinymce组件

前言

给公安做了个项目，后台编辑文章 前台展示，一开始用的markdown编辑器，markdown不能段落缩进，格式也有些许问题，不是公安想要的效果，今天想换一个编辑器，选择了tinymac，好像达到了预期的效果，百度查找资料，做了一下午，从0开始封装，做个笔记。

vue +vue cli3 + tinymac

1.安装tinymce-vue

npm install @tinymce/tinymce-vue -S

1.安装安装tinymce

npm install tinymce -S

若无法完成安装，将下面的配置到package.json中执行npm install

"@tinymce/tinymce-vue": "^2.0.0",
"tinymce": "^5.0.3"

下载中文语言包

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

使用

2、在node_modules里面找到tinymce,将skins目录复制到public/tinymce里面
最终形成以下目录形式：    

初始化

引入基本文件

import tinymce from 'tinymce/tinymce'
import Editor from '@tinymce/tinymce-vue'
import 'tinymce/themes/silver'

components中注册tinymce-vue才能使用

<editor id="tinymce" v-model="value" :init="init"></editor>

init: {
  language_url: '/tinymce/langs/zh_CN.js',// 语言包的路径
  language: 'zh_CN',//语言
  skin_url: '/tinymce/skins/ui/oxide',// skin路径
  height: 300,//编辑器高度
  branding: false,//是否禁用“Powered by TinyMCE”
  menubar: false,//顶部菜单栏显示
}

完整代码tinymce-editor.vue

<template>
	<div class='tinymce'>
		<editor @change="editorChange" id='tinymce' v-model='tinymceHtml' :init='init'>

		</editor>
	</div>
</template>

<script>
	import tinymce from 'tinymce/tinymce.js'
	// import 'tinymce/themes/mobile/index.js'
	import 'tinymce/themes/silver/index.js'
	import Editor from '@tinymce/tinymce-vue'


	// // 更多插件参考：https://www.tiny.cloud/docs/plugins/
	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";

	//vue-cli 3.x 需要在这引入中文包
	import "../../../../public/tinymce/langs/zh_CN.js";
	import 'tinymce/icons/default/icons.min.js' //图标

	import {
		postEditForm,
		uploadImg
	} from "network/edit.js"
	export default {
		name: 'tinymce',
		components: {
			Editor
		},
		props:{
			Html:{
				type:String,
				default:"请输入内容"
			}
		},
		data() {
			return {
				// imageArr:{
				// 	name: "",
					
				// },
				image: [],
				"tinymceHtml":"请输入内容",
				init: {

					language_url: '/tinymce/langs/zh_CN.js', // 语言包的路径
					language: 'zh_CN', //语言
					skin_url: '/tinymce/skins/ui/oxide', // skin路径
					content_css: `/tinymce/skins/content/default/content.css`, //
					height: 500, //编辑器高度
					// plugins: 'link lists image code table colorpicker textcolor wordcount contextmenu',
					plugins: 'image', //插件集合
					toolbar: 'bold italic underline strikethrough | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent blockquote | undo redo | link unlink image code | removeformat',
					branding: false, //是否禁用“Powered by TinyMCE”
					menubar: true, //顶部菜单栏显示
					images_upload_url: 'http://47.93.63.155:8081/',
					// 此处为图片上传处理函数，这个直接用了base64的图片形式上传图片，
					// 如需ajax上传可参考https://www.tiny.cloud/docs/configure/file-image-upload/#images_upload_handler
					images_upload_handler: (blobInfo, success, failure) => {
						console.log(blobInfo)
						var file = blobInfo.blob(); //转化为易于理解的file对象
						// this.imageArr.name = file.name//将图片name赋值给imagearr并传递给父组件
						console.log(file)
						
						
						const image = 'data:image/jpeg;base64,' + blobInfo.base64()//获取图片64进制码
						
							uploadImg(image).then((res) => {
						
								console.log(res.data.data)
								const img = res.data.data
								
								success(img)
								// this.imageArr.image.push(img)
								this.image.push(img)
						
							})

						// let that = this

						// let reader = new FileReader(); //调用FileReader
						// reader.readAsDataURL(file); //将文件读取为 DataURL(base64)
						// reader.onload = function(evt) { //读取操作完成时触发。

						// 	evt = evt || window.evt

						// 	let image = evt.target.result
						// 	// that.firstImgInfo.image.push(image)//将文件存储
						// 	console.log(image)

						// 	uploadImg(image).then((res) => {

						// 		console.log(res.data.data)
						// 		// const img = 'data:image/jpeg;base64,' + blobInfo.base64()
						// 		const img = res.data.data
						// 		success(img)

						// 	}).catch(err => {
						// 		console.log(err);
						// 	})
						// }

					}
				},

			}
		},
		mounted() {
			tinymce.init({})
		},
		
		methods:{
			editorChange(){
				console.log(this.tinymceHtml)
			}
		},
		watch: {
		      tinymceHtml(newValue, oldValue) {
		        // console.log('新输入的值为：'+newValue); // 会输出新值
		        // console.log('原来的值为:'+oldValue); // 会输出旧值
				this.$emit("editorChange",newValue)//编辑器值改变 发射告诉父组件 让父组件更新content的值
		      },
			  Html(newValue, oldValue) {
			    this.tinymceHtml = newValue
			  },
			  
			  image(newValue, oldValue) {
				  this.$emit("addImg",newValue)
				  console.log(newValue)
			  },
		    },

	}
</script>

参考地址

https://liubing.me/vue-tinymce-5.html
http://tinymce.ax-z.cn/general/basic-setup.php