HTML format of data retreived from the database is messed up - reactjs

Question

I have some HTML data in my database (newsletter) which I would like to display inside the CK Editor, however for some reason, the CKEditor is "messing" up the format of this HTML. For example, this is part of the original data in the db
<P style="FONT-SIZE: 2pt; MARGIN-BOTTOM: 0pt; MARGIN-TOP: 0pt">
<SPAN style="FONT-FAMILY: Verdana"> </SPAN>
</P>
<DIV style="TEXT-ALIGN: center">
<TABLE style="WIDTH: 408.8pt; BORDER-COLLAPSE: collapse; MARGIN-LEFT: auto; MARGIN-RIGHT: auto" cellSpacing=0 cellPadding=0>
<TBODY>
and this is how it is displayed inside the CKEditor :-
<p><span style="font-family:Verdana"> </span></p>
<div>
<table cellspacing="0" cellpadding="0" style="width:408.8pt" class=" cke_show_border">
<tbody>
with the result that the text is not centre aligned and also not the same format.
So I was wondering, is there any setting for the CKEditor that leaves everything as it is without touching the HTML?
My exisiting config is as follows:-
const GetDefaultConfig = {
toolbar: [
{ name: 'document', items: ['Save', 'NewPage', 'Preview', 'Print', '-', 'Templates'] },
{ name: 'clipboard', items: ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo'] },
{ name: 'editing', items: ['Find', 'Replace', '-', 'SelectAll', 'Scayt'] },
{ name: 'forms', items: ['Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField'] },
{ name: 'styles', items: ['Styles', 'Format', 'Font', 'FontSize'] },
{ name: 'colors', items: ['TextColor', 'BGColor'] },
{ name: 'tools', items: ['Maximize', 'ShowBlocks'] },
'/',
{ name: 'basicstyles', items: ['Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'CopyFormatting', 'RemoveFormat'] },
{ name: 'paragraph', items: ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote', 'CreateDiv', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', '-', 'BidiLtr', 'BidiRtl', 'Language'] },
{ name: 'links', items: ['Link', 'Unlink', 'Anchor'] },
{ name: 'insert', items: ['Image', 'Flash', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', 'PageBreak', 'Iframe'] }
],
extraPlugins: 'font',
font_names: 'Arial;Comic Sans MS;Courier New;Georgia;Lucida Sans Unicode;Open Sans Regular;Tahoma;Times New Roman;Trebuchet MS;Verdana;',
language: 'en', //if ommitted the language of the users' browser is taken
removeDialogTabs: 'link:advanced;link:target;table:advanced', // Simplify the dialog windows.
format_tags: 'p;h1;h2;h3;h4', // Set the most common block elements.
fontSize_sizes: '8/8pt;9/9pt;10/10pt;11/11pt;12/12pt;14/14pt;16/16pt;18/18pt;20/20pt',
extraAllowedContent: 'div[id, contenteditable]',
enterMode: 2,
font_defaultLabel: 'Verdana',
fontSize_defaultLabel: '9',
disableNativeSpellChecker: false,
scayt_autoStartup: true,
// remove this line below for disabling browser spellcheck
removePlugins : 'scayt,menubutton,contextmenu,htmldataprocessor',
// HOW TO USE THE BROWSER SPELLCHECK
// To use the browser spellcheck, the user has to CTRL+RightClick on an empty space in the text area, so that he can choose the Language he
// wants to work with for checking the spelling of his text.
// To change a word that is wrong (red underlined), CTLR+RightClick on the actual word to get suggestions to change it to a different word
scayt_uiTabs : '0,1,0',
};
I would like to have some kind of setting that leaves all the HTML tags as they are originally.
Is it possible?
Thanks for your help and time

Answer 1

I solved this by adding
allowedContent: true,
to the config of the CKEditor.