如何为 html 编辑器材质 ui 设置初始状态？

Question

我有这个<h1>header</h1>，我想将它设置为 htlm 编辑器的初始状态。我使用这个库 react-mui-draft-wysiwyg https://openbase.com/js/react-mui-draft-wysiwyg/documentation#usage。有人可以帮助我吗？

Answer 1

代码解决方案 https://codesandbox.io/s/estilos-editor-forked-gvef9?file=/src/editor.js

使用https://kelsier90.github.io/react-mui-draft-wysiwyg/examples/basic-with-content 来自文档

import React from "react";
import MUIEditor, { MUIEditorState } from "react-mui-draft-wysiwyg";
import { convertFromRaw } from "draft-js";

const Editor = () => {
  const editorConfig = {};
  const rawContent = {
    blocks: [
      {
        data: {},
        depth: 0,
        entityRanges: [],
        inlineStyleRanges: [],
        key: "2vm6d",
        text: "Header",
        type: "header-one"
      }
    ],
    entityMap: {}
  };
  const [editorState, setEditorState] = React.useState(
    MUIEditorState.createWithContent(editorConfig, convertFromRaw(rawContent))
  );
  const onChange = (newState) => {
    setEditorState(newState);
  };
  return <MUIEditor editorState={editorState} onChange={onChange} />;
};

export default Editor;

看看能不能帮到你，谢谢，