vue-element-admin整合tinymce富文本编辑器

前端的水太深了，在使用vue-element-admin整合富文本的时候走了不少弯路，踩了不少坑。

在网上查了一些博客，但是问题都没能解决好此问题，要么是版本不对应，我使用的是vue-element-admin最新的 版本，目录结构发生了一些变化，要么是整合过来富文本显示为空白。因此想记录一下，供其他人一些参考：

最新版的vue-element-admin整合tinymce是非常简单的，省去了之前版本的复杂。

首先我们去到官网，将tinymce组件下载下来，文件本身不大，下载很快。


将下载下来的文件拷贝到项目的src/components下

在所需的页面中引入组件，代码如下：

<template>
  <div class="app-container">
    <tinymce :height="300" v-model="content"/>
  </div>
</template>

<script>
  import Tinymce from "@/components/Tinymce"
  export default {
    components: {
      Tinymce
    },
    data() {
      return {
        content: "welcome to tinymce!"
      }
    },
  }
</script>

启动项目后页面的样式

因为tinymce默认为英文，所以需要在文件中修改一下配置，在index.vue的120行左右，将en修改为zh

最后页面的样式

注意：不要在页面中引入其他的js文件（旧版的需要，新版的不需要），否则会出现富文本处为空白