Configure CKEditor

How to configure the editor #

This article explains how you can configure the default editor of liferay (fckeditor) to suit your needs regarding:

  • Font
  • Size
  • Format

When an user edits an article, these formats get written directly in the generated HTML code, overwriting any predefined CSS definitions. There are several considerations while this is something you want to control. If you are using a CSS to define the design of your webpage or articles, you want to control the design by the CSS and not by the editor. Here you will learn where to configure the editor and how to change the options a user has to define the design of an article.

Configuration file #

The configuration file for fckeditor can be found at:

 Windows: //{liferay directory}\webapps\ROOT\html\js\editor\fckeditor//
 Unix: //{liferay directory}/webapps/ROOT/html/js/editor/fckeditor//

where {liferay directory} kann be c:\lportal on Windows or /opt/lportal on Unix. The file is named fckconfig.js. The configuration options have the structure FCKConfig.Value, where Value stands for a configurable option.

Changes for font #

Search in the file for the following line: FCKConfig.FontNames = 'Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana' ; To allow only Arial or Tahoma to be selectable by the user, change the option to:

  FCKConfig.FontNames = 'Arial;Tahoma' ;

If you don´t want that the user can select the font size, just leave the option empty:

  FCKConfig.FontNames = ' ' ;

Changes for font size#

Search in the file for the following line: FCKConfig.FontSizes = 'smaller;larger;xx-small;x-small;small;medium;large;x-large;xx-large' ;

smaller;larger;etc define the file sizes a user can choose from. So, to allow only small and medium, you have to change the line to the following:

  FCKConfig.FontSizes = 'small;medium' ;

If you don´t want that the user can select the font size, just leave the option empty:

  FCKConfig.FontSizes = ' ' ;

Changes for format #

Search in the file for the following line: FCKConfig.FontFormats = 'p;h1;h2;h3;h4;h5;h6;pre;address;div' ; To allow only headers h1, h2 and h3 and paragraphs to be selectable by the user, change the option to:

  FCKConfig.FontFormats = 'p;h1;h2;h3' ;

If you don´t want that the user can select the font size, just leave the option empty:

  FCKConfig.FontFormats = ' ' ;

Configure the layout #

Instead of emptying out all the possible options to prohibid the user to make changes, you can also simply deactivate the option. This way, the original configuration will be kept, but the user won´t be able to select the option.

Configuration file #

The configration file can be found at:

 Windows: //{liferay directory}\webapps\ROOT\html\js\editor\fckeditor//
 Unix: //{liferay directory}/webapps/ROOT/html/js/editor/fckeditor//

The name of the file is: fckconfig.jsp This is the file that fckeditor uses to displaying the editor.

Changes to the layout #

Look for a line starting with:

 FCKConfig.ToolbarSets["liferay"] = [

This defines the Liferay customization. Here you have to adjust the editor to meet you needs. In the example below, we will remove the option for the size and the layout, but will add the option for the format.

 **Original:**
 //FCKConfig.ToolbarSets["liferay"] = [
 ['FontName','FontSize','-','TextColor','BGColor'],//
 **Modified:**
 FCKConfig.ToolbarSets["liferay"] = [
 ['FontFormat','-','TextColor','BGColor'],

Save the change and you are done. The user will now be able to change the Format, but not the font type and name.

Related Articles #

How To's

0 Attachments
65670 Views
Average (0 Votes)
The average rating is 0.0 stars out of 5.
Comments
Threaded Replies Author Date
can i configure upload limit size for image. delang j July 16, 2009 1:15 AM
I need configuration folder's default upload... Sergio Romero August 13, 2011 9:49 AM
Is it possible to change the limit of the... Vijay Mudivedu August 17, 2011 4:39 AM
As for those who were like me using Liferay CE ... Achmed Tyrannus Albab March 15, 2012 4:03 AM
How to add "Table of contents" as creole... Ahamed Sakir August 23, 2012 12:02 AM
Can Styles combox change event be hadled using... Deepti Prasad June 20, 2013 2:12 AM
I'm not sure if I feel comfortable editing this... John Nguyen September 27, 2013 7:40 AM
How To Add Customize Fonts To Default HTML... Mohammad Hejazi November 11, 2014 11:03 PM

can i configure upload limit size for image.
Posted on 7/16/09 1:15 AM.
I need configuration folder's default upload image.
Posted on 8/13/11 9:49 AM.
Is it possible to change the limit of the attachments. Right Now I see the filesize limit as 3MB. Can this be increased to 20MB?
Posted on 8/17/11 4:39 AM.
As for those who were like me using Liferay CE 6.0.6 (and below i guess..which ever that uses CKEditors) you need to go to http://www.liferay.com/community/forums/-/message_boards/view_message/10991139#_­19_message_10997220 and fix the problem.

IF NOT YOU WOULDN'T BE ABLE TO MODIFY THE EDITOR.
Some of us already suffered ... and i am justt trying to help.
Posted on 3/15/12 4:03 AM.
How to add "Table of contents" as creole feature in wiki
Posted on 8/23/12 12:02 AM in reply to Achmed Tyrannus Albab.
Can Styles combox change event be hadled using ckconfig.jsp?
Posted on 6/20/13 2:12 AM.
I'm not sure if I feel comfortable editing this like so in the instructions. Would this be more ideal if its possible to create a hook portlet?
Posted on 9/27/13 7:40 AM.
How To Add Customize Fonts To Default HTML Editor Of Liferay?
Posted on 11/11/14 11:03 PM.