wangEditor 富文本编辑器的使用

最新推荐文章于 2024-10-12 20:45:35 发布

原创

最新推荐文章于 2024-10-12 20:45:35 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #wangEditor #富文本编辑器

本文介绍了在公司动态新闻模块中，为节省开发成本而选用wangEditor作为富文本编辑器的原因。wangEditor是一个轻量级、开源的Web富文本编辑器，兼容多种PC浏览器。文中展示了基本使用步骤，包括npm安装，并强调了上传图片和视频时需要注意的接口返回格式。作者对wangEditor的评价是简单易用，推荐使用。

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

前因：

因公司动态新闻模块需要，不浪费开发人力、时间等成本，决定选择一款富文本编辑器，由运营人员来编辑文本实现新闻的发布

后果：

最终选择了wangEditor

wangEditor 是一款基于javascript和css开发的 Web富文本编辑器，轻量、简洁、易用、开源免费。

兼容常见的 PC 浏览器：Chrome，Firefox，Safar，Edge，QQ 浏览器，IE11。

不支持移动端

先来看下页面样子：

基本使用

下载

npm 安装 npm i wangeditor --save

父组件：

// 文章-新增/编辑
<template>
    <div class="page-main-style">
        
        <div class="content-wrap">
            <el-form :model="form" :rules="rules" ref="form" :inline="true">
                <el-row>