Paste images and docs right into Wiki - CKEditor

Introduction #

Have you ever tried to make a how-to or user-guide with allot of screen shots ? That is not a trivial task, grabbing images, saving them with filenames and then uploading as attachments and then finding which one was which. Used

In this Wiki I describe how configure (hook) Liferay to use a CKEditor pluging which lets you to :

  • Paste images right into the editor
  • Drag and Drop images right into editor
  • Drag and Drop files right into editor

All of these actions uploads the file as an attachment to the page and insert the appropriate <img or <a element right in your editor. Fantastic isn't it ? Here are some links about the plugin and how it works :

So here I will try to explain how to configure Liferay using a hook-plugin to use this functionality.

Overview #

This is actually pretty simple, when you fist find out how the CKEditor is set up in Liferay. The whole thing involves modifying two jsp files :

  • ckeditor.jsp : Setting up URLs for uploading images and files
  • ckconfig.jsp : Added one line at the end

    And creating to struts-actions
  • imageUploader : One used to upload files as attachments
  • getpageattachment : One for simple retrieval of the attachments.

The hook can be found on GitHub It is ready to be downloaded, build and deployed.

Some more details #

1. Adding the plugin #

That is simple. Just grab the plugin from the creators web-page ( See links above, i recommend to buy it, see notes at the end ) and put it in the hook under this path :

 / docroot / custom_jsps / html / js / editor / ckeditor / plugins 

2. Configure the CKEditor #

Even simpler. You just hook the ckconfig.jsp, by adding one line at the end of file:

CKEDITOR.config.extraPlugins = 'imagepaste';

3. "Configure" Liferay #

This involves modifying ckeditor.jsp and creating the two struts-actions mentioned earlier. Creating struts-actions is straight forward. I have learned struts-action|from this blog page. They are used for uploading and retrieving the attachments. I am sure there is other ways of doing it, let me know if you come up with something.

CKEditor uses internally the to attributes filebrowserImageUploadUrl and filebrowseUploadUrl . However Liferay does not set them, because Liferay uses the upload functionality inside the "Filebrowser" for uploading files instead. Since this plugin also needs these two, we have to specify them. That we do by hooking ckeditor.jsp.

                String uploadUrl="/c/portal/imageUploader";
		if (request.getAttribute("edit_page.jsp-wikiPage")!=null){			
			WikiPage wpage=(WikiPage)request.getAttribute("edit_page.jsp-wikiPage");

And then

			'<%= name %>',
				customConfig: ...,
				filebrowserBrowseUrl: ...,
				filebrowserImageUploadUrl: '<%=uploadUrl %>',
				filebrowserUploadUrl: '<%=uploadUrl %>',
				toolbar: ..

As mentioned earlier, the whole code can be explored or downloaded from Liferay-Wiki-ImagePaste at GitHub .

Important notes #

Getting the licenced version of the plugin #

I think the public version works only in Firefox, and the only pasting of images. However 15 Euro is not much to think about exactly. I suggest, pay it, it goes to a good cause. An excelent developer gets money to do make more good stuff.

Browser support #

From the developers page : This is supposed to work in FireFox, Chrome, Safari and Opera. In IE, only IE10.

Improvments #

There is much more to do

  • Support for editable content such as Blogs and Articles.
  • Support for destination of the uploaded images and files. Right now everything gets uploaded as attachments to the wiki-page. In some cases it would be better to upload into Document-library.
  • Other suggestions ?
0 Attachments
Average (0 Votes)
The average rating is 0.0 stars out of 5.