富文本编辑器Tinymce

目录

 1、复制脚本库

2、配置html变量

3、引入js脚本

4.复制组件

5.组件模板与基础样式

---

 

 

 1、复制脚本库

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

2、配置html变量

在 guli-admin/build/webpack.dev.conf.js 中添加配置

使在html页面中可是使用这里定义的BASE_URL变量

   new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'index.html',
      inject: true,
      favicon: resolve('favicon.ico'),
      title: 'vue-admin-template',
      templateParameters: {
        BASE_URL: config.dev.assetsPublicPath + config.dev.assetsSubDirectory
     }
    })
  ]
})

3、引入js脚本

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

<script src=<%= BASE_URL %>/tinymce4.7.5/tinymce.min.js></script>
<script src=<%= BASE_URL %>/tinymce4.7.5/langs/zh_CN.js></script

4.复制组件

src/components/Tinymce

课程信息组件中引入 Tinymce

import Tinymce from '@/components/Tinymce'

export default {
  components: { Tinymce },
  ......
}

5.组件模板与基础样式

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

<style scoped>
.tinymce-container {
  line-height: 29px;
}
</style>