整合文本编辑器

从教学资源中将下图中的两个文件夹下的内容拷贝到项目对应的文件夹目录下(复制教学资源的componet，static下的timymce到项目的component,static下，如果没有下载教学资源也可以通过之前下载的vue-element-admin-master找到对应文件)。

(1)配置html变量

在配置文件中\build\webpack.dev.conf.js中进行如下配置:配置html变量，这是为了使项目能够找到刚才复制插件的路径。

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

(2)引入脚本

在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>

(3)在我们的info.vue中使用插件

先引入这个插件吧。

//引入Tinymce富文本编辑器组件
import Tinymce from '@/components/Tinymce';

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

然后把之前的课程简介的ui组件替换下。

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

最后在文件的最后增加样式，调整上传图片的按钮高度，关键字scoped表示该样式只在当前页面有效。

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

最后效果如下图。