Чтобы установить значения по умолчанию для React Draft Wysiwyg, вы можете использовать объект EditorStateиз пакета draft-js, который является базовой библиотекой, используемой React Draft Wysiwyg. Вот несколько методов, которые вы можете использовать:
-
Метод 1: Инициализация с использованием содержимого по умолчанию
Вы можете установить содержимое редактора по умолчанию, инициализировавEditorStateс помощью объектаContentStateсодержащий желаемый контент. Вот пример:import { EditorState, ContentState } from 'draft-js'; const defaultContent = ContentState.createFromText('Default content'); const editorState = EditorState.createWithContent(defaultContent); -
Метод 2: обновление состояния редактора
Вы также можете обновить состояние редактора программным способом, используя методpushEditorState. Вот пример:import { EditorState, ContentState } from 'draft-js'; const defaultContent = ContentState.createFromText('Default content'); let editorState = EditorState.createEmpty(); editorState = EditorState.push(editorState, defaultContent); -
Метод 3: подход с использованием контролируемых компонентов
При использовании подхода с контролируемыми компонентами вы можете управлять состоянием редактора с помощью переменной состояния и обновлять ее по мере необходимости. Вот пример:import { Editor } from 'react-draft-wysiwyg'; import { EditorState } from 'draft-js'; import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css'; const MyEditor = () => { const [editorState, setEditorState] = useState(() => EditorState.createEmpty() ); useEffect(() => { const defaultContent = ContentState.createFromText('Default content'); const newEditorState = EditorState.push(editorState, defaultContent); setEditorState(newEditorState); }, []); return ( <Editor editorState={editorState} onEditorStateChange={setEditorState} /> ); };
Это некоторые методы, которые вы можете использовать для установки значений по умолчанию для React Draft Wysiwyg. Не забудьте импортировать необходимые зависимости и стили CSS, как показано в примерах.