简介

draft-js-fixed 是一个为 draft-js 框架添加固定样式的 npm 包。draft-js 是一款不同于其他富文本编辑器的框架，它具有更高的灵活性和可定制性。而 draft-js-fixed 可以方便地为 draft-js 文本添加固定样式，极大地提高了开发效率。

安装和使用

draft-js-fixed 的安装非常简单，只需要在命令行中运行以下代码即可：

npm install draft-js-fixed --save

在项目中导入 draft-js-fixed 的步骤：

import createFixedToolbarPlugin from 'draft-js-fixed';```

然后使用 `createFixedToolbarPlugin` 为 draft-js 框架添加固定样式： 

const fixedToolbarPlugin = createFixedToolbarPlugin({ theme: { buttonStyles: { backgroundColor: 'lightgray' } }, });

在渲染逻辑中，将 `fixedToolbarPlugin` 添加到 draft-js 编辑器中即可：

-- -------------------- ---- -------

----------------------------------------------- ---------------- ------

-- --

---------------- ------ -------------------- - ------- -------------------------------

--- -------------

------------- ------------------- ---- -------------

.dj-fixed-toolbar-button-wrapper { display: flex; align-items: center; justify-content: flex-end; }

### button

button 是固定工具栏中按钮的样式，我们可以通过修改背景颜色、尺寸、文本颜色等实现不同的效果。例如：

.dj-fixed-toolbar-button { background-color: #f5f5f5; color: gray; width: 30px; height: 30px; margin: 0 5px;

&:hover { background-color: gray; color: white; }

&:active { background-color: darkgray; color: white; } }

### counter

counter 是固定工具栏中字符统计的样式，我们可以通过修改字体大小、颜色等样式来实现不同的效果。例如：

.dj-fixed-toolbar-counter { font-size: 12px; color: gray; }

## 代码示例

下面是一个完整的代码示例：

import React, { useState, useCallback } from 'react'; import { Editor, EditorState, RichUtils } from 'draft-js'; import createFixedToolbarPlugin from 'draft-js-fixed';

import 'draft-js-fixed/lib/plugin.css';

import './App.css';

const App = () => { const [editorState, setEditorState] = useState(EditorState.createEmpty());

const handleKeyCommand = useCallback((command, state) => { const newState = RichUtils.handleKeyCommand(state, command); if (newState) { setEditorState(newState); return 'handled'; } return 'not-handled'; }, []);

const handleBoldClick = useCallback(() => { setEditorState(RichUtils.toggleInlineStyle(editorState, 'BOLD')); }, [editorState]);

const fixedToolbarPlugin = createFixedToolbarPlugin({ theme: { buttonStyles: { backgroundColor: 'lightgray' } }, });

return (

export default App;

-- -------------------- ---- -------

---------- -------------------------------------------------------------- ----

-- --

---------------- ----------------------------- -------- -------------------------- ---------------- ------------------------------------------------

- ------------------------------------------------------------------------------ --------
------------------------------------------------------------------------------------------------------------------------