How to center-align text on react-rte render?

[akarsh-lotusdew]

I upgraded to version 0.16.3 today in order to have the ability to align-text. Additionally, I included getTextAlignClassName, getTextAlignStyles from blockStyleFunctions.

onChange I do a value.toString('html', {blockStyleFn: getTextAlignStyles})

and I pass the prop blockStyleFn={getTextAlignClassName} in <RichTextEditor /> component.

The alignment works and the style is visible onChange, attached screenshot:

The text and image is also rendered correctly onChange:

Now I have to save the above text-value in the DB, and on the page load I use the value back in the React-rte using: RichTextEditor.createValueFromString(props.text, 'html') to render the html in the editor. 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?

[akarsh-lotusdew]

@andersryanc Thanks for the adding the ability to align-text. I was wondering if this is something that you could help me with?

[alguse]

I'm havin the same issue with markdowns, I save the markdown to my DB but the alignment doesn't get applied when I get the data back and also I don't see any changes on the markdown at all when using this functionality . .. Does it work at all??

[panlina]

Seems the problem is that it has no way to reconstruct the state from inline styles.

[erikt9]

I haven't tested this and it's not documented, but there is also a 'raw' format you can pass to toString and createFormatFromString. I believe this should at least allow you to save the state of the editor correctly.

[zilkenberg22]

@akarsh-lotusdew you have any solutions

[akarsh-lotusdew]

@zilkenberg22 No mate. I switched to ck-editor.

[zilkenberg22]

@akarsh-lotusdew i try ckeditor 5. but i cant use alignment. are you use alignment in ckeditor

[akarsh-lotusdew]

@zilkenberg22 1> You can customize your ckEditor from here: https://ckeditor.com/ckeditor-5/online-builder/ 2> Download the build. 3> You can host it in a separate git repo(or have it locally) and use that as path in package.json. 4> Installing the module should give you all the features that you selected while customizing the ckEditor. You can also find some online resources on how to do it. Let me know if you face difficulties, I have done it for my project, it works pretty well.

[shriq011]

This worked for me -> https://github.com/sstur/react-rte/issues/402#issuecomment-855253098

[parthTjcg]

excellent