【vue-element-admin】--tinymce富文本编辑器的使用

参考资料

https://www.cnblogs.com/huihuihero/p/13877589.html
中文文档：http://tinymce.ax-z.cn/general/upload-images.php

一、安装tinymce

yarn add tinymce || npm install tinymce -S

yarn add @tinymce/tinymce-vue || npm install @tinymce/tinymce-vue -S

二、使用步骤

1.汉化 - //public/tinymce/langs

前往此地址下载中文汉化包： https://www.tiny.cloud/get-tiny/language-packages/

在项目public文件夹下新建tinymce文件夹，将下载后的压缩包解压至此文件夹（/langs）
另将node_modules/tinymce/skins文件夹也复制到public/tinymce里（/skins）

2.封装组件 - //src/components/tinymce/index.vue

在src/components下新建TEditor.vue，并写入以下代码

<template>
  <div class="tinymce-editor">
    <Editor id="tinymce"
            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/theme'
  import 'tinymce/icons/default/icons';
  //编辑器插件plugins
  // 更多插件参考：https://www.tiny.cloud/docs/plugins/
  //https://blog.csdn.net/guochengabcd/article/details/107860463
  //https://www.cnblogs.com/huihuihero/p/13877589.html
  // http://tinymce.ax-z.cn/
  // https://blog.csdn.net/chendongdong1/article/details/106628706/
  //资料：https://www.cnblogs.com/huihuihero/p/13877589.html
  import 'tinymce/plugins/image';// 插入上传图片插件
  // import "tinymce/plugins/axupimgs";  //插入多图插件
  import 'tinymce/plugins/media';// 插入视频插件
  import 'tinymce/plugins/imagetools';
  import 'tinymce/plugins/table';// 插入表格插件
  import 'tinymce/plugins/lists';// 列表插件,有序列表、无序列表
  import 'tinymce/plugins/contextmenu';
  import 'tinymce/plugins/wordcount';// 字数统计插件
  // import 'tinymce/plugins/colorpicker';
  // import 'tinymce/plugins/textcolor';
  import 'tinymce/plugins/preview'// 插入预览
  import 'tinymce/plugins/code'// 插入代码
  import 'tinymce/plugins/link'// 插入链接
  import 'tinymce/plugins/advlist';
  import 'tinymce/plugins/codesample';  //插入、编辑代码示例
  import 'tinymce/plugins/hr';  //水平分割线
  import 'tinymce/plugins/fullscreen';  //全屏
  import 'tinymce/plugins/textpattern';  //文本模式
  import 'tinymce/plugins/searchreplace';  //查找和替换
  // import 'tinymce/plugins/autolink';  //自动链接
  import "tinymce/plugins/directionality";  //方向感知
  import "tinymce/plugins/visualblocks";  //显示区块边框
  import "tinymce/plugins/visualchars";  //显示不可见字符
  // import "tinymce/plugins/template";  //插入模板
  import "tinymce/plugins/charmap";  //特殊符号
  import "tinymce/plugins/nonbreaking";  //不间断空格
  import "tinymce/plugins/insertdatetime";  //插入时间、日期
  import "tinymce/plugins/imagetools";  //自定义图像
  import "tinymce/plugins/autosave";  //自动保存
  // import "tinymce/plugins/autoresize"; // 内容自适应插件
  import 'tinymce/plugins/emoticons';// 插入表情插件
  import 'tinymce/plugins/anchor';  //插入锚点

  //扩展插件(多图上传)
  import '../../../public/tinymce/axupimgs'

  //异步接口
  // import tinymce_ckeditor from '@/api/tinymce'
  import {
    getToken } from '@/utils/auth'  //从vuex中获取token



  export default {
   
    name: "index",
    components:{
    Editor },
    props:{
   
      value:{
   
        type:String,
        default:''
      },
      // 基本路径，默认为空根目录，如果你的项目发布后的地址为目录形式，
      // 即abc.com/tinymce，baseUrl需要配置成tinymce，不然发布后资源会找不到
      baseUrl: {
   
        type: String,
        default: ''
      },
      disabled: {
   
        type: Boolean,
        default: false
      },
      plugins: {
   
        //插件配置
        type: [String, Array],
        default:
          "preview searchreplace directionality visualblocks visualchars " +
          "fullscreen image axupimgs link media code codesample table charmap hr " +
          "nonbreaking insertdatetime advlist lists wordcount imagetools textpattern " +
          "autosave emoticons"

      }