富文本编辑器——wangEditor

最新推荐文章于 2024-08-14 15:16:27 发布

风继续吹&

最新推荐文章于 2024-08-14 15:16:27 发布

阅读量131

点赞数

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

本文链接：https://blog.csdn.net/qq_48930299/article/details/118014710

版权

本文档介绍了如何在Vue.js项目中安装和使用wangEditor富文本编辑器。通过cnpm安装，创建编辑器容器，并在组件的mounted生命周期钩子中初始化编辑器，从而实现基本的富文本编辑功能。此外，还提供了查看其他配置选项以扩展编辑器功能的方法。

摘要由CSDN通过智能技术生成

安装 cnpm i wangeditor --save
创建一个div, id与下面的一致
看文档开始使用------基本使用-----npm安装
复制粘贴到mounted里面
可以看其他配置信息例如图片

<template>
  <div>
    <el-form label-width="100px">
      <el-form-item label="商品标题">
        <el-input
          type="text"
          v-model="form.title"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item label="商品描述">
        <el-input type="text" v-model="form.desc" autocomplete="off"></el-input>
      </el-form-item>

      <el-form-item label="所属分类">
        <el-select v-model="form.classify" placeholder="请选择分类">
          <el-option
            v-for="item in classifyList"
            :key="item._id"
            :value="item.name"
          >
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="商品主图">
        <div class="upload-from">
          <!-- 缩略图 -->
          <div
            v-for="(item, index) in form.mainPic"
            :key="index"
            class="small-img"
          >
            <img :src="`${ip}${item}`" width="100%" height="100%" />
            <i
              class="el-icon-delete-solid img-delbtn"
              @click="delImg(index)"
            ></i>
          </div>
          <!-- 上传按钮 -->
          <el-upload
            :action="`${ip}/admin/upload/img`"
            name="myfile"
            :show-file-list="false"
            class="upload-body"
            :on-success="uploadSuccess"
          >
            <i class="el-icon-plus upload-btn"></i>
          </el-upload>