How to render align styles text on react-rte

[zilkenberg22]

The text-value has the style <p style="text-align: center"> but the styles are lost after RichTextEditor.createValueFromString(props.text, 'html'). Is there a way I can retain the styles from the saved text-values inside the editor?

[dgruseck]

Hi,

3 things you need to do for display, saving and importing:

import RichTextEditor, {
  getTextAlignClassName,
  getTextAlignStyles,
  getTextAlignBlockMetadata,
} from 'react-rte';

// create value from html
RichTextEditor.createValueFromString(
  text,
  'html',
  {
    customBlockFn: getTextAlignBlockMetadata,
  }
)

// save html
this.state.text.toString(
  'html',
  {
     blockStyleFn: getTextAlignStyles,
  })

// render TextEditor
<RichTextEditor
  value={this.state.text}
  blockStyleFn={getTextAlignClassName}
/>

[camkon]

Thanks. This works just fine. Also, is there a way with this around markdown format?

[gezimra]

Hello, I'm using version "^0.16.5" and I cannot find { getTextAlignClassName, getTextAlignStyles, getTextAlignBlockMetadata } exported from 'react-rte'.