vue整合富文本编辑器

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编码，因此无需图片服务器