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>

四 測試