1.vue整合富文本编辑器Tinymce
Tinymce是一个传统的JavaScript组件,默认不能用于vue.js因此需要做一些特殊的整合步骤,具体代码和组件下载可参考https://gitee.com/gateway-1997/eduservice.git
2.组件初始化
2.1将脚本库复制到项目的static目录下
2.2配置html变量
在 /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 } })
2.3引入脚本
在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>
3.组件引入
3.1复制组件
将下载好的组件复制到src/components/Tinymce
3.2引入组件
import Tinymce from '@/components/Tinymce' export default { components: { Tinymce }, ...... }
3.2组件模板
<el-form-item label="课程简介"> <tinymce :height="300" v-model="courseInfo.description"/> </el-form-item>
3.3组件样式
<style scoped> .tinymce-container { line-height: 29px; } </style>
3.4图片的base64编码
Tinymce中的图片上传功能直接存储的是图片的base64编码,因此无需图片服务器