draftjs生成表格
时间: 2023-07-30 15:06:37 浏览: 173
要使用 Draft.js 生成表格,你可以使用 Draft.js 插件库中的 `draft-js-table-plugin` 插件。下面是一个基本的示例代码:
首先,使用 npm 安装 `draft-js-table-plugin` 插件:
```
npm install draft-js-table-plugin --save
```
然后,导入和使用插件:
```javascript
import React, { useState } from "react";
import Editor from "draft-js-plugins-editor";
import createTablePlugin from "draft-js-table-plugin";
import "draft-js-table-plugin/lib/plugin.css";
const tablePlugin = createTablePlugin();
const plugins = [tablePlugin];
function MyEditor() {
const [editorState, setEditorState] = useState(EditorState.createEmpty());
const onChange = (editorState) => {
setEditorState(editorState);
};
return (
<div>
<Editor editorState={editorState} onChange={onChange} plugins={plugins} />
</div>
);
}
```
现在,你可以在编辑器中使用以下命令来创建表格:
- `Ctrl+Alt+T`:创建表格
- `Tab`:在单元格之间移动
- `Shift+Tab`:在单元格之间移动(向左)
- `Enter`:在表格中新建一行
- `Ctrl+Enter`:在表格中插入一行
希望这可以帮助你使用 Draft.js 生成表格。
阅读全文
相关推荐















