记录tinymce使用

https://www.cnblogs.com/wisewrong/p/8985471.html参考文章
1.npm install tinymce -S
安装之后，在 node_modules 中找到 tinymce/skins 目录，然后将 skins 目录拷贝到 public目录下
tinymce 默认是英文界面，所以还需要下载一个中文语言包
目录结构
全局引入

index↓

<template>
  <div class="tinymce-container">
    <Editor :id="tinymceId" v-model="value" :init="init" @onClick="onClick" />
    <div v-if="showBtn" class="tinymce_btn">
      <el-button type="primary" class="yellow" size="mini" @click="setInnerlink">添加内链</el-button>
      <el-button type="primary" size="mini" @click="dialogShow = true">检测内容是否有违禁词</el-button>
      <el-button type="primary" class="mini tianBlue" @click="imgLocal">图片本地化</el-button>
      <el-button type="primary" class="mini blue" @click="descExtraction">提取简介</el-button>
    </div>
    <BouncedDialog
      title="检测结果"
      :dialog-show.sync="dialogShow"
      :width="70"
      class="prohibited "
    >
      <h1>该功能正在加急研发中，敬请期待</h1>
      <br>
      <br>
      <img src="@/assets/404_images/404.png" alt="">
    </BouncedDialog>
  </div>
</template>

