文章底部集成了vue3.0的使用方法

强大的富文本插件tinymce，集成在vue2.x项目里，用起来还是很简单的，下面先提供一下官方文档地址：

tinymce官方文档地址http://tinymce.ax-z.cn/general/upload-images.php接下来简单说一下如何使用，其实官方文档已经给我们列出来了使用方法，但是鄙人就更直接的提供给需要使用的小伙伴们。。。下面是vue-tinymce的文档地址：

vue-tinymce文档地址https://packy-tang.gitee.io/vue-tinymce/#/?id=%E5%A6%82%E4%BD%95%E4%BD%BF%E7%94%A8不得不说这是我见过最简洁的文档，哈哈哈

下面就直接看如何在项目中使用吧：项目是vue2.x

首先我们肯定是要安装插件了：

npm install @packy-tang/vue-tinymce

安装完成，在我们的package.json会出现这两个插件以及版本号

接下来就介绍一下项目中的使用吧，首先我们要在main.js配置一下：

import tinymce from 'tinymce'
import VueTinymce from '@packy-tang/vue-tinymce'

//tinymce样式
import 'tinymce/skins/content/default/content.min.css'
import 'tinymce/skins/ui/oxide/skin.min.css'
import 'tinymce/skins/ui/oxide/content.min.css'

//tinymce主题
import 'tinymce/themes/silver'

//tinymce插件
import 'tinymce/plugins/link' //链接插件
import 'tinymce/plugins/image' //图片插件
import 'tinymce/plugins/media' //媒体插件
import 'tinymce/plugins/table' //表格插件
import 'tinymce/plugins/lists' //列表插件
import 'tinymce/plugins/quickbars' //快速栏插件
import 'tinymce/plugins/fullscreen' //全屏插件

/**
 * 注：
 * 5.3.x版本需要额外引进图标，没有所有按钮就会显示not found
 */
import 'tinymce/icons/default/icons'

//本地化
import './utils/tinymce/langs/zh_CN.js'

Vue.prototype.$tinymce = tinymce
Vue.use(VueTinymce)

由于tinymce是英文版本，我们还要引入一个汉化语言包，首先我们先下载这个语言包，下载链接以提供，永久有效：

提取码：ise0https://pan.baidu.com/s/18viCaovJn7ldeVMdtIR91w在main.js引入的时候要注意一下：

 以上图片就是下载的汉化语言包的存放位置

以上配置完成，接下来就可以在项目中使用了

<template>
  <div class="vue_richtext">
    <vue-tinymce v-model="content" :setting="setting" />
    <div class="submit_btn" @click="handleSubmit()">提交按钮</div>
  </div>
</template>

<script>
import axios from 'axios';
const baseUrl=process.env.VUE_APP_BASE_URL
export default {
  data() {
    return {
      content: '',//富文本绑定值，点击提交按钮可以得到富文本插件的值
      setting: {
        menubar: true,//是否显示菜单栏
        toolbar: "undo redo | fullscreen | formatselect alignleft aligncenter alignright alignjustify | link unlink | numlist bullist | image media table | fontselect fontsizeselect forecolor backcolor | bold italic underline strikethrough | indent outdent | superscript subscript | removeformat |",//富文本插件的工具集成
        toolbar_drawer: "sliding",
        quickbars_selection_toolbar: "removeformat | bold italic underline strikethrough | fontsizeselect forecolor backcolor",
        plugins: "link image media table lists fullscreen quickbars",
        language: 'zh_CN',//富文本语言
        height: 500,//富文本的高度
        branding:false,//隐藏右下角官方超链接
        // 上传图片
        images_upload_handler: (blobInfo, success, failure) => {//自定义上传图片方法
          let formdata = new FormData()
          formdata.append('file', blobInfo.blob(), blobInfo.filename())
          axios({
            url:"接口请求地址",
            method: "post",
            data: formdata,
            headers: {//可配置的请求头
  //             authorization: localStorage.getItem('token'),
  //             platform: '42',
  //             datetime: timestamp,
  //             encryption: md5(timestamp + '' +'42sokonmall')
            },
            processData: false, // 告诉axios不要去处理发送的数据(重要参数)
            contentType: false // 告诉axios不要去设置Content-Type请求头
          }).then(res => {
            success(res.data.data.url);//这里是接口返回的图片地址
          });
        },
        // 上传文件和视频
        file_picker_callback:function (callback, value, meta) {
          //文件分类
          let filetype='.pdf, .txt, .zip, .rar, .7z, .doc, .docx, .xls, .xlsx, .ppt, .pptx, .mp3, .mp4';
          //为不同插件指定文件类型及后端地址
          switch(meta.filetype){
              case 'image':
                  filetype='.jpg, .jpeg, .png, .gif';
                  break;
              case 'media':
                  filetype='.mp3, .mp4';
                  break;
              case 'file':
              default:
          }
          let input = document.createElement('input');
              input.setAttribute('type', 'file');
              input.setAttribute('accept', filetype);
              input.click();
              input.onchange = function() {
                let file = this.files[0];
                console.log(file);
                let formdata = new FormData();
                formdata.append("file",file);
                axios({
                  url: "后端接口地址",
                  method: "post",
                  data: formdata,
                  headers: {//可配置的请求头
          //           authorization: localStorage.getItem('token'),
        //             platform: '40',
          //           datetime: timestamp,
          //           encryption: md5(timestamp + '' +'42sokonmall')
                  },
                  processData: false, // 告诉axios不要去处理发送的数据(重要参数)
                  contentType: false // 告诉axios不要去设置Content-Type请求头
                }).then(res => {
                  console.log(res.data.data);
                  // callback(res.data.data.filePath); 这里填入接口返回的地址，
                });
            }
        }
      }
    }
  },
  methods: {
    // 提交按钮
    handleSubmit(){
      console.log(this.content,'898989');
    }
  },
}
</script>

<style lang="scss" scoped>
.vue_richtext{
  background-color: #fff;
  .submit_btn{
    width: 100px;
    height: 40px;
    line-height: 40px;
    border-radius: 4px;
    color: #fff;
    background-color: #EB5D20;
    text-align: center;
    margin: 20px auto 0;
    cursor: pointer;
  }
}
</style>

以上就是vue2.x项目使用方法，如有问题，欢迎下方留言。。。谢谢

下面简单说一下vue3.x版本集成tinymce富文本插件的使用：

首先我们要安装vue3-tinymce的插件，如下所示：

npm install @jsdawn/vue3-tinymce

其次：上面vue2 main.js引入的有关tinymce的资源不用修改，只需安装并把标签修改成如下即可：

<vue3-tinymce v-model="content" :setting="setting" />

详见官方文档：点击下方链接即可前往

vue3+tinymce