Vue 整合富文本编辑器

所有文件，关注“Java程序员进阶” 回复 "Tinymce" 获取

一、组件初始化

---

Tinymce 是一个传统javascript插件，默认不能用于Vue.js因此需要做一些特殊的整合步骤：
【1】复制脚本库：将脚本库复制到项目的static目录下（在vue-element-admin-master的static路径下）
【2】配置html变量：在 “项目目录/build/webpack.dev.conf.js”中添加配置，使在 html页面中可是使用这里定义的BASE_URL变量

#找到 new HtmlWebpackPlugin 添加 templateParameters等内容
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】复制 Tinymce组件到项目的 components目录中：
 

【2】引入组件：在需要使用的页面中引入Tinymce

import Tinymce from '@/components/Tinymce'

export default {
  components: { Tinymce },
  ......
}

【3】组件模板：

<!-- 页面中的使用-->
<el-form-item label="业务标题">
    <tinymce :height="300" v-model="对象.属性"/>
</el-form-item>

【4】组件样式：在 xxx.vue文件的最后（不在任何标签内）添加如下代码，调整上传图片按钮的高度:

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

 
 ----架构师资料，关注公众号获取----