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