vue 使用wangeditor 富文本

最新推荐文章于 2025-10-10 14:21:11 发布

原创最新推荐文章于 2025-10-10 14:21:11 发布 · 399 阅读

0 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

12 篇文章

订阅专栏

本文介绍了一个基于Vue的富文本编辑器实现方案，包括使用wangEditor进行内容编辑及图片上传功能，通过FormData发送数据至后端。文章还详细展示了如何配置wangEditor的参数以实现特定需求。

<template>
    <div class='clearfix'>
        <!-- 标题 -->
        <input type="text"
               class='title'
               placeholder="请输入标题" />
        <!-- 富文本编辑框 -->
        <div id="websiteEditorElem"
             style="height:300px;background: #ffffff;"></div>
        <!-- 提交按钮 -->
        <el-button type="primary"
                   @click='submit'
                   class='submit'>点击上传</el-button>
    </div>
</template>

<script>
    import E from 'wangeditor'
    export default {
        data () {
            return {
                phoneEditor: '',
                name: ''
            }
        },
        methods: {
            // 设置保存发送后台数据事件
            submit () {
                var data = new FormData()
                data.append('cotent', this.phoneEditor.txt.html())
                this.$axios({
                    methods: 'post',
                    url: '后台给的地址',
                    data: data,
                    headers: {
                        'token': window.localStorage['token']
                    }
                }).then((res) => {
                    if (res.status === 200) {
                        console.log('success!')
                    }
                }).catch((res) => {
                    console.log(res)
                })
            }
        },

        mounted () {
            // wangeditor
            this.phoneEditor = new E('#websiteEditorElem')
            // this.phoneEditor.onchange = function () {
            //   this.formData.phone = this.$txt.html()
            // }
            // 上传图片到服务器，base64形式
            this.phoneEditor.customConfig.uploadImgShowBase64 = true
            // 隐藏网络图片
            this.phoneEditor.customConfig.showLinkImg = false
            // 创建一个富文本编辑器
            this.phoneEditor.create()
            // 富文本内容
            this.phoneEditor.txt.html()
        }
    }
</script>


<style scoped>

</style>