Tinymce富文本编辑器在vue中的的使用

最新推荐文章于 2024-08-09 07:32:07 发布

西泽尔.博尔吉亚

最新推荐文章于 2024-08-09 07:32:07 发布

阅读量291

点赞数 1

文章标签： vue.js

本文链接：https://blog.csdn.net/qq_42849542/article/details/115670725

版权

Tinymce是一个传统javascript插件，默认不能用于Vue.js因此需要做一些特殊的整合步骤，下面是富文本编辑器的组件

1.将脚本库复制到项目的static目录下
在这里插入图片描述
2.在 build/webpack.dev.conf.js 中添加配置

 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>

在这里插入图片描述

4.将富文本编辑器的组件复制到项目components文件夹中

在这里插入图片描述
5.在需要引用的vue文件中引入富文本编辑器和声明

<script>
import Tinymce from '@/components/Tinymce'
  export default {
    components: {Tinymce},
    }
</script>

6.组件模板和样式

<el-form-item label="富文本编辑器">       
<tinymce :height="300" v-model="courseInfo.description"/>
</el-form-item>

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

成功之后的效果如下图
在这里插入图片描述

而且因为Tinymce中的图片上传功能直接存储的是图片的base64编码，所以可以直接存储在数据库中，特此记录

关注