富文本编辑器

传送门：vue-admin模板参考

以下过程即为前端开发插件过程

组件初始化

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

1、复制脚本库

将vue-element-admin-master 的components和static文件夹下的Tinymce文件复制到项目对应位置的components和static文件夹下

2、配置html变量

在/build/webpack.dev.conf.js 中添加配置 ，使得在html页面中可以使用这里定义的BASE_URL变量

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

3、引入js脚本

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

组件引入

import Tinymce from '@/components/Tinymce'
export default {
	components: { Tinymce },
    data(){
        return {
            ...
        }
    },
	...
}

使用

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