VUE结合富文本wangeditor，实现包含本地图片上传至内容中，操作成功后清空富文本

最新推荐文章于 2025-05-29 11:33:52 发布

bug_easy

最新推荐文章于 2025-05-29 11:33:52 发布

阅读量5.2k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： VUE.JS

本文链接：https://blog.youkuaiyun.com/bug_easy/article/details/94596544

VUE.JS 专栏收录该内容

3 篇文章

订阅专栏

本文详细介绍使用Vue结合wangeditor实现富文本编辑功能的方法，包括安装、初始化配置及常见操作，如获取内容、清空内容等。同时分享了富文本编辑器在项目中的实际应用效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

近日在写一个小的项目时，需要用到富文本，通过VUE结合富文本进行实现，网上知名的富文本不是太多，经过多个富文本的选择对比，最后决定用wangeditor这个富文本（官网示例）。如何初始化一个富文本，

前提：需要引入wangeditor：

cnpm install wangeditor

且看：

<template>
    <div>
        <div id="editorElem" ref="editor" style="text-align:left"></div>
        <Button shape="circle" type="primary" v-on:click="getContent">submit</Button>
    </div>
</template>
<script>
import E from 'wangeditor'
 export default {
      name: 'editor',
      data () {
        return {
            editor: '',
            editorContent: ''
        }
      },
      methods: {
        getContent: function () { 
            console.log(this.editorContent) //获取富文本内容
            this.editor.txt.clear()  //清空富文本的内容
        }
      },
     mounted() {
        // var editor = new E('#editorElem')
        this.editor = new E(this.$refs.editor)
        this.editor.customConfig.uploadImgShowBase64 = true //图片以base64形式保存
        this.editor.customConfig.onchange = (html) => {
          this.editorContent = html
        }
        this.editor.customConfig.pasteTextHandle = (content) => { //支持粘贴
            return content
        }
        this.editor.create()
      }
  }
</script>
<style scoped>
    #editorElem /deep/ .w-e-text-container{ //设置富文本高度，富文本有个默认300px的高度
        height:400px !important;
    } 
</style>

效果图：