vue2.0项目使用wangEditor富文本编辑器

最新推荐文章于 2025-07-16 16:47:43 发布

姜无忧

最新推荐文章于 2025-07-16 16:47:43 发布

阅读量1.7k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vuejs

本文链接：https://blog.youkuaiyun.com/xiasohuai/article/details/84345097

vuejs 专栏收录该内容

97 篇文章

订阅专栏

本文介绍如何通过npm安装wangEditor富文本编辑器，并在项目中进行配置使用，无需引入额外CSS样式，直接在Vue组件中初始化编辑器，实现文本编辑与base64图片上传功能。

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

首先

npm install wangeditor

然后，直接写就行，也无需引入css样式

<template>
  <div class="detailPage">
    <div id="editor">
        <p>欢迎使用 <b>wangEditor</b> 富文本编辑器</p>
    </div>
  </div>
</template>

<script type="text/javascript">
    export default{
      mounted(){
        var E = require('wangeditor')      
        var editor = new E('#editor')
        editor.customConfig.uploadImgShowBase64 = true//img图片转成base64格式，需要的话写，不需要不写
        editor.customConfig.onchange = (html) => {
          this.bulletinconcent = html
        }
        editor.create()
      }
    }
</script>

效果图：