前端 用tinymce富文本编辑器 从word 复制内容过来 会带很多奇怪的样式 这里需要去除样式只留下标签即可

问题：从word 复制内容过来 tinymce富文本 会带很多奇怪的样式 导致内容过长无法保存

首先引入paste   import "tinymce/plugins/paste"

然后要在 init 的 plugins（指定需加载的插件）  配置中加上 paste

如果来没有plugins 直接在 init 配置中加上

init{
    ..... 
    plugins : 'paste'
    .....
}

 如果来有plugins 直接在后面加上 

init{
    ..... 
    plugins : 'advlist link print paste'
    .....
}

如果你的 plugins 是像我下面完整版代码那样单独拎出来配置的 也是直接在很多引入的插件 后面加就好了（参考最下面的整个组件代码哦）

然后在加上 editor 组件的  init 配置中加上以下配置

 paste_auto_cleanup_on_paste: true, // 自动清理粘贴的内容
 paste_remove_styles: true, // 移除粘贴内容的样式
 paste_remove_styles_if_webkit: true, // 如果是WebKit浏览器，也移除样式
 paste_strip_class_attributes: 'all', // 移除所有的class属性
 paste_as_text: true, // 以纯文本形式粘贴

 最后我的代码修改如下

<template>
  <div class="tinymce-editor">
    <editor v-model="myValue"
            :init="init"
            :disabled="disabled">
    </editor>
  </div>
</template>

<script>
  import tinymce from 'tinymce/tinymce'
  import editor from '@tinymce/tinymce-vue'
  import 'tinymce/themes/silver'
  import 'tinymce/icons/default/icons'
  import 'tinymce/plugins/code'// html 代码片段
  import 'tinymce/plugins/image'// 插入上传图片插件
  import 'tinymce/plugins/media'// 插入视频插件
  import 'tinymce/plugins/table'// 插入表格插件
  import 'tinymce/plugins/lists'// 列表插件
  import 'tinymce/plugins/link'// 超链接
  import 'tinymce/plugins/codesample'//
  import "tinymce/plugins/paste"
  import 'tinymce/plugins/autolink'
  import 'tinymce/plugins/wordcount'// 字数统计插件
  import 'public/tinymce/langs/zh_CN'//https://www.tiny.cloud/get-tiny/language-packages/
  import 'tinymce/skins/ui/oxide/skin.css'

  export default {
    name: "Tinymce",
    components: {
      editor
    },
    props: {
        type: String,
        default: ()=>{
          return ''
        }
      },
      disabled: {
        type: Boolean,
        default: ()=>{
          return false
        }
      },
      tinymceHeight: {
        type: Number
      },
      plugins: {
        type: [String, Array],
        default: 'lists code autolink link table wordcount paste'
      },
      toolbar: {
        type: [String, Array],
        default: 'undo redo'
      }
    },
    data() {
      return {
        //初始化配置
        init: {
          language: 'zh_CN',
          skin_url: 'tinymce/skins/ui/oxide', //public目录下
          height: 600,
          min_width: 520, // 不存在autoresize插件（默认）：控制的是用户通过编辑器右下角控件可拖拽的最大最小宽度。
          max_width: 1000,
          resize: 'both', // true（默认：仅允许改变高度）, false（完全不让你动）, 'both'（宽高都能改变，注意引号）
          plugins: this.plugins,
          menubar: 'file edit view format tools tc help', // 一级菜单
          toolbar: this.toolbar,
          fontsize_formats: "8pt 10pt 12pt 14pt 16pt 18pt 20pt 24pt 36pt",
          paste_auto_cleanup_on_paste: true, // 自动清理粘贴的内容
          paste_remove_styles: true, // 移除粘贴内容的样式
          paste_remove_styles_if_webkit: true, // 如果是WebKit浏览器，也移除样式
          paste_strip_class_attributes: 'all', // 移除所有的class属性
          paste_as_text: true, // 以纯文本形式粘贴
          importcss_append: true,
          autosave_ask_before_unload: false,
          images_upload_url: '', //上传路径
        },
        myValue: this.value
      }
    },
    created() {
    
    },
    mounted() {
    },
    methods: {

    },
    
  }

</script>

<style scoped>

</style>