Dmitry Fomin | 12 Oct 21:56 2011
Picon

Wrapping text around picture in QTextEdit

Hello everyone!

I'm developing a WYSIWYG editor using QTextEdit. I need to support
text wrapping around pictures, but it seems that QTextEdit does not
support that.
I tried to use QTextLayout for this and lay out text manually in
paintEvent(), but text gets uneditable.
I tried to insert pucture using html, but html subset of QTextDocument
doesn't support 'position' for attribute 'style' in <img> tag.
Components with full html and css support don't support editing.
I thought about implementing QAbstractTextDocumentLayout subclass, but
it seems to be a very hard task, while, for example,
QPlainTextDocumentLayout implementation providing simpler text layout
consists of 2.7K lines of code.
I tried to insert a picture in QTextFrame, but QTextFrame cannot be
moved to specific position.
I investigated source code of KWord, but it's very complex; I suppose
KWord uses its own system for laying out document items.
I would like to have something like this -
http://dl.dropbox.com/u/6880232/1.png - but with editing option. I get
this by simply inserting an image to QTextEdit as a special character:
http://dl.dropbox.com/u/6880232/2.png.
Are there accessible solutions for this task? What could you suggest
for implementing the editor?

Thanks.

Dmitry
Roopesh Chander | 13 Oct 07:31 2011
Picon

Re: Wrapping text around picture in QTextEdit

You are right in trying to derive from QAbstractTextDocumentLayout. KWord does that. But I can understand when you say it's code is complex - I'd meddled with its layout engine a few years back when contributing to KWord, and still, I can't really claim to know how layouting works there completely. Still, if you just need to handle text-flowing-around-images (and don't have to handle tables/lists/numbering et al.) it might not turn out too hard.


The basic outline would look something like:
- You don't layout in the paintEvent() - that's gonna be *slow*. The right place to do it is in QAbstractTextDocumentLayout::documentChanged()
- When the document changes, you iterate over all the blocks that are affected by the change, and relayout the blocks (See the code snippet in QTextLayout documentation)
- While laying out a block, if there's an image in a particular line, you should reduce the line width accordingly (QTextLine::setLineWidth()). You'll know the height of a block only after it's laid out (assuming word-wrap is on).
- The widget's paint() will (eventually) call QAbstractTextDocumentLayout::draw(), where you can iterate over all the blocks and draw each block at the correct position (accounting for the height of previous blocks).

Hope that helps.

roop.

On Thu, Oct 13, 2011 at 1:26 AM, Dmitry Fomin <fomin.dm <at> gmail.com> wrote:
Hello everyone!

I'm developing a WYSIWYG editor using QTextEdit. I need to support
text wrapping around pictures, but it seems that QTextEdit does not
support that.
I tried to use QTextLayout for this and lay out text manually in
paintEvent(), but text gets uneditable.
I tried to insert pucture using html, but html subset of QTextDocument
doesn't support 'position' for attribute 'style' in <img> tag.
Components with full html and css support don't support editing.
I thought about implementing QAbstractTextDocumentLayout subclass, but
it seems to be a very hard task, while, for example,
QPlainTextDocumentLayout implementation providing simpler text layout
consists of 2.7K lines of code.
I tried to insert a picture in QTextFrame, but QTextFrame cannot be
moved to specific position.
I investigated source code of KWord, but it's very complex; I suppose
KWord uses its own system for laying out document items.
I would like to have something like this -
http://dl.dropbox.com/u/6880232/1.png - but with editing option. I get
this by simply inserting an image to QTextEdit as a special character:
http://dl.dropbox.com/u/6880232/2.png.
Are there accessible solutions for this task? What could you suggest
for implementing the editor?

Thanks.

Dmitry
_______________________________________________
Qt-interest mailing list
Qt-interest <at> qt.nokia.com
http://lists.qt.nokia.com/mailman/listinfo/qt-interest

_______________________________________________
Qt-interest mailing list
Qt-interest <at> qt.nokia.com
http://lists.qt.nokia.com/mailman/listinfo/qt-interest
Girish Ramakrishnan | 13 Oct 10:10 2011
Picon

Re: Wrapping text around picture in QTextEdit

Hi Dmitry,

On Thu, Oct 13, 2011 at 1:26 AM, Dmitry Fomin <fomin.dm <at> gmail.com> wrote:
> Hello everyone!
>
> I'm developing a WYSIWYG editor using QTextEdit. I need to support
> text wrapping around pictures, but it seems that QTextEdit does not
> support that.
> I tried to use QTextLayout for this and lay out text manually in
> paintEvent(), but text gets uneditable.
> I tried to insert pucture using html, but html subset of QTextDocument
> doesn't support 'position' for attribute 'style' in <img> tag.
> Components with full html and css support don't support editing.

QtWebKit supports editing html content with designMode and
contentEditable DOM attributes. Also, see
QWebPage::setContentEditable().

> I thought about implementing QAbstractTextDocumentLayout subclass, but
> it seems to be a very hard task, while, for example,
> QPlainTextDocumentLayout implementation providing simpler text layout
> consists of 2.7K lines of code.
> I tried to insert a picture in QTextFrame, but QTextFrame cannot be
> moved to specific position.
> I investigated source code of KWord, but it's very complex; I suppose
> KWord uses its own system for laying out document items.
> I would like to have something like this -
> http://dl.dropbox.com/u/6880232/1.png - but with editing option. I get
> this by simply inserting an image to QTextEdit as a special character:
> http://dl.dropbox.com/u/6880232/2.png.
> Are there accessible solutions for this task? What could you suggest
> for implementing the editor?
>

Floating is already supported in QTextEdit. Have you tried
http://doc.qt.nokia.com/stable/qtextcursor.html#insertImage-2 ?

Girish

Gmane