vue中使用Tinymce编辑器

1. 首先安装所需的两个包

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

2. 查看vue-cli脚手架版本号

   vue -V
   npm list --depth=0 -g
   根据vue-cli版本号进行以下操作
   

3. 复制内容和样式包
   ① 在 node_modules 文件夹中找到 tinymce/skins 文件，进行复制；如果vue-cli的版本号为2就将其内容复制到static文件夹中，若版本号为3就将其内容复制到public文件夹中，在下是版本为2的如图所示
   
   
   ② 下载 zh_CN.js中文包，复制到 tinymce文件中 点击下载

4. 组件内容

   <template>
     <div class="tinymce-editor">
       <editor v-model="myValue"
               :init="init"
               :disabled="disabled"
               @onClick="onClick">
       </editor>
     </div>
   </template>
   <script>
   	import tinymce from 'tinymce/tinymce'
   	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'// 字数统计插件
     	import 'tinymce/plugins/autoresize' // 高度自适应
     	export default {
   	  data () {
   	    	return {
   	      // 初始化tinyEdit
   	      init: {
   	        language_url: '/static/tinymce/zh_CN.js',
   	        language: 'zh_CN',
   	        skin_url: '/static/tinymce/skins/ui/oxide',
   	        selector: 'textarea',
   	        plugins: 'autoresize',
   	        toolbar: 'undo redo |  formatselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | lists image media table | removeformat',
   	        branding: false,
   	        menubar: false,
   	        images_upload_handler: (blobInfo, success, failure) => {
   	          const img = 'data:image/jpeg;base64,' + blobInfo.base64()
   	          success(img)
   	        }
   	     }
     	  },
     	  mounted () {
         	tinymce.init({})
         },
         methods: {
         	onClick (e) {
            this.$emit('onClick', e, tinymce)
           }
         },
         watch: {
          value (newValue) {
            this.myValue = newValue
          },
          myValue (newValue) {
            this.$emit('input', newValue)
          }
        }
   	}
   </script>
   

5. 页面样式