Vue 使用tinymce富文本编辑器

 static目录下

将整个tinymce复制过来   并下载语言包同样的 将 langs目录整个的复制到static 目录下

<template>
  
      <div id="app">
        <editor v-model="content" placeholder="请输入内容" api-key="bwu7xn6v7k98mt40ndzxx2dluo74eften5395xend9dn9moc"
          :init="tinyconfig" />
      </div>
</template>

<script>
  import Editor from '@tinymce/tinymce-vue'

  export default {
    components: {
      'editor': Editor,
      
    },
    data() {
      return {
        content: "",
        tinyconfig: {
          height: 500,
          width: 375,
          menubar: true,
          language_url: '../../../static/tinymce/langs/zh_CN.js',
          language: 'zh_CN',
          skin_url: '../../../static/tinymce/skins/ui/oxide',
          content_css: '../../../static/tinymce/skins/content/default/content.css',
          plugins: [
            'advlist autolink lists link image imagetools charmap print preview anchor',
            'searchreplace visualblocks code fullscreen emoticons',
            'insertdatetime media table paste code help wordcount'
          ],
          toolbar: [
            'code removeformat undo redo | formatselect | bold italic underline forecolor backcolor alignleft | aligncenter alignright alignjustify',
            'bullist numlist outdent indent | link image imagetools emoticons charmap help'
          ],

          images_upload_handler: (blobInfo, success) => {
            let formData = new FormData()
            formData.append('file', blobInfo.blob())
            //这里为自己的上传接口调用方法
            this.$api.uploadimg(formData).then(res => {
              if (res.code === 200) {
                success(this.$host + res.data);
              }
            })
          },
        }
      }
    },
    computed: {
      
    },
    methods: {
      
    }
  }

</script>

<style>

</style>