<script>
import tinymce from 'tinymce'
import Editor from '@tinymce/tinymce-vue'
import 'tinymce/themes/silver/theme'
import 'tinymce/icons/default/icons.min.js'
import 'tinymce/plugins/image'
import 'tinymce/plugins/link'
import 'tinymce/plugins/code'
import 'tinymce/plugins/table'
import 'tinymce/plugins/lists'
import 'tinymce/plugins/wordcount'
import 'tinymce/plugins/colorpicker'
import 'tinymce/plugins/textcolor'
import uploadApi from '@/api/upload'
import columnApi from '@/api/column'
// 下面的插件是自带的,不需要引入
// import 'tinymce/plugins/contextmenu'
// import 'tinymce/plugins/colorpicker'
// import 'tinymce/plugins/textcolor'
export default {
  name: 'MyTinymce',
  components: {
    Editor
  },
  props: {
    id: {
      type: String,
      default: function() {
        return 'vue-tinymce-' + +new Date() + ((Math.random() * 1000).toFixed(0) + '')
      }
      // 给每个tinymce设置不同的id
    },
    tinymceHtml: {
      type: String,
      default: ''
    },
    tinymceHeight: {
      type: Number,
      default: 500
    },
    showBtn: {
      type: Boolean,
      default: true
    },
    articleId: {
      default: ''
    },
    prop: {
      default: ''
    }
  },
  data() {
    return {
      website_id: this.$store.getters.siteId,
      dialogShow: false,
      tinymceId: this.id,
      value: this.tinymceHtml, // 父组件通过ref拿到该组件的值
      init: {
        convert_urls: false,
        selector: '#${this.tinymceId}',
        language_url: 'tinymce/langs/zh_CN.js',
        language: 'zh_CN',
        skin_url: 'tinymce/skins/ui/oxide', // 编辑器需要一个skin才能正常工作，所以要设置一个skin_url指向之前复制出来的skin文件
        height: this.tinymceHeight,
        plugins: 'image link code table lists wordcount', // 引入插件
        toolbar:
          'fontselect fontsizeselect link lineheight forecolor backcolor bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | image quicklink h2 h3 blockquote table numlist bullist preview fullscreen', // 工具栏
        browser_spellcheck: true, // 拼写检查
        branding: false, // 去水印
        elementpath: true, // 禁用编辑器底部的状态栏
        statusbar: true, // 隐藏编辑器底部的状态栏
        paste_data_images: true, // 允许粘贴图像
        menubar: true, // 隐藏最上方menu
        paste_data_images: true, // 设置为“true”将允许粘贴图像，而将其设置为“false”将不允许粘贴图像。
        file_picker_types: 'image',
        images_upload_credentials: true,
        // init_instance_callback: function(editor) {
        //   editor.on('NodeChange Change KeyUp SetContent', () => {
        //     this.hasChange = true
        //     this.$emit('input', editor.getContent())
        //   })
        // },
        fontsize_formats: '14px 16px 18px 20px 24px 26px 28px 30px 32px 36px', // 字体大小
        font_formats:
          '微软雅黑=Microsoft YaHei,Helvetica Neue;PingFang SC;sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun;serifsans-serif;Terminal=terminal;monaco;Times New Roman=times new roman;times', // 字体
        /**
         * 下面方法是为tinymce添加自定义插入图片按钮
         * 借助iview的Upload组件,将图片先上传到存储云上，再将图片的存储地址放入编辑器内容
         */
        // 图片上传三个参数，图片数据，成功时的回调函数，失败时的回调函数
        images_upload_handler: function(blobInfo, success, failure) {
          const formdata = new FormData()
          formdata.append('file', blobInfo.blob())
          // this.handleImgUpload(blobInfo, success, failure)
          uploadApi.upload(formdata)
            .then(res => {
              success(res.data.url)
            })
            .catch(res => {
              failure('error')
            })
        }
      }
    }
  },
  computed: {},
  watch: {
    showBtn(newV, oldV) {
      this.showBtn = newV
    },
    tinymceHtml(newV, oldV) {
      this.value = newV
    },
    value(newV, oldV) {
      this.$emit('update', newV)
    },
    articleId(newv, oldV) {
      this.articleId = newV
    },
    prop(val, value) {
      console.log(val, value, '---------------')
    }
  },
  created() {
    console.log(this.prop)
  },
  mounted() {
    tinymce.init({})
  },
  methods: {
    getTin(val) {
      console.log(val, this.$refs.myTinymce, '================')
    },
    // 图片本地化
    imgLocal() {
      if (!this.value) {
        this.$message.error('内容不能为空！')
      } else {
        columnApi.imgLocal({ content: this.value }).then(res => {
          if (res.code == 0) {
            this.value = res.data
            this.$message.success(res.msg)
          } else {
            this.$message.error(res.msg)
          }
        })
      }
    },
    // 提取简介
    descExtraction() {
      console.log(!this.value)
      if (!this.value) {
        this.$message.error('内容不能为空！')
      } else {
        columnApi.descExtraction({ content: this.value }).then(res => {
          if (res.code == 0) {
            this.$emit('changeDescription', res.data)
            this.$message.success(res.msg)
          } else {
            this.$message.error(res.msg)
          }
        })
      }
    },
    // 设置为内链
    setInnerlink() {
      console.log(this.articleId, '---------------')
      const val = {
        website_id: this.$store.getters.siteId,
        content: this.value,
        sub_id: this.articleId
      }
      // return
      if (!this.value) {
        this.$message.error('内容不能为空！')
      } else {
        columnApi.addInnerChat(val).then(res => {
          if (res.code == 0) {
            this.value = res.data
            this.$message.success(res.msg)
          } else {
            this.$message.error(res.msg)
          }
        })
      }
    },
    // 用于上传图片的，后端需要提供好上传接口
    handleImgUpload(blobInfo, success, failure) {
      const formdata = new FormData()
      formdata.set('upload_file', blobInfo.blob())
      const new_headers = { headers: this.headers }
      const upload_url = process.env.BASE_API + '/attachment/uploadAndSave'
      axios.post(upload_url, formdata, new_headers).then(res => {
        success(res.data.data[0])
      }).catch(res => {
        failure('error')
      })
    },
    onClick(e) {
      this.$emit('onClick', e, tinymce)
    }

  }
}
</script>
<style lang="scss" scoped>
.tinymce_btn{
  margin-top: 5px;

}
</style>

methods里面的方法是项目里自己用的 跟富文本无关

几个报错情况
1.
这是因为 init 参数地址错误，请核对下 init 参数中的几个路径是否正确

如果参数无误，可以先删除 language_url 和 language 再试 （一般都是language的路径不对）
2.这个报错我就直接贴别人的代码了