Sphene Community Tools

This discussion have come up earlier - e.g. in: http://sct.sphene.net/board/thread/1736/why-markdown/?page=1

but the question i am asking is - what do you think about a *simple* usable wysiwyg editor, instead of the markups currently in use. - i would suggest a wysiwyg editor which generates simple but extensible HTML which is partly rendered on the server (with features like image resizing, etc.) - but other than that returned to the browser as it is.

i think it would make the forum and wiki much more userfriendly. but to keep it as simple as possible the only way i see to create something like that would be to completey remove the current rendering. make everything based on the wysiwyg editor. no more choosing of the rendering engine. (at least not once it was chosen.. i simply don't have the energy to maintain multiple rendering engines anyway)

any thoughts on the whole wysiwyg vs. simple markup debate?

So far I've only used Board (not Wiki) so I can tell something about my experiences in this area.
I have a forum (http://ekrawiectwo.net) which is created for dressmakers (tailors). These are people that are not developers and they're often not "technical" at all. In the previous version of "ekrawiectwo" forum, that used PHPBB, there were constant problems eg. with uploading images (it was necessary to use external hosting like imageshack.us).
When we moved to Sphene, my primary concern was to make new forum much easier to use, especially for all these less technical people. I think I did it with SCT, but I've added two things:
* BBCode editor
* Simple image attachments

BBCode
I think that bbcode is very popular, and great number of forums (most?) uses it. Users already have seen bbcode so that's nothing unusual for them. So, for me, BBCode is good for use with board.
When I started with "ekrawiectwo" I've looked into experimental wysiwyg in SCT but it seemed to me to be too odd looking (frightening) for regular users. I've decided to stick with BBCode but I've added BBCode editor. I've found smartmarkup (http://www.phpcow.com/smartmarkup/) to be very easy to integrate (you only have to attach JavaScript to your page), extend and use. It works great. The only issue was that bbcode markup in SCT doesn't handle some rules like [size=...]. I've defined my own smartmarkup config (which is very easy to do) to make it perfect for SCT. See:how this looks:


Images:
I've used my own extended category to allow users to attach images to their posts. These images are not put into the message body, but are displayed under the post. I've also added a Galleries for user where they can put their images, and where they have one special 'Attachemnts gallery' which holds images attached to posts. This is very easy to use for regular users. To display (resize images) I've used sorl-thumbnail, to manage images and galleries: django-generic-images and django-user-albums (I don't use Sphene's groups, so I had no problem to deal with users in different groups). See how this looks:

Manage images link opens upload window:


Uploaded image is shown under post while editing:


Added images might be changed/removed from post:


While viewing the thread images are shown too:


Users have their Galleries (here is only one, Attachment gallery, holding photos attached to posts):


Contents of the gallery:


For me, bbcode and simple image upload such as one described above are enough to have SCT Board user friendly. I'm perfectly happy with this now.

I had some experiences with WYSIWYG editors like TinyMCE and I don't really like them.
I've used 'django-tinymce' and 'filebrowser' (that integrates with django-tinymce).
There are some problems with styling (while editing tinymce uses iframe with it's own set of styles. When displaying content it uses styles of your page, so you have to be very carefull to make your content look same. There are also problems with cross domain security when using tinymce and serving media from other domain, eg. static.sphene.net.
In general there is a lot of problems with look and feel of this tool and with configuration. Maybe recently published google javascript toolbox (one used by gmail) is better, but I haven't used it yet.

In my opinion wysywig in board might be an option but I would leave bbcode support too.

--- Ostatnio edytowane 2009-12-16 09:03:09 przez pigletto ---

Well, pigletto convinced me to his solution. I have to try integrating that BBCode editor to my project too. It seems enough user friendly to me, so with that WYSIWYG editor is not really needed anymore.
It would be great if that could be merged into trunk. Some simple user-friendly editor would be really usefull.

--- Ostatnio edytowane 2009-12-16 14:55:48 przez Dzejkob ---

wow, quite impressive what you did with the posting form :) good idea with the bbcode editor..

my problem is also, that i want to use SCT for blogs .. and maybe for website content.. so i would need to add additional features - like for example "smart" inserting of images (server side resizing, link to the full version with some nice gallery effect) or linking of content pages, etc. .. currently i fall back to raw html to write my blog entries on https://herbert.poul.at which is really annoying ;)

but.. before i write some fancy code to add image resizing to bbcode.. which only work for the forum i thought about investing some more time to create a wysiwyg editor which does the job.. (but i think a wysiwyg editor which generates bbcode just generates loads of problems.. i mean... it's kind of crazy to let the editor convert bbcode to XHTML .. the user edits XHTML .. and when storing the page the editor converts html back to bbcode.. sends it to the server.. and during rendering it is converted back to html.. so much conversion can't be the best solution ;) )

I don't remember any wiki that uses WYSIWYG editor (do you know any?), also I have a problem with forums that use WYSIWYG (?), but I agree that WYSIWYG is good thing if you have Blog application. I don't want wysywig at forums or wiki.

So, for blogs... In my opinion it is not a good idea to create WYSIWYG from a scratch. Too much work to support it.
I don't like TinyMCE but... I've used it every time I had to use WYSIWYG. This is because there is django-tinymce - reusable application that makes it much easier to integrate TinyMCE into own project.

Seems to me that images are thing that concerns you most. With tinymce it is possible to "link" WYSIWYG editor to custom image/file manager to allow users easily select previously uploaded images/files. django-tinymce integrates nicely with django-filebrowser to achieve that.
What more... Filebrowser allows you to generate different image sizes (thumbnails etc.).
I've used django-tinymce, django-filebrowser along with lightbox like effect (done by using external javascript library - I don't remember its name now but it was not lightbox2) and this worked (works).

In general I think that it would be good for SCT to be more reusable enabled. AFAIK currently it doesn't use much reusable apps (I remember djapian and sitemaps). As you said in first post, it is good to have some code handled by somebody else, so IMO filebrowser and tinymce are good candidates. The only issue might be with support for SCT groups (IMO this SCT feature is killer for most of reusable apps, as none of them uses it).

And why I don't like TinyMCE?
The main problem with TinyMCE for me is that it is not possible to serve it from different domain eg. static.mydomain.com because of cross site scripting issues. Also there is always a mess with styles - css from your application usually interfere with code generated by TinyMCE (possibly any other wysywig would also have this issue) so you have to check edit form (which is opened in iframe only with original tinymce styles) and output (that uses general css rules) if they look same (horrible).

i have also used django-tinymce and filebrowser before, mainly for http://www.surfcamps24.de/ .. but this only works if you have a "trusted" admin who modifys code. i wouldn't let every forum user use django-tinymce because it has too many features & co.. so i think the best would be to directly use tinymce so it can be customized and stripped down to the core..

i wonder, why don't you like wysiwyg editors for forums? is bbcode so much easier than wysiwyg? why so? i see no real advantage from bbcode... sure, most technical people are familiar with bbcode - but i guess everyone is familiar with a simple word-like wysiwyg :)

I'm not sure what you mean by 'too many fetures' in django-tinymce. For me it is just a plumber beetwen django and tinymce so if you want you can still strip down tinymce to the core. Just write appropiate config for django-tinymce in settings.py.

Herbert Poul said @ 2009-12-23 09:53:09:

i wonder, why don't you like wysiwyg editors for forums? is bbcode so much easier than wysiwyg? why so? i see no real advantage from bbcode... sure, most technical people are familiar with bbcode - but i guess everyone is familiar with a simple word-like wysiwyg :)

I don't like wysiwyg as a developer. I still have problems with proper styling of WYSIWYG generated code. For example, just a moment ago, customer has sent me an e-mail that he created a table (using tinymce) and now page looks strange. I've checked the code and I've found:

<div>
<table align="left">
(...)
</table>
</div>
<div>
bla bla bla
</div>

align="left" works like float:left, so 'bla bla bla' text is displayed at the right side of the table, not below. Arrrgh... typical "Clearfix" issue, but what to do with this in WYSIWYG...

i have to admit that creating tables with wysiwyg is a real PITA - but creating them with bbcode just as much :)

well ..this is why i would like to integrate the wysiwyg right into SCT.. to be able to perform more heavy cleanup of the generated HTML code.. (although .. i have no solution for the table-editing problem yet.. this would probably need more fixes on the javascript-side)