CODEWITHSUNDEEP
javascriptnicedit
Bengo McBoing
Bengo McBoing

Reputation: 11

Can I get the 'line breaks' in a contenteditable div-tag that's word-wrapping?

I'm using nicedit, which uses a contenteditable DIV-tag as input field, on a page where a user can enter and format some text, which then is submitted to a php-script which converts this formatted text into an image. The text in this contenteditable div is getting word-wrapped with no line-break characters where it is wrapped.
Is there any way to find out where this wrapping occurred, or insert line-breaks when occurrs, so that I can access the text as separate lines?

Upvotes: 1

Views: 772

Answers (2)

Jonathon Hill
Jonathon Hill

Reputation: 3495

Try a different approach, change the way you're rendering that image. Perhaps you can find a graphics library that handles word wrapping automatically, or replicate the HTML on the page and take a snapshot using PhantomJS or similar.

Upvotes: 0

Tim Down
Tim Down

Reputation: 324727

You'll have to calculate the pixel co-ordinates of each word, which is possible but non-trivial to achieve cross-browser. One way would be to insert a zero-width dummy element before each word and use its position. Recent WebKit and Firefox browsers give you a getClientRects() method of DOM Range objects, which is preferable as it is less invasive and likely performs better. IE's proprietary TextRange objects have methods to move between words and properties boundingLeft and boundingTop that will give you the bounding box of the TextRange.

Upvotes: 1

Related Questions