Blogs

Blogs

New feature for Liferay 7: Autocomplete lists in CKEditor

Hi everyone!

As someone leaked earlier this week in this tweet, we're dedicating a lot of effort into improving content creation in the next version of Liferay Portal.

One of the first things we are trying to do, is to improve the portal intelligence and its ability to predict, find and suggest what the user may be looking for when writing some content.

With that in mind we've created a plugin for CKEditor which will allow developers to provide a series of autocomplete lists based on the user input. Check out what you can accomplish with a simple configuration step like the following:

ckEditor.config.autocomplete = {
 trigger: [
  {
   resultTextLocator: 'screenName',
   term: '@',
   tplReplace: '<a href="{portraitURL}">@{screenName}</a>',
   tplResults: '<div class="taglib-user-display><span class="user-name">{fullName}@{screenName}</div>',
   source: '<%= autoCompleteUserURL.toString() %>'
  },
  {
   resultTextLocator: 'title',
   term: ':',
   tplReplace: '<div><img class="img-polaroid" src="{url}"</img></div>',
   tplResults: '<div><img class="img-rounded" src="{url}">{title}</div>',
   source: '<%= autocompleteImageURL.toString() %>'
  }
 ]
};
 

 

We are still planning which kind of features to ship by default. Amongst others, we're considering:

  • Autocomplete of users based on screenName
  • Autocomplete of friendly urls to site pages
  • Autocomplete of related (by site or author) blog entries
  • Autocomplete of assets in the document library
  • Autocomplete of emojis
  • [...]
  • Any other list you may think of ;)

 

So, what do you think? What kind of options would you like to see implemented for this feature?

This will be an awesome feature. Keep up the good work.

Ahamed Hasan
Author, Liferay Cookbook
http://mpowerglobal.com/download-cookbook
Wow, looks amazing! It would be even more amazing if you could adapt it and add it to the CKEditor repository: http://ckeditor.com/addons/plugins/all
Seb, we've considered that, and will try to find time to do it once we have it ready. We've already developed it as a CKEditor plugin, but it heavily depends on YUI3 and some other modules, so we'll need to figure out the best way to package it.
Hi Chema,

Is this already packaged in the liferay portal download? I just downloaded the latest version but not seeing it. can you advise?

thanks,
-J
Hey J dart!

Sorry for the delay in answering you... I wasn't notified of new answers here emoticon

The autocomplete code is in master, so you could already start using it. You can check the mentions plugin for a full example of how to enable it

https://github.com/liferay/liferay-plugins/tree/master/portlets/mentions-portlet/docroot/META-INF/custom_jsps/html/js/editor

Let me know if you have any more questions.

Cheers,
Chema