Wysiwyg field adds \n newlines to db

#1

Hi,

When using the wysiwyg editor, cockpit adds a \n between every html tag.
Can I somehow prevent this before the editor saves the content to the db? (mongoDb)
It is not shown when looking at the source code in the dashbord, but shows when fetched from the API.

"<h1>Headline, mere indhold p&aring; dette sp&oslash;rgsm&aring;l</h1>\n<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</p>\n<p>Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor</p>\n<h2>Overskrift</h2>\n<p>Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum.</p>\n<h3>Overskrift</h3>\n<p>Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus.</p>"
#2

Hey @Ravnravn, that’s true but never realized it as a potential problem! Believe that is handled directly by tinyMCE and the break lines are required by the editor. How it impacts you in the frontend when consuming the data?

#3

Hi @paulamgomes

Thanks for your respond.

I fetch the content in react native. Then use react-native-htmlview to render the html to jsx.
Unfortunately, this creates quite some space between the text elements.

09
2019-01-21 16.03.09.png750×1334 107 KB

#4

Ok, I can see your problem now! Can you do some transformation on the resulting field? On react (web) usually, I use https://github.com/pveyes/htmr for transform markup before output it in the jsx, and that seems to work well.
But it also seems already a well-known issue on the react native library you are using - https://github.com/jsdf/react-native-htmlview/issues/202

#5

I got it working, thanks a lot!

I was avoiding regex although it would have worked, but wrapping the data in a div did the trick!

<HTMLView
  style={styles.content}
  value={`<div>${htmldata}</div>`}
  stylesheet={htmlstyles}
  addLineBreaks={false}
/>