WYSIWYG editors for Wiki Creole and BBCode in Liferay 6.1

You might be already aware of that, but for the others - Liferay 6.1 will have WYSIWYG editors for Wiki Creole and BBCode.

You may use the first one in order to create Wiki pages and the second one - to write messages in Message boards. Actually, you can try Wiki editor right now - it was backported to 6.0 and it is already available on Liferay site (edit or create a new Wiki page in order to check it).

WYSIWYG editor for Message boards will be available in Liferay 6.1.

 

The current approach to write Wiki articles or BBCode postings and its issues

The user opens an editor (which is often simple textarea), writes the text and then applies some formatting on it, using special syntax. This might be Wiki Creole 1.0 or BBCode. Secondly, a Wiki or BBCode engine parses the input and generates (X)HTML code.

For example, the following Wiki Creole code:

**bold**

should generate this XHTML code:

<strong>bold</strong>

Here is the same code, but created following BBCode syntax:

[b]bolded text[/b]

This is very simple example and the syntax is easy to remember. The things get more complicated, when you have complex Wiki page or message. It is not so easy to remember the syntax for tables, ordered and unordered lists (especially when they are deeply nested), links, images and so on. Moreover, the users are often unaware of some important rules - for example, according to Wiki Creole 1.0 specification bold and italics can not cross paragraphs. Also, it is often hard for people to check code for validity. That's why most sites provide a 'Preview' button. Clicking on it shows how the page will look after publishing. If you have syntax error, you should go back, find and correct it manually, then preview again and so on. This is time consuming and usually very annoying.

In order to resolve these issues, some sites provide some kind of limited editors. The idea is that user selects some text, then clicks on a button, say “bold” and the editor surrounds the selected text with corresponding tags. Better than nothing, but the user is still unaware of how the page or post will look after publishing, so he/she should preview it in order to avoid some errors.

 

How we solved these issues in Liferay Portal

We decided to provide a WYSIWYG editor which transparently outputs Wiki Creole or BBCode. The user uses this text editor as any other word processor - MS Word, LibreOffice Wrtiter, etc. In the same time, she is able to switch to 'Source' mode and edit the code directly. Once she switches back to WYSIWYG mode, the editor will apply her changes.

As you know, there are a few popular Web text editors. One of them is CKEditor and this is the default editor in Liferay Portal. We have not created something specific to CKEditor, neither we modified its source code. The code we wrote can be easily adopted for other editors too.

CKEditor outputs HTML code, but it has a nice feature, which is called Data Processor. Basically, an data processor transforms the input data to HTML and vice versa. This is very important, because the data might be anything - in our case that was Wiki Creole and BBCode.

So, we created two data processors. Both of them take the HTML, which CKEditor generates, parse it and create the corresponding code. They also ignore any special formatting, which cannot be translated to Wiki Creole code or BBCode. The final result is well formatted code, which we store in the database.

And what about the opposite process? As we mentioned, the user is able to click on ”Source” button. How should we convert Creole/BBCode back to HTML?

Well, it would be too expensive to send request to server to parse the text and return HTML code back, so we decided to create two JavaScript parsers – Wiki Creole 1.0 parser and BBCode parser. Luckily, we found a very good Wiki Creole parser and we decided to use it (despite we applied some minor modifications).

Unfortunately, with BBCode parser we had no such luck. There were some implementations, but they were very limited, badly written and XSS vulnerable. So, we had no other choice except to write our own from scratch. This parser is available here.

 

Translating JavaScript BBCode parser to Java

Once we finished with JavaScript parser, we found some differences in the way our server-side implementation processed the BBCode in comparison to JavaScript parser. In addition, the server-side parser had some other issues too, so we decided to replace it entirely. You may check the final result here.

The translating process was very fast, most of the code translated 1:1 to Java. We had only a few differences, mostly of them related to Regular Expressions. Also, the code had to be modified a bit in order to work in multi-threaded environment (credits to Brian Chan here).

 

Feedback

Liferay 6.1 is in beta now, so we would be extremely happy to receive some feedback from the excellent community of Liferay.

Go ahead, test it and say what you think about it!

Enjoy!

[Alexander Chow]

Great job Iliyan! Much better than the bbcode editor I wrote 6 years ago!

[Iliyan Peychev]

Thanks, Alex!

[Oliver Hagmann]

Great stuff! But: I just tried the editor in the community wiki and noticed that when adding a table and then switch to source mode and switch back to ckeditor mode, the table is not displayed as such anymore (the borders vanish). Also there's no possibility to add pictures besides editing the source. (using chrome on win7). I know this is probably not the place to write this but if you point me in the right direction I will happily do so elsewhere.

[Tom Garritano]

Well done!

[Iliyan Peychev]

Oliver,

About table borders - yes, on translating from HTML to Wiki Creole code we are currently not handling them. They are not mentioned in Wiki Creole 1.0 specification.
About adding pictures from WYSIWYG mode - this is currently not implemented. We will do it in 6.2 or in 6.1 EE.

[Iliyan Peychev]

Thanks, Tom!

[Joss Sanglier]

Interestingly enough, when I polled some of our community about whether they would want to use Wiki markup or not, the almost all said no - they would rather it was just straight HTML and ignore creole entirely.

Talking about editors, you should look at what a chap has been doing with TinyMCE for Joomla - http://www.joomlacontenteditor.net/

The optional image and file manager system is wonderful - drag and drop onto an upload dialogue, resizing and cropping and very slick looking. Worlds above CK's filemanager. You should try and persuade him to do something for liferay.

[Iliyan Peychev]

Hi Joss,

Yes, I know JCE - looks really good.

Btw, it is too late for 6.1, but in 6.2 we will change CK's filemanager entirely!

[Joss Sanglier]

Bless you!

I am just restyling the current one so it does not look quite so dated. Just playing with CSS, nothing more.