Vue整合Tinymce可视化编辑器

时间：2021-02-20 16:03:19 阅读：144 评论：0 收藏：0 [点我收藏+]

一参考

Tinymce是一个传统javascript插件，默认不能用于Vue.js因此需要做一些特殊的整合步骤

将脚本库复制到项目的static目录下（在vue-element-admin-master的static路径下）

在 guli-admin/build/webpack.dev.conf.js 中添加配置

使在html页面中可是使用这里定义的BASE_URL变量

new HtmlWebpackPlugin({
    ......,
    templateParameters: {
        BASE_URL: config.dev.assetsPublicPath + config.dev.assetsSubDirectory
    }
})

在guli-admin/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进行了封装，下面我们将它引入到我们的课程信息页面

src/components/Tinymce

课程信息组件中引入 Tinymce

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

<!-- 课程简介-->
<el-form-item label="课程简介">
    <tinymce :height="300" v-model="courseInfo.description"/>
</el-form-item>

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

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

Tinymce中的图片上传功能直接存储的是图片的base64编码，因此无需图片服务器

原文：https://www.cnblogs.com/fxzemmm/p/14420334.html

踩

(0)

评论一句话评论（0）

分享档案

更多>