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