介绍
@4nduril/react-rte 是一个 React 富文本编辑器组件，具有丰富的编辑功能，包括文本加粗/斜体/下划线、超链接、图片上传等。同时，它还支持多种编辑器风格和样式的选择。
安装
可以通过 npm 或 yarn 来安装 @4nduril/react-rte 。
npm install @4nduril/react-rte --save
yarn add @4nduril/react-rte
使用
可以通过以下步骤来使用 @4nduril/react-rte ：
- 导入编辑器组件
import { RichTextEditor, EditorValue } from '@4nduril/react-rte';- 设置初始值
const [value, setValue] = useState(EditorValue.createEmpty());
- 渲染组件
<RichTextEditor
className={styles.rte}
toolbarClassName={styles.toolbar}
value={value}
onChange={setValue}
/>基本操作
设置编辑器宽度
可以通过样式来设置编辑器的宽度，例如：
.editor {
width: 600px;
}获取编辑器内容
可以通过 value 属性来获取编辑器内容，例如：
const content = value.toString('html');设置编辑器内容
可以通过 setValue 方法来设置编辑器内容，例如：
const content = '<p>Hello, World!</p>'; const editorValue = EditorValue.createFromString(content, 'html'); setValue(editorValue);
高级操作
自定义样式
可以通过将 CSS 引入编辑器样式来自定义编辑器的样式：
@import '~@4nduril/react-rte/lib/css/rte.css';
替换默认图标
可以通过在渲染 RichTextEditor 组件时传入 iconMap 属性来替换默认图标。例如：
-- -------------------- ---- ------- ----- ------------- - - ----- --------------- --- ------- ----------------- --- -- --- -- --------------- ------------- ------------------- ----------------------- --
自定义工具栏配置
可以通过在渲染 RichTextEditor 组件时传入 toolbars 属性来自定义工具栏配置。例如：
-- -------------------- ---- -------
----- -------------- - -
-
-
----- -------------------
----- ------- ---
---------- ------------------
--
-
----- ---------------------
----- --------- ---
---------- --------------------
--
--
-- ---
--
---------------
-------------
-------------------
-------------------------
--示例代码
-- -------------------- ---- -------
------ - -------- - ---- --------
------ - ------- -------- - ---- -----------------
------ - ------------ --------------- ------------- - ---- ---------------------
------ -------------------------------------
------ ------ ---- ----------------------
----- ------------- - -
----- ------- ---
------- --------- ---
--
----- -------------- - -
-
-
----- -------------------
----- ------- ---
---------- ------------------
--
-
----- ---------------------
----- --------- ---
---------- --------------------
--
--
--
-------- -------- -
----- ------- --------- - ------------------------------------
------ -
---------------
----------------------
---------------------------------
-------------
-------------------
-----------------------
-------------------------
--
--
-来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055f2b81e8991b448dcbff