react-draft-wysiwyg添加自定义工具栏
时间: 2023-07-06 18:18:16 浏览: 81
要在 `react-draft-wysiwyg` 中添加自定义工具栏,你需要使用 `CustomOption` 组件。
首先,你需要定义一个 `CustomOption` 组件来渲染自定义工具栏,例如:
```jsx
import React from 'react';
import PropTypes from 'prop-types';
const CustomOption = ({ onChange, editorState }) => (
<div onClick={() => onChange(RichUtils.toggleInlineStyle(editorState, 'CUSTOM_STYLE'))}>
Custom Option
</div>
);
CustomOption.propTypes = {
onChange: PropTypes.func.isRequired,
editorState: PropTypes.object.isRequired,
};
export default CustomOption;
```
然后,在 `Editor` 组件中,你需要将 `CustomOption` 组件添加到 `toolbar` 中,例如:
```jsx
import React, { useState } from 'react';
import { Editor, EditorState, RichUtils } from 'draft-js';
import { EditorToolbar } from 'react-draft-wysiwyg';
import CustomOption from './CustomOption';
const MyEditor = () => {
const [editorState, setEditorState] = useState(EditorState.createEmpty());
const handleToolbarChange = (editorState) => {
setEditorState(editorState);
};
return (
<div>
<EditorToolbar>
<CustomOption onChange={handleToolbarChange} editorState={editorState} />
</EditorToolbar>
<Editor editorState={editorState} onChange={setEditorState} />
</div>
);
};
export default MyEditor;
```
这样,你就可以在 `react-draft-wysiwyg` 的工具栏中添加自定义工具栏了!
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)