8.1添加课程信息完善

一.整合文本编辑器

1.复制文本编辑器组件 组件进行复制到相关项目里

 

2.在build/webpack.dev.conf.js中添加配置

 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.找到index.html引入脚本文件

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

4.引入组件

import Tinymce from '@/components/Tinymce'

export default {

 components: { Tinymce },

    data(){

        return{

5.替换最初的课程简介

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

6.添加样式

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

文本存储数据库方式  将图片用base64编码存储