Tinymce可视化编辑器在vue-element-admin中的使用

Posted 2021-05-17 strandtrack

一。

1.复制脚本库

将脚本库复制到项目的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>

二。为了让Tinymce能用于Vue.js项目，vue-element-admin-master对Tinymce进行了封装，下面我们将它引 入到我们的页面

1、复制组件到 src/components/Tinymce

2、引入组件 组件中引入 Tinymce

import Tinymce from '@/components/Tinymce'
export default {
components: { Tinymce },
......
}

3、组件模板

<el-form-item label="随便取">
<tinymce :height="300" v-model="courseInfo.description"/>
</el-form-item>

4、组件样式

在info.vue文件的最后添加如下代码，调整上传图片按钮的高度

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