tinymce富文本编辑器

1、第一步： 安装tinymce

cnpm install @tinymce/tinymce-vue -S 注意版本
cnpm install tinymce -S 

2、 安装下载完成之后到node_modules中找到tinymce/skins文件。拷贝到静态目录下（public或者static）下。

中文语言包戳

3、可以封装成组件，多处复用，不累述了。

<template>
  <div>
    <editor id="tinymce" v-model="tinymceHtml" :init="editorInit"></editor>
  </div>  
</template>
<script>
import tinymce from "tinymce";
import Editor from "@tinymce/tinymce-vue";
import 'tinymce/themes/silver/theme'

//插件引入
import 'tinymce/plugins/image'
import 'tinymce/plugins/link'
import 'tinymce/plugins/code'
import 'tinymce/plugins/table'
import 'tinymce/plugins/lists'
import 'tinymce/plugins/advlist'
import 'tinymce/plugins/contextmenu'
import 'tinymce/plugins/wordcount'
import 'tinymce/plugins/colorpicker'
import 'tinymce/plugins/textcolor'
import 'tinymce/plugins/preview'
import 'tinymce/plugins/hr'
import 'tinymce/plugins/autosave'
import 'tinymce/plugins/save'
import 'tinymce/plugins/anchor'
import 'tinymce/plugins/pagebreak'
import 'tinymce/plugins/media'
import 'tinymce/icons/default'


export default {
  name: 'TinymceEditor',
  components: {
    Editor
  },
  data () {
    return {
      tinymceHtml:"",
      editorInit: {
        selector: "#tinymce",
        language_url: "/tinymce/zh_CN.js",
        language: "zh_CN",
        skin_url: "/tinymce/skins/ui/oxide", 
        height: 600,
        fontsize_formats: "12px 14px 16px 18px 20px 24px 26px 28px 30px 32px 36px 38px 40px 42px 44px 48px", //字体大小
        plugins: 'link lists advlist image code table colorpicker textcolor wordcount contextmenu preview hr autosave save anchor pagebreak media',
        toolbar: [
          'bold italic underline strikethrough | fontselect fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | ',
          'outdent indent blockquote hr removeformat | undo redo | link unlink image  pagebreak code | preview | restoredraft save'
        ],
        images_upload_url:'',
        branding: false,
        autosave_ask_before_unload:true,
        save_enablewhendirty: false,
        save_onsavecallback: function () {
           alert('已保存')
        }
      }
    }
  },
  mounted() {
    //初始化
    tinymce.init({});
  },
  created () {
  },
  methods: {
  }
}
</script>

4、最终效果

 

 5、官方中文文档

上传图片和文件 | TinyMCE中文文档中文手册http://tinymce.ax-z.cn/general/upload-images.php