Now into something a bit different. Today’s Graphics Dojo example is related to WebKit (again), namely using it as a basis for WYSIWYG (what-you-see-is-what-you-get) editor. Thanks to Apple engineers and other WebKit hackers, WebKit’s editing features have improved a lot so that it is perfectly possible to use it to let the user edit the web page.
These days, rich-text editing is supported quite well in many web browsers. Take a look at Mozilla support for editing, which gives an idea on how to start doing it. Head also to the short overview on HTML and JS-based editors to get more information.
The editor demo is available at the usual git repository. Too lazy to use git? Just grab the archive (65 KB) and unpack it. Check the editor under the htmleditor directory. You need Qt 4.5, which has just been released.
To get an idea what this little editor can do, have a look at this short screencast.
A couple of things I showed in the demo are character formatting (bold, italic, underline, font name, size, colors), paragraph settings (style, alignment, indentation, lists), image and hyperlink support. You can also insert any HTML code. For editing convenience, undo and redo are even possible. Switching to "HTML Source" tab will reveal the raw HTML code for the page (note the syntax highlight).
Since this is just a quick-and-dirty example, there are few things which are not done the right way. For example, due to the lack of our QtWebKit public API (which we plan to address for Qt 4.6), I need to resort to JavaScript code for some functionalities. Also, things like paragraph alignment, heading style, font size, etc are stateless, mainly because there is no easy path to get the state value. Of course, this can be solved using a few DOM and JS magic tricks commonly employed in popular online editors, however I am still looking for a much cleaner way. Feel free to point me to some leads and/or give some feedback!
21 Responses to “WYSIWYG HTML Editor”
Nice little app. Makes me wish I had time to find an excuse to use QtWebKit that way. I’m glad to hear that you’re working on the public API for 4.6.
It is a bit odd to see Ozone/Oxygen WinDeco and Tango icons on the same Qt app though.
Hi,
I’ve been playing with this kind of functionality with webkit on the Mac - one challenge I’ve found is when getting the source of a page, if it has entities like © these are converted to © when using innerHTML - how do you handle entities like this?
@John Allsopp: did you try Qt::escape() function?
So how does this compare with QTextEdit for editing HTML? I have found the performance of QTextEdit (up to Qt4.4 anyway) to be poor when editing long paragraphs - does Webkit do a better job? Any plans to replace QTextEdit with Webkit longer term?
@Andrew: QTextEdit supports only the important subsets of HTML. It is also not as heavy as QtWebKit. Performance problem of QTextEdit should be reported so that we can have a look. I did not compare the speed, perhaps you can try it yourself with the your HTML test set? And there is no plan to replace QTextEdit anytime soon.
Very very cool. I’ll definitely be using this down the road. I dug into your code a bit and I actually don’t think the whole javascript trick you pull for stuff like center alignment etc is so ugly at all. In some ways the more concise the Qt 4.6 QWebKit API is the easier it will be to use. Getting at the current state so you can setup the correct default value when asking the user to specify stay alignment is pretty important, so I hope that will be something we can do come Qt 4.6. Anyways, I really appreciate you posting this example code.
Try rendering HTML / Qtextedit bullets over a certain well used pnt size and your feedback is not appreciated
Stop messing with the fancy stuff and fix the basics.
That’s really cool, Ariya. I look forward to the public API for Qt 4.6. Keep up the great work 
Interesting dojo ariya.
Still, that editor doesn’t cope with translating, I guess that would be nice to have an integrated translate flag or something inside HTML assets just like QtScript or standard Qt.
Nice demo! Does WebKit support any spell checking out of the box?
@me: I do not work on QTextEdit, so if you find a bug, I very much appreciate it if you can kindly report it (via the usual channel) so that it won’t get lost.
@Paul: thanks!
@bunjee: I do not fully understand what you mean by ‘translating’. The editor just deals with normal HTML, nothing fancy. Care to elaborate?
@Nils: Qt itself does not (yet) have spelling checker API. But, please check http://labs.trolltech.com/blogs/2007/10/12/spellchecking-for-qtextedit-on-mac-os-x/.
Thanks much ariya. This is a life saving post I needed just this for a project.
Dah, I forgot about spell checking. I currently use QtMacSpellCheckingTextEdit, not QTextEdit, at least on the Mac. I was considering using WebKit to support full rich manipulations in the future but that would mean losing spell checking support. Suggestions:
1) QtMacSpellCheckingTextEdit type behavior should really be baked into QTextEdit since I believe Vista supports similar functionality and thus Windows 7 should as well.
2) It would be very useful to be able to have such auto spell checking support integrated into WebKit as well, perhaps using a special QRichText widget that is based on WebKit. Basically, it would be great to have a powerful rich text editor, based on WebKit, that supports red squiggles spell checking.
In the long run, if it’s possible, it might make sense to ditch QTextEdit and just provide a thin wrapper on a WebKit class, if it can be made light weight enough and fast enough. That way you only have to devote your resources on one layout/rendering system.
hi there,
I want to implement a feature with the qt webkit that can return the HTML under where I click my mouse. for example, if i clicked on an image, I’ll have a tag returned. or if I selected a paragraph, I can get xxxx.
Also, give a specific line of the HTML webpage, I want to know where the element is rendered. for example, I want to know all the sizes and positions of the images on that page.
Do you think these two features will be easy to realize with the current qt webkit?
Thank you.
I hope you can understand me, because the blog system filtered out the HTML tags in the example of my previous message.
Thank you.
[
Too lazy to use git?
]
No….just missing a decent git GUI client for windoze. Something similar to TortoiseSVN would be great.
Apparently, there is memory leak when use the zoom feature. Memory usage instantaneously jumps from 25Mb to 150Mb and keeps rising as you keep zooming in and out.
Other than that, an excellent demo!
I just can’t express how excited I am with Qt after a few years of frustration with Delphi.
Without getting state of text/table/image under cursor we cannot get and change properties (we cannot change link, resize image and so on).
Without that the “editor” can not has such a name
But it is a good start! I’m looking forward to use QWebKit as a WYSIWYG HTML editor. Just when it’s going to happen?… In Qt 4.6?