前言
在 Web 开发中，富文本编辑器是一个常见的功能。而在 React 后台管理系统的开发中，常常需要集成富文本编辑器。OffTheShelf 团队为了简化开发，开源了一个富文本编辑器组件 —— aor-rich-text-input-with-image-handler。
本文将详细介绍 npm 包 aor-rich-text-input-with-image-handler 的使用方法，希望对前端开发者有所指导和帮助。
安装
在使用 aor-rich-text-input-with-image-handler 之前，我们需要先安装它：
npm install --save aor-rich-text-input-with-image-handler
快速上手
在使用 aor-rich-text-input-with-image-handler 前，我们需要先引入必要的库:
import React from 'react';
import { ReduxForm } from 'react-admin';
import RichTextInput from 'aor-rich-text-input-with-image-handler';如果你已经使用过 react-admin，那么你可能对 ReduxForm 和 RichTextInput 已经非常熟悉了。
然后，我们就可以使用 RichTextInput 组件了：
export const PostEdit = props => (
<Edit {...props}>
<SimpleForm>
<TextInput source="title" />
<RichTextInput source="body" />
</SimpleForm>
</Edit>
);组件特性
支持上传图片
在富文本编辑器里面插入图片是一个常见的用例。aor-rich-text-input-with-image-handler 提供了上传图片的功能，只需要在使用 RichTextInput 时，指定 uploadUrl 和 uploadHeaders：
<RichTextInput
source="body"
uploadUrl="http://localhost:3000/upload"
uploadHeaders={{ Authorization: 'Bearer token' }}
/>uploadUrl 用来指定上传图片的地址，uploadHeaders 可以指定上传图片时需要携带的 token。
显示图片
在富文本编辑器里面，我们不仅可以插入图片，还可以对插入的图片进行修改、删除等操作。对于更高级的用例，aor-rich-text-input-with-image-handler 提供了一个叫做 imageHandler 的 prop，你可以把你想要的行为作为一个函数传过去：
-- -------------------- ---- -------
----- -------------- - ------- -- -
------ -
-----
----------------------
------- ----------- -- - --------------- ----------------
------- ----------- -- - ----------------- ------------------
------
--
--
------ ----- -------- - ----- -- -
----- -----------
------------
---------- -------------- --
--------------
-------------
----------------------------------------
---------------- -------------- ------- ------ --
-----------------------------
--
-------------
-------
--imageHandler 接收一个 object，该 object 包含 src, onEdit, onRemove 三个属性，分别表示图片地址、编辑图片和删除图片的方法。
总结
aor-rich-text-input-with-image-handler 是一个非常实用的富文本编辑器组件，它方便了开发者使用 React 和 react-admin 构建复杂的管理页面。本文介绍了该组件的安装和基本用法，并详细讲解了其上传图片和显示图片的高级用法。希望这篇文章能够帮助到需要使用富文本编辑器的开发者。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005575a81e8991b448d454e