« Back

CKEditor 3 integration for Liferay 6

Company Blogs February 10, 2010 By Juan Fernández Staff

 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

Threaded Replies Author Date
> isn't it beautiful? :) Yes, it's very nice :) Rafał Piotrowski February 11, 2010 12:37 AM
Which Liferay Version do u think CK Editor will... Faisal K February 11, 2010 2:27 AM
It'll be available in the next release (Liferay... Juan Fernández February 11, 2010 2:29 AM
Very nice. I've been knocking around with it... Joshua Asbury February 11, 2010 5:41 AM
Very nice! Thank you, Juan. Jonas Yuan February 11, 2010 5:58 AM
nice Ziggy © February 21, 2010 1:30 PM
Will the new integration of the editor allow... Kevin Beesley February 23, 2010 6:54 AM
Hi Kevin: there's already a tick for this issue... Juan Fernández February 23, 2010 7:01 AM
Hi Juan, ckeditor doesn't show up in Opera.... Jakub Liska December 20, 2010 5:42 AM
We've just fixed that. Thanks for the warning... Juan Fernández December 20, 2010 6:23 AM
I'm using CKEditor according to Liferay User... Jakub Liska December 20, 2010 6:26 AM
I see, there is a mistake in Liferay User... Jakub Liska December 20, 2010 6:38 AM
@Jakub and @Juan, Thanks. This is a UI bug in... Jonas Yuan December 20, 2010 6:44 AM
@Jonas: have you opened a ticket for this? In... Juan Fernández December 20, 2010 6:45 AM
Also in chrome it only works as follows :... Jakub Liska December 20, 2010 6:48 AM
Sorry, that's a nonsense...It works only... Jakub Liska December 20, 2010 6:56 AM
Thanks, @Jakub and @Juan. I just opened a... Jonas Yuan December 20, 2010 7:03 AM
In chrome it doesn't work, when the CKEditor is... Jakub Liska December 20, 2010 7:08 AM
The error is Uncaught TypeError: Cannot read... Jakub Liska December 20, 2010 7:26 AM
Hi Jakub, Thanks. I just added your comments at... Jonas Yuan December 20, 2010 7:46 AM
Can you configure it via portal.properties? I... Pablo M Mino May 4, 2010 6:23 AM
How to upgrade LF 5.2.3 to CKEditor 3? Hoang-Linh NGUYEN June 21, 2010 1:52 AM
Hi Hoang-Linh, it is better to use CKEditor 3.x... Jonas Yuan December 20, 2010 7:11 AM
I am not able to make scayt enable by default... Tejas Kanani April 8, 2011 11:49 PM
Hi Juan, I'm making a plugin for ckeditor and... Federico Gonzalez July 13, 2011 5:55 AM

> isn't it beautiful? emoticon

Yes, it's very nice emoticon
Posted on 2/11/10 12:37 AM.
Which Liferay Version do u think CK Editor will be available as part of Liferay bundle?
Posted on 2/11/10 2:27 AM.
It'll be available in the next release (Liferay 6.0)
Posted on 2/11/10 2:29 AM in reply to Faisal K.
Very nice. I've been knocking around with it in trunk, and it's a great improvement!
Posted on 2/11/10 5:41 AM.
Very nice! Thank you, Juan.
Posted on 2/11/10 5:58 AM.
Posted on 2/21/10 1:30 PM in reply to Jonas Yuan.
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.
Posted on 2/23/10 6:54 AM.
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
Posted on 2/23/10 7:01 AM in reply to Kevin Beesley.
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...
Posted on 5/4/10 6:23 AM.
How to upgrade LF 5.2.3 to CKEditor 3?
Posted on 6/21/10 1:52 AM.
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)
Posted on 12/20/10 5:42 AM in reply to Juan Fernández.
We've just fixed that.
Thanks for the warning
Regards
Posted on 12/20/10 6:23 AM in reply to 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_broker­ageportlet&p_main_path=%2Fc&doAsUserId=0YbV9Obu1OI%3D&doAsGroupId=0&editorImpl=c­keditor&initMethod=_2_WAR_brokerageportlet_initEditor&cssPath=%2Fhtml%2Fthemes%2­Fclassic%2Fcss&cssClasses=portlet+brokerage-portlet:

setHTML(parent._2_WAR_brokerageportlet_initEditor());

called from line 1, column 0 in <anonymous function>(event):
initEditor();
Posted on 12/20/10 6:26 AM in reply to Juan Fernández.
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 ?
Posted on 12/20/10 6:38 AM in reply to Juan Fernández.
@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.
Posted on 12/20/10 6:44 AM in reply to Jakub Liska.
@Jonas: have you opened a ticket for this? In that case, can you tell me the LPS code? Thanks!
Posted on 12/20/10 6:45 AM in reply to Jonas X. Yuan.
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>
Posted on 12/20/10 6:48 AM in reply to Jonas X. Yuan.
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
Posted on 12/20/10 6:56 AM in reply to Jakub Liska.
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.
Posted on 12/20/10 7:03 AM in reply to 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
Posted on 12/20/10 7:08 AM in reply to 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?
Posted on 12/20/10 7:11 AM in reply to Hoang-Linh NGUYEN.
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
Posted on 12/20/10 7:26 AM in reply to 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 ...
Posted on 12/20/10 7:46 AM in reply to Jakub Liska.
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. emoticon

But when I refresh the page again, same result. It's disabled again emoticon.
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.
Posted on 4/8/11 11:49 PM.
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
Posted on 7/13/11 5:55 AM.