如何将html的字符串作为初始值

[patire-tu]

trafficstars

您好！brilliant是我调研期间观感最好的富文本组件，感谢您对社区的贡献！

但有个问题困惑了我，我期望组件能形成html字符串的value/onChange数据流，于是尝试了2种方法： 1）通过draft-js-export-html和draft-js-import-html进行出入值的转换：

import 'brilliant-editor/dist/index.css';
import './index.scss';

import Brilliant from 'brilliant-editor';
import { EditorState } from 'draft-js';
import { stateToHTML } from 'draft-js-export-html';
import { stateFromHTML } from 'draft-js-import-html';
import _get from 'lodash/get';
import meta from 'meta';
import React from 'react';
import axiosInstance from 'remote/axios';

export interface IMarkdownEditorProps {
  value?: string;
  onChange?: (value?: string) => void;
}

export async function upload(file: FormData) {
  const fileData = file.get('file') as File;
  const { name, size, type, lastModified } = fileData;
  const data: any = await axiosInstance.post('/crm/file/upload', file);
  return {
    id: lastModified + '',
    name,
    type,
    size,
    url: `${meta.staticRootPath}${data.path}`,
  };
}

export default function MarkdownEditor(props: IMarkdownEditorProps) {
  const { value: propsValue = '', onChange } = props;
  const [value, setValue] = React.useState(EditorState.createEmpty());

  React.useEffect(() => {
    setValue(EditorState.createWithContent(stateFromHTML(propsValue)))
  }, [propsValue]);

  function onEditorChange(editorState: EditorState) {
    onChange && onChange(stateToHTML(editorState.getCurrentContent()));
  }

  return (
    <Brilliant
      imgControls
      language="zh"
      value={value}
      onEditorChange={onEditorChange}
      handleImgUpload={upload}
      disableFloatControls
    />
  );
} 

2）通过html-to-draftjs和draftjs-to-html进行出入值的转换：

import 'brilliant-editor/dist/index.css';
import './index.scss';

import Brilliant from 'brilliant-editor';
import { ContentState, convertToRaw, EditorState } from 'draft-js';
import draftToHtml from 'draftjs-to-html';
import htmlToDraft from 'html-to-draftjs';
import _get from 'lodash/get';
import meta from 'meta';
import React from 'react';
import axiosInstance from 'remote/axios';

export interface IMarkdownEditorProps {
  value?: string;
  onChange?: (value?: string) => void;
}

export async function upload(file: FormData) {
  const fileData = file.get('file') as File;
  const { name, size, type, lastModified } = fileData;
  const data: any = await axiosInstance.post('/crm/file/upload', file);
  return {
    id: lastModified + '',
    name,
    type,
    size,
    url: `${meta.staticRootPath}${data.path}`,
  };
}

export default function MarkdownEditor(props: IMarkdownEditorProps) {
  const { value: propsValue = '', onChange } = props;
  const [value, setValue] = React.useState(EditorState.createEmpty());

  React.useEffect(() => {
    const blocksFromHtml = htmlToDraft(propsValue);
    const { contentBlocks, entityMap } = blocksFromHtml;
    const contentState = ContentState.createFromBlockArray(contentBlocks, entityMap);
    const editorState = EditorState.createWithContent(contentState);
    setValue(editorState);
  }, [propsValue]);

  function onEditorChange(editorState: EditorState) {
    const rawContentState = convertToRaw(editorState.getCurrentContent());
    const markup = draftToHtml(
      rawContentState,
      // hashtagConfig,
      // directional,
      // customEntityTransform
    );
    onChange && onChange(markup);
  }

  return (
    <Brilliant
      imgControls
      language="zh"
      value={value}
      onEditorChange={onEditorChange}
      handleImgUpload={upload}
      disableFloatControls
    />
  );
}

均无法实现初始的html字符串的设置。 期待您的回复。