Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
patire-tu opened this issue Jun 14, 2022 · 0 comments
Open

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

patire-tu opened this issue Jun 14, 2022 · 0 comments

Comments

@patire-tu
Copy link

patire-tu commented Jun 14, 2022

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

但有个问题困惑了我,我期望组件能形成html字符串的value/onChange数据流,于是尝试了2种方法:
1)通过draft-js-export-htmldraft-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-draftjsdraftjs-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字符串的设置。
期待您的回复。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant