day07--课程发布-添加课程信息

day07--课程发布-添加课程信息

谷粒学院功能简介及系统架构 https://www.cnblogs.com/coderD/p/14506161.html

day01--MybatisPlus的使用 https://www.cnblogs.com/coderD/p/14506180.html

day02--环境搭建与讲师管理接口开发 https://www.cnblogs.com/coderD/p/14506295.html

day03--项目前端相关基础知识 https://www.cnblogs.com/coderD/p/14506446.html

day04--项目前端相关基础知识（二） https://www.cnblogs.com/coderD/p/14506481.html

day05--讲师管理模块前端开发 https://www.cnblogs.com/coderD/p/14506505.html

day06--讲师管理模块前端开发 https://www.cnblogs.com/coderD/p/14506540.html

day07--课程发布-添加课程信息 https://www.cnblogs.com/coderD/p/14506574.html

day08--课程发布-添加课程信息 https://www.cnblogs.com/coderD/p/14506609.html

day09--课程列表和整合阿里云视频点播 https://www.cnblogs.com/coderD/p/14506636.html

day10--微服务调用 https://www.cnblogs.com/coderD/p/14506649.html

day11--首页数据显示和添加Redis缓冲 https://www.cnblogs.com/coderD/p/14506655.html

day12--首页登录和注册 https://www.cnblogs.com/coderD/p/14506657.html

day13--微信扫码登陆 https://www.cnblogs.com/coderD/p/14506670.html

day14--首页课程和名师功能 https://www.cnblogs.com/coderD/p/14506677.html

day15--统计分析 https://www.cnblogs.com/coderD/p/14506685.html

day16--权限管理 https://www.cnblogs.com/coderD/p/14506689.html

day17--权限管理和配置服务 https://www.cnblogs.com/coderD/p/14506701.html

1、富文本编辑Tinymce

1.1、Tinymce可视化编辑器

参考

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

https://panjiachen.gitee.io/vue-element-admin/#/example/create

1.2、组件初始化

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

1.2.1、复制脚本库

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

1.2.2、配置html变量

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

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

new HtmlWebpackPlugin({
    ......,
    templateParameters: {
        BASE_URL: config.dev.assetsPublicPath + config.dev.assetsSubDirectory
    }
})

1.2.3、引入js脚本

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

1.3、组件引入

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

1.3.1、复制组件

src/components/Tinymce

1.3.2、引入组件

import Tinymce from '@/components/Tinymce'
export default {
  components: { Tinymce },
  ......
}

1.3.3、组件模板

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

1.3.4、组件样式

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

1.3.5、图片的base64编码

Tinymce中的图片上传功能直接存储的是图片的base64编码，因此无需图片服务器