Tinymce富文本编辑器实现步骤

一 Tinymce可视化编辑器

参考：https://panjiachen.gitee.io/vue-element-admin/#/components/tinymce

二 组件初始化

Tinymce是一个传统javascript插件，默认不能用于Vue.js因此需要做一些特殊的整合步骤

1 复制脚本库

将脚本库复制到项目的static目录下（在vue-element-admin-master的static路径下）

2 引入js脚本

在guli-admin/index.html 中引入js脚本

<script src="/static/tinymce4.7.5/tinymce.min.js"></script>
<script src="/static/tinymce4.7.5/langs/zh_CN.js"></script>

三 组件引入

为了让Tinymce能用于Vue.js项目，vue-element-admin对Tinymce进行了封装，下面将它引入到课程信息页面

1 复制组件

src/components/Tinymce（在vue-element-admin-master的src路径下）

2 引入组件

Info.vue 组件中引入 Tinymce

  // 注册富文本组件
  components: { Tinymce },

3 使用组件

      <!-- 课程简介-->
      <el-form-item label="课程简介">
        <tinymce :height="300" v-model="courseInfo.description"/>
      </el-form-item>

4 组件样式

<style>
.tinymce-container {
  position: relative;
  line-height: normal;
}
</style>

四 测试