Vue页面使用多个WangEditor

玉锵T

已于 2022-08-27 18:28:40 修改

阅读量2.2k

点赞数

分类专栏：前端文章标签：前端 vue.js

于 2022-08-27 17:49:29 首次发布

本文链接：https://blog.youkuaiyun.com/wt337144203/article/details/126560352

版权

本文介绍了如何在Vue项目中使用WangEditor创建多个富文本编辑框。详细步骤包括引入样式、编辑框模板的创建、JS代码的编写以及图片上传接口的实现。每个编辑框都需要独立的方法进行内容处理和数据保存。

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

一：前言：

二：开始正文：

三：JS代码：

四：图片上传 WangEditupload1（）方法：

一：前言：

我本是后端，无奈公司也要我做前端。接了一个新的需求。一个页面要出现多个超文本编辑框如下图所示：

于是我开始做调研，找到了一款非常好用的富文本编辑器WangEditor。

一定要引入样式：最基本的安装，请移步官网！

<!-- 引入wangEditor样式 -->
<style src="@wangeditor/editor/dist/css/style.css">
</style>

二：开始正文：

编辑框：有几个编辑框就写几个template，但是里面的ref和class的值一定要改

     <template>
          <div style="border: 1px solid #ccc;">
            <el-row :gutter="10">
              <el-col :xs="24" :sm="24" :md="15" :lg="20" :xl="15">
                <div ref="editor" class="text " />
              </el-col>
            </el-row>
          </div>
        </template>

如下图所示：