Sphene Community Tools

I'm making a site which uses sphboard for its forum, and I plan to use it as a starting point and modify it over time to meet my needs, that's where a forum project like this truly shines against the massive ones like phpBB, where I get lots of stuff I don't need.
For the same reason, when needing a wysiwyg bbcode editor I immediately avoided things like tinymce(its js file is 161KB after compression!) and made one myself.

I started with the one here http://corpocrat.com/2008/07/30/lightweight-php-wysiwyg-html-editor/ and added a lot of functionalities. It's still small, under 10KB of javascript code in total, before compression. However it did take me much more time than expected to get this thing to work cross-browser, since they all implement things in different ways...

To use it you don't need to modify the source of sphboard at all. Everything I wrote was javascript, it simply replaces the textarea, converts the bbcode to html and displays it. When you submit the form it converts the html back to bbcode, copies it to a hidden field with the same name of the textarea and that's it. If javascript is disabled, nothing happens so it gracefully degrades to the native interface.

I used about 100 lines of regex replace to do the conversions between html and bbcode, that's apparently too little code for this complex job, especially when different browsers generate different html. Thus, I wouldn't say the conversions are perfect, in fact there are already some known issues now that I don't think can be solved easily. But those are all unlikely situations in real-life, and even when it breaks, it won't generate a mess, just certain styles are not applied. Generally it should work the best on IE6/7, with no known problems as of now, I also tested it with FF2/3, Opera 9, Safari 3.2(win) and Chrome 0.4, all worked reasonably well. The tests are still very brief though, so your feedback and bug reports are much welcomed:)

So this is a picture of how it looks like:


To use it do the following:
1.Copy editor.js, editor.css, button icons and smilies(of course you can use different smilies, just modify the code to suit their filenames and sizes) to appropriate directories.
2.Include editor.js and editor.css into the template for posting, which is sphboard\post.html
3.Open sphboard\_displayPostForm.html, search for

<table class="sphboard form">
    {{ form }}
</table> 

This is the code used to generate the form controls, insert the content of inline.js right below it, so that the textarea will be replaced immediately after it's generated.
4.Add "onsubmit=doCheck();" to the post form, and add "doCheck();" to the first line of the doPreview() function, so that before posting and previewing the html is converted back to bbcode and put into the right place.
5.Edit various places in the javascript code to reflect the path of editor.css and the image files.

That should be it. Although it's designed to work with sphboard, it should work anywhere with an textarea, just modify the code and use the name and id of the new textarea instead of old ones.

Herbert, congratulations and thanks for this great work:)
And a question: while testing my code I found that when posting something with a (code) section in it sometimes these is an error saying relation sphwiki_wikisnip doesn't exist, since I didn't include the wiki app. I don't need the wiki app so I hope there is a way around this...

Updated: Added "undo" and "redo" buttons, now let's call it version 0.1:)
Updated: Version 0.2. Bugfixes, and a new feature: if you hit enter twice in a quote, it splits the quote.

Notice: Download the LAST file, since it's the newest version.

--- Last Edited by lootgoal at 2008-12-01 10:11:53 ---

oh my god, i love it ! :)

can i include it in SCT out of the box ? that would be really great :)
(can i also use the smileys and icons ?)

i always hesitated to create a wysiwyg editor for bbcode because i figured it would be way too much work .. but .. this is amazing :) great work

i only have one small problem .. on firefox my site does not finish loading.. (at least not on the development server) although the editor is displayed perfectly and works - have you experienced anything similar ?

thanks a lot for sharing the code :)

Herbert, yes I also have this problem...
That's because I have this line:
myeditor.write('<html><head><link rel="stylesheet" href="/static/editor.css"/></head><body>' + content + '</body></html>');

If you change it to "myeditor.body.innerHTML = content;" the ff problem won't occur, however once I try to add the css it behaves that way, and I don't know why... It's fine in all other browsers I tested.
You need to add this css file to display quotes and codes correctly, or maybe you can add the string to the body HTML and delete it when converting to bbcode if you really hate the problem..
Edit: Ouch! That was my fault, I wrapped "myeditor.open" and "myeditor.close" around the "myeditor.write" and it's solved! You can download the new zip or do the simple editing yourself.

Oh, and it's my pleasure that you include it in SCT:)
The icons are from silk icons http://www.famfamfam.com/, you can read his terms.
The smileys are widely used in the Chinese internet and it's impossible to find where they originated..It should be OK to use at least for free projects and websites I guess.
A minor thing, it seems your board doesn't support (color=orange), so...


--- Last Edited by lootgoal at 2008-11-29 02:55:42 ---

nice, it works now :) the only other problem i've yet encountered is that you can't insert something within a quoted text.. (usually pressing enter twice would split the [ quote ] and you can reply to a specific part of it) - it's not a big problem.. but do you see a simple way how this could be fixed ?


anyway .. i only have to figure out a way to integrate the wysiwyg editor in a way that works with the multiple-renderers feature .. and i'll add it to SCT ..
i guess i will stick with the simplest way .. the wysiwyg editor is only available if there is only one renderer configured.. and it is the bbcode renderer - that's not all that nice since the template has to have something bbcode specific in it.. but it's good enough for now i guess :)

Well, that's indeed a useful feature, after looking at the docs I think it should be doable without too much work, I'll probably do it tomorrow, along with fixes to some relatively big issues I have found.

Done.:) You can arbitrarily nest quote and code blocks and it would split the quotes one level at a time.
Works best on IE and FF, on Opera/Safari/Chrome it works but less elegantly, since I haven't figured out a way to set cursor position in these browsers, I currently insert "---" between the splitted quotes so that you can move your cursor there yourself...

And it seems there is a bug with the bbcode renderer, eg, for the code: (b)text1(code)text2(/code)text3(/b)
text3 should be bold, but it's not.

text1

text2

text3

I finally committed your WYSIWYG editor into SCT's trunk :)

it is still turned off by default though - because i would like to have a few people testing it before it gets the default ;)

it can be tested right here on sct.sphene.net by adding the GET parameter wysiwyg=1 to any post or reply form.. for example:
http://sct.sphene.net/board/reply/14/1467/?quote=1467&wysiwyg=1

lootgoal, thanks again for your great work ! :) would you mind giving me your real name so i can add you to the AUTHORS file ? may i add your email address and/or website URL ?

Thanks:)
My new website will launch in around a month, I'll contact you then.

Why aren't you use tinyMCE as link in <head> src=code.google.../tinyce.js. </head> etc

It allow you reduce traffic in your site

Why is tinyMCE as bad idea to use there in such case?