CKEditor 3 integration for Liferay 6

 Hi guys!

For the last few weeks I've been working in a new WYSIWYG editor for Liferay 6. It's the new version of FCKEditor, called CKEditor. 

Which are the improvements of the new version? The main improve is accessibility: it is WAI-AA and WCAG 1.0 compliant. It implements advanced screen readerssupport, it's fully keyboard navigable, it has natural TAB key usage with tabindex support and operating system High Contrast support.

It is also compatible with most Internet browsers and operating systems, including Internet Explorer 6+, Firefox 2+, Safari 3+, Google Chrome and Opera 9.5+:

You can read more about its features in their web

And here you have a screenshot!

isn't it beautiful? :)

Regards

Juan Fernández

[Rafał Piotrowski]

> isn't it beautiful?

Yes, it's very nice

[Faisal K]

Which Liferay Version do u think CK Editor will be available as part of Liferay bundle?

[Juan Fernández]

It'll be available in the next release (Liferay 6.0)

[Joshua Asbury]

Very nice. I've been knocking around with it in trunk, and it's a great improvement!

[Jonas Yuan]

Very nice! Thank you, Juan.

[Ziggy ©]

nice

[Kevin Beesley]

Will the new integration of the editor allow the ability to use CKEditor's functionality of going full screen? Currently in 5.2.3 the FCKeditor is within an iframe which does not perform the full screen functionality contained in the editor. This is a highly requested feature in our environment. If not I believe we plan on creating a hook to implement this functionality in Liferay 6.

[Juan Fernández]

Hi Kevin:
there's already a tick for this issue (http://issues.liferay.com/browse/LPS-7436), but I can't tell you when I am going to implement it.
The only thing I can tell you is: if you're in a hurry, develop it be yourself, if not, watch the issue to know when it's solved.
Regards

[Jakub Liska]

Hi Juan,

ckeditor doesn't show up in Opera. And in other browsers, it shows up only when the entire page is rendered, but not for instance if one of tabs is rendered separately (when liferay-ui:tabs is used). Then there is some javascript library missing (some properties are undefined)

[Juan Fernández]

We've just fixed that.
Thanks for the warning
Regards

[Jakub Liska]

I'm using CKEditor according to Liferay User Interface development. Just so you know :

Firefox is OK, it is hard to say what is not defined in when chrome is used and regarding the Opera browser :

Uncaught exception: TypeError: 'parent._2_WAR_brokerageportlet_initEditor' is not a function

Error thrown at line 11, column 3 in initEditor() in

http://localhost:8080/html/js/editor/editor.jsp?p_l_id=10164&p_p_id=2_WAR_brokerageportlet&p_main_path=%2Fc&doAsUserId=0YbV9Obu1OI%3D&doAsGroupId=0&editorImpl=ckeditor&initMethod=_2_WAR_brokerageportlet_initEditor&cssPath=%2Fhtml%2Fthemes%2Fclassic%2Fcss&cssClasses=portlet+brokerage-portlet:

setHTML(parent._2_WAR_brokerageportlet_initEditor());

called from line 1, column 0 in <anonymous function>(event):
initEditor();

[Jakub Liska]

I see,

there is a mistake in Liferay User Interface development book.
it is using aui:script with function definition prefixed with <portlet:namespace />... It should be without it, right ?

[Jonas X. Yuan]

@Jakub and @Juan, Thanks. This is a UI bug in Opera. I can produce the same in Opera 11 with revision 68559 - the CKEditor did not get displayed in Opera properly.

[Juan Fernández]

@Jonas: have you opened a ticket for this? In that case, can you tell me the LPS code? Thanks!

[Jakub Liska]

Also in chrome it only works as follows :
<aui:script>
function initEditor() {
return 'scott was here';
}
</aui:script>

But not like this:

<aui:script>

function <portlet:namespace />initEditor() {
return 'scott was here';
}
</aui:script>

[Jakub Liska]

Sorry, that's a nonsense...It works only because it is not called.. if it was, it wouldn't load at all because there's something wrong

[Jonas X. Yuan]

Thanks, @Jakub and @Juan. I just opened a ticket.

http://issues.liferay.com/browse/LPS-14394

It seems it is working well in Chrome 8.0, FF 3.6.13, Safari 6, but it has a UI issue in Opera 11.

[Jakub Liska]

In chrome it doesn't work, when the CKEditor is rendered within a tab of liferay-ui:tabs .... If you render the entire home page it is, but if only one tab is rendered, there's something wrong with JS dependencies

[Jakub Liska]

The error is

Uncaught TypeError: Cannot read property 'length' of undefined - ckeditor.js:86 ... if you look at there in browser, it's hard to figure out what is going on

[Jonas X. Yuan]

Hi Jakub, Thanks. I just added your comments at

http://issues.liferay.com/browse/LPS-14394

This is very helpful to narrow down the issue. A ton of thanks to you.

By the way, you may update above ticket directly in JIRA ...

[Pablo M Mino]

Can you configure it via portal.properties? I haven't worked with it too much but I assume it uses document_library folder as base_url right?

I would like to point somewhere else...

[Hoang-Linh NGUYEN]

How to upgrade LF 5.2.3 to CKEditor 3?

[Jonas X. Yuan]

Hi Hoang-Linh, it is better to use CKEditor 3.x in LF 6.x. In LF 5.x, you should use FCKEditor 2.x. Do you agree?

[Tejas Kanani]

I am not able to make scayt enable by default in Liferay 6 particular in IE browser.

I've added below lines in html\js\editor\ckeditor\ckeditor.jsp

CKEDITOR.config.scayt_autoStartup = true;

But when I create any web content using CKEditor after make it autoStart=true, it's not showing scayt by default enable.

When I cleared my cookie and Refresh the page again, It worked and it shows me enable.

But when I refresh the page again, same result. It's disabled again .
I am not sure why it's behaving like that.

Any idea what could be the issue ? Am I missing any other thing ? Any thoughts/suggestions would be appreciated.

[Federico Gonzalez]

Hi Juan,

I'm making a plugin for ckeditor and liferay. How could I access ckeditor object into DOM ?

I can't find it..

I want to do somethink like this:
CKEDITOR.instances.cke_CKEditor1.insertHtml("blablabla");

But can't find CKEDITOR object

Thanks! Federico