react实现富文本：wangeditor-for-react

最新推荐文章于 2024-07-29 19:26:43 发布

impossible1994727

最新推荐文章于 2024-07-29 19:26:43 发布

阅读量3.1k

点赞数 2

分类专栏： react 文章标签： react 富文本 wangeditor

本文链接：https://blog.csdn.net/impossible1994727/article/details/117931282

版权

本文介绍了如何在React应用中使用wangeditor实现富文本编辑功能，包括安装、引入、事件监听、自定义配置和使用方法。详细讲解了如何追加、获取、设置内容，以及禁用和启用编辑器的操作。还提到了自定义上传图片和视频的实现。

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

参考资源：

https://www.wangeditor.com

https://www.showapi.com/book/view/2008/17

安装：

npm install wangeditor-for-react

引入：

import ReactWEditor from 'wangeditor-for-react';

事件监听：

import ReactWEditor from 'wangeditor-for-react';

<ReactWEditor
  defaultValue={'<h1>标题</h1>'}
  linkImgCallback={(src,alt,href) => {
    // 插入网络图片的回调事件
    console.log('图片 src ', src)
    console.log('图片文字说明',alt)
    console.log('跳转链接',href)
  }}
  onlineVideoCallback={(video) => {
    // 插入网络视频的回调事件
    console.log('插入视频内容', video)
  }}
  onChange={(html) => {