富文本 tinymce tinymce-vue 小白摸索，仅提供一些思路

选择安装版本：

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

npm install tinymce@5.10.

安装使用步骤

 

 

参考链接1，参考链接2，参考链接3（vue2,需要注册vue2版本的tiny-vue），官网链接，

解决报错token什么的是引入路径错误，查看依赖中对应的引用路径（最新更新）

     1. 例如报iconjs错误，import icon from 'tinymce/tinymce/icon' 看下依赖中icon的位置，可以解决；

      2.比如报pluginjs错误，可能事引入plugin写了contextmenu插件却没有import等，基本上就是针对性的解决import 引入问题；

　　3.还有需要注意的一点是，languageurl 和 skinsurl 应该是会拼接 api 地址，像这种形式： http://testapi.com/ + skinurl/languageurl ,然而资源肯定是不存在的，返回或者报错该链``　　　　         接404。

　　(1)对于语言包的地址我的解决办法是放在src下静态资源文件夹下比如assets、static下，import lang from '../assets/langs/zh_cn.js' ,然后在languageurl : lang,解决404和报错；

　　(2)对于skinsurl的路径问题，我的解决办法是，像引入插件或者主题一样，直接引入skin.min.css 使用，那么init属性里的skins_url就不需要了。

　　(3)总结起来就是init中内容：pligin，languafgeurl，skinsURL，和引入需要一一对应，否则本地运行没问题，测试环境也会报错

20211210，在解决token报错的过程中，除了语言包，插件，主题，甚至skins.css全都是通过import引入依赖，这个时候之前建的public下的skins文件夹和langs文件夹就不起作用了，于是把pulic下的tinymce文件夹删掉，测试环境运行无报错，正常运行

 还有一个不使用tinymcevue插件，完全tinymce的插件使用参考链接

参考解决办法集合：

总结比较全，可以提供思路参考， 这是一个百度关键词提供什么内容也没有， 比较靠谱并且评论多，前一个链接博主的 ：demo

cdn：

<script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>

 封装富文本组件步骤及代码：

步骤：

1.安装tinymce tinymce-vue,下载中文语言js，

2.把依赖中的tinymce下的skin文件夹复制到public，目录结构如图（本项目已经删除，除了zh_cnjs，全部通过import引入依赖）：

 

<template>
  <div class="tinymce-editor">
    <editor v-model="myValue"
      :init="init"
      :disabled="disabled"
      @onClick="onClick">
    </editor>
  </div>
</template>
// 我没给editor加id ，如果有需要，参考上面的链接或者百度其他自己加

<script>
import tinymce from 'tinymce/tinymce'
import Editor from '@tinymce/tinymce-vue'
import 'tinymce/themes/silver/theme'
import 'tinymce/icons/default/icons.js'
import 'tinymce/themes/mobile/theme'
import 'tinymce/plugins/image'
import 'tinymce/plugins/table'
import 'tinymce/plugins/lists'
import 'tinymce/plugins/wordcount'
import 'tinymce/plugins/link'
import 'tinymce/plugins/colorpicker'
import 'tinymce/plugins/textcolor'
import 'tinymce/plugins/contextmenu'
import 'tinymce/skins/ui/oxide/skin.min.css'
import lang from '../assets/zh_CN.js'
import motivationApi from '@/service/index'
export default {
  components: {
    Editor
  },
  name: 'tinymce',
  props: {
    // 传入一个value，使组件支持v-model绑定
    value: {
      type: String,
      default: ''
    },
    disabled: {
      type: Boolean,
      default: false
    },
    plugins: {// 引入插件 
      type: [String, Array],
      default: 'link lists image table colorpicker textcolor wordcount contextmenu' // 最好import并和引入路径一一对应
    },
    toolbar: {
      type: [String, Array],
      default: 'bold italic underline strikethrough | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent blockquote | undo redo | link unlink image | removeformat'
    }
  },
  data () {
    return {
      // 初始化配置
      init: {
        deprecation_warnings: false, // 禁用 tiny 弃用警告
        language_url: lang,
        // language_url: '/tinymce/langs/zh_CN.js', 在import 中已经引入了
        // skin_url: '/tinymce/skins/ui/oxide', 在import 中已经引入了 ，否则会拼接http://testapi,
        language: 'zh_CN',
        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) => {
          // debugger
          // const img = 'data:image/jpeg;base64,' + blobInfo.base64()
          // success(img)
          let formdata = new FormData()
          formdata.append('file', blobInfo.blob())
          // formdata.set('uploadFile', blobInfo.blob())
          // formdata.append('image', blobInfo.blob())
          this.$axios(
            {
              method: 'post',
              url: motivationApi.uploadNoticeImg,
              data: formdata
            }
          ).then((res) => {
            if (res.data && (res.data.return_code === '00')) {
              success(res.data.data.fileUrl) // 上传返回的url
            }
          }).catch(error => {
            failure(error)
          })
        }
      },
      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>