Vue使用Tinymce富文本编辑器使用axios图片上传到服务器以及实时监测文本内容

简介
由于版本更新等问题，如果加载出的富文本为空白，很有可能是引用的问题，可以搜索此类问题在main.js里修改引用就可以了，程序的代码上是完全没有问题的。（2022-05-04更新）
查了好多资料忙了一天一夜，最后在群里靠别人解决了实时监测文本内容，百度太多坑了，资料不完整，说明不详细，没有完整代码，查得那叫一个辛苦，一个问题弄半天才明白，这篇文章我是从一个小白看文章的角度来写的，希望能给使用Tinymce这个富文本的小伙们一些帮助，但是希望看完自行去思考一些问题，不是过来复制粘贴就完了，看完对你有用，有赞点赞，没事评论评论，好歹以后遇到问题还能有个动力继续分享。

正文
下面这些是我使用的各种东西版本
@vue/cli 4.5.15
jdk 1.8
tinymce配置是将文件拷贝到本地使用的，我没有它的api，不知道的请自行百度安装

下面是我的项目结构目录，其实只用到了public/tinymce/langs/zh_CN.js（这个是tinymce富文本的中文包，需要请自己去下），src\components\tinymce\index_1.vue（这是构建tinymce的类），src\App.vue（这是调用进行在页面显示的类），src\main.js（全局配置些乱七八糟的东西），vue.config.js（也是配置的），介绍就到这里了。

如果遇到没有vue.config.js，自己安装cube-ui插件，不懂自己百度

首先，上传图片到自己服务器，需要用到的插件是axios，以及需要跨域，不懂什么是跨域自行百度，
安装好axios插件后，首先解决跨域问题

main.js里加上

import TinymceEditor from './components/tinymce';
import Axios from 'axios'
Vue.prototype.$axios = Axios //axios上传
Axios.defaults.baseURL = '/api' //跨域，将url转成/api

这是我vue.config.js的全部配置

const webpack = require('webpack')
module.exports = {
   
  configureWebpack: {
   
    plugins: [
        //添加jquery的依赖
      new webpack.ProvidePlugin({
   
        $:"jquery",
        jQuery:"jquery",
        "windows.jQuery":"jquery"
      })
    ]
  },
  devServer: {
   
    //解决跨越问题配置
    proxy: {
   
      '/api': {
   
        // 此处的写法，目的是为了 将 /api 替换成替换成我的服务器地址,地址自己写自己的，本机的也可以
        target: 'http://***.***.***.***:8080/',
        // 允许跨域
        changeOrigin: true,
        ws: true,
        pathRewrite: {
   
          '^/api': ''
        }
      }
    },
  },
  css: {
   
    loaderOptions: {
   
      stylus: {
   
        'resolve url': true,
        'import': []
      }
    }
  },
  pluginOptions: {
   
    'cube-ui': {
   
      postCompile: true,
      theme: false
    }
  }
}

不一定要全部复制，看你自己需要
跨域问题解决后进入index_1.vue里，这里全是关于tinymce富文本的操作了
该有的注释都有了，代码也全部贴出来了，v-model这个可以百度看看他的意思

<template>
    <div>
<!--        当下面配置好直接使用<textarea>标签就能应用tinymce这个富文本了-->
        <textarea :id= "tinymceId" v-model="tinymceHtml"></textarea>
    </div>
</template>
<script>
    import tinymce from 'tinymce'
    import Editor from '@tinymce/tinymce-vue'
    import 'tinymce/themes/silver'
    import 'tinymce/plugins/image'// 插入上传图片插件
    import 'tinymce/plugins/media'// 插入视频插件
    import 'tinymce/plugins/table'// 插入表格插件
    import 'tinymce/plugins/link' //超链接插件
    import 'tinymce/plugins/code' //代码块插件
    import 'tinymce/plugins/lists'// 列表插件
    import 'tinymce/plugins/contextmenu'  //右键菜单插件
    import 'tinymce/plugins/wordcount' // 字数统计插件
    import 'tinymce/plugins/colorpicker' //选择颜色插件
    import 'tinymce/plugins/textcolor'  //文本颜色插件
    import 'tinymce/plugins/fullscreen' //全屏
    import 'tinymce/plugins/help'
    import 'tinymce/plugins/charmap'
    import 'tinymce/plugins/paste'
    import 'tinymce/plugins/hr'
    import 'tinymce/plugins/searchreplace'
    import 'tinymce/plugins/insertdatetime'
    import 'tinymce/plugins/toc'
    import 'tinymce/plugins/codesample'

    export default {
   
        name: 'tinymce',
        components: {
   Editor},
        //props:['value'], //下面methods里我配置了value,用来解决一些问题,不明白就不用管
        data () {
   
            let ide = Date.now()
            return {
   
                tinymceId: ide,
                tinymceHtml:'',
                DefaultInit: {
   
                    //这些路径自己放哪就找哪
                    language_url: '/tinymce/langs/zh_CN.js',  //导入语言文件
                    language: "zh_CN",//语言设置
                    skin_url: '/tinymce/skins/ui/oxide',//主题样式
                    content_css: `/tinymce/skins/content/default/content.css`,
                    font_formats: "微软雅黑='微软雅黑';宋体='宋体';黑体='黑体';仿宋='仿宋';楷体='楷体';隶书='隶书';幼圆='幼圆';Andale Mono=andale mono,times;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;Comic Sans MS=comic sans ms,sans-serif;Courier New=courier new,courier;Georgia