CKEditor 3 integration for Liferay 6

Juan Fernández
Juan Fernández
Less Than a Minute Read

 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

Page Comments
thumbnail
Joshua Asbury
15 Years Ago
Very nice. I've been knocking around with it in trunk, and it's a great improvement!
Please sign in to reply.
thumbnail
Kevin Beesley
15 Years Ago
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.
Please sign in to reply.
thumbnail
Juan Fernández Kevin Beesley
15 Years Ago
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
Please sign in to reply.
thumbnail
Jakub Liska Juan Fernández
15 Years Ago
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)
Please sign in to reply.
thumbnail
Juan Fernández Jakub Liska
15 Years Ago
We've just fixed that.
Thanks for the warning
Regards
Please sign in to reply.
thumbnail
Jakub Liska Juan Fernández
15 Years Ago
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();
Please sign in to reply.
thumbnail
Jakub Liska Juan Fernández
15 Years Ago
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 ?
Please sign in to reply.
thumbnail
Jonas X. Yuan Jakub Liska
15 Years Ago
@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.
Please sign in to reply.
thumbnail
Jakub Liska Jonas X. Yuan
15 Years Ago
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>
Please sign in to reply.
thumbnail
Jakub Liska Jakub Liska
15 Years Ago
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
Please sign in to reply.
thumbnail
Jonas X. Yuan Jakub Liska
15 Years Ago
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.
Please sign in to reply.
thumbnail
Jakub Liska Jonas X. Yuan
15 Years Ago
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
Please sign in to reply.
thumbnail
Jakub Liska Jonas X. Yuan
15 Years Ago
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
Please sign in to reply.
thumbnail
Jonas X. Yuan Jakub Liska
15 Years Ago
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 ...
Please sign in to reply.
Pablo M Mino
15 Years Ago
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...
Please sign in to reply.
thumbnail
Tejas Kanani
14 Years Ago
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.
Please sign in to reply.
Federico Gonzalez
14 Years Ago
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
Please sign in to reply.

Related Assets...

No Results Found

More Blog Entries...