Tinymce是一个传统的JavaScript组件，默认不能用于vue.js因此需要做一些特殊的整合步骤，具体代码和组件下载可参考https://gitee.com/gateway-1997/test-warehouse.git
在 /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 } })
在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>
将组件复制到src/components/Tinymce
import Tinymce from ‘@/components/Tinymce‘ export default { components: { Tinymce }, ...... }
<el-form-item label="课程简介">
<tinymce :height="300" v-model="courseInfo.description"/>
</el-form-item>
<style scoped> .tinymce-container { line-height: 29px; } </style>
Tinymce中的图片上传功能直接存储的是图片的base64编码，因此无需图片服务器
原文：https://www.cnblogs.com/fqh2020/p/14697352.html