在同一页面上初始化两个Draft.js编辑器,可以按照以下步骤进行操作:
import React, { useState } from 'react';
import { Editor, EditorState } from 'draft-js';
const DualEditorPage = () => {
const [editor1State, setEditor1State] = useState(() =>
EditorState.createEmpty()
);
const [editor2State, setEditor2State] = useState(() =>
EditorState.createEmpty()
);
const handleEditor1Change = (newState) => {
setEditor1State(newState);
};
const handleEditor2Change = (newState) => {
setEditor2State(newState);
};
return (
<div>
<Editor editorState={editor1State} onChange={handleEditor1Change} />
<Editor editorState={editor2State} onChange={handleEditor2Change} />
</div>
);
};
const App = () => {
return (
<div>
<h1>双编辑器页面</h1>
<DualEditorPage />
</div>
);
};
这样,你就可以在同一页面上初始化两个Draft.js编辑器。每个编辑器都有自己的状态和变化处理函数,可以独立地进行编辑和操作。
请注意,以上代码示例中使用的是React和Draft.js库来创建编辑器。如果你使用的是其他框架或库,可以根据相应的文档和API进行相应的调整。