How To Customize the Default Text Editor of Liferay in Custom Portlet

Ever wanted to use a rich text editor (RTE) such as the CK Editor in your custom portlet?
Implementing an RTE in your view is (almost) as simple as using a jsp-tag:

<aui:field-wrapper label="description">
    <liferay-ui:input-editor name="descriptionEditor" toolbarSet="liferay-article" initMethod="initEditor" width="200" />
    <script type="text/javascript">
        function <portlet:namespace />initEditor() { return "<%= UnicodeFormatter.toString("default content") %>"; }
    </script>
</aui:field-wrapper>

The liferay-ui:input-editor tag does not have a label attribute. To include a label for the RTE, wrap the tag in a aui:field-wrapper tag as shown above.
Also, the liferay-ui:input-editor needs an initMethod defined in javascript that sets the initial value of the RTE. In my example above, the RTE will be initialized with the value "default content". In your own view, obviously you would want to exchange "default value" for a bean value.

Editor toolbar

Now, the code above works great and will provide you with a toolbar (the set of actions/operations in the editor) that looks like the one used when editing wcm-articles.
Liferay comes with four different predefined toolbar sets:

• liferay
• liferay-article
• email
• edit-in-place

Each toolbar sports its own set of actions/operations. The most slimmed one being the email toolbar set.
The toolbar sets are defined in a file called ckconfig.jsp which you'll find in /webapps/ROOT/html/js/editor/ckeditor/ in your Liferay bundle.

Changing a predefined toolbar

The toolbar set called "liferay-article" is defined in ckconfig.jsp like this:
CKEDITOR.config.toolbar_liferayArticle = [
    ['Styles', 'FontSize', '-', 'TextColor', 'BGColor'],
    ['Bold', 'Italic', 'Underline', 'Strike'],
    ['Subscript', 'Superscript'],
    '/',
    ['Undo', 'Redo', '-', 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'SelectAll', 'RemoveFormat'],
    ['Find', 'Replace', 'SpellChecker', 'Scayt'],
    ['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],
    ['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'],
    '/',
    ['Source'],
    ['Link', 'Unlink', 'Anchor'],
    ['Image', 'Flash', 'Table', '-', 'Smiley', 'SpecialChar', 'LiferayPageBreak']
];
Thus, if we would like to remove the option for TextColor, we would need to remove this entry in the definition. This can be done by replacing the ckconfig.jsp file with a custom-jsp hook. If you don't know how to implement a custom jsp hook, you can check this wiki page.

Adding a new toolbar

Similar to the procedure above, you may add a new custom toolbar by adding a toolbar definition to the ckconfig.jsp file with a custom-jsp hook. Let's create one called "slimmed" that is just a simple editor with the option to make text bold, italic and underline. Also let's add the option to insert links:
CKEDITOR.config.toolbar_slimmed = [
    ['Bold', 'Italic', 'Underline'],
    ['Link', 'Unlink']
];
Deploy your custom jsp hook. Now change your liferay-ui:input-editor to use the slimmed toolbar set:
<aui:field-wrapper label="description">
    <liferay-ui:input-editor name="descriptionEditor" toolbarSet="slimmed" initMethod="initEditor" width="200" />
    <script type="text/javascript">
        function <portlet:namespace />initEditor() { return "<%= UnicodeFormatter.toString("default content") %>"; }
    </script>
</aui:field-wrapper>

How to overcome " float:right" issue in IE7 ( css issue )

This Issue is common that ," float : right " will not work in IE7 ,to overcome that we can use as follows

Example :
.css :

.float-right  {
     float : right;

}

.ie7 .float-right {
    position : absolute;
   right : 15px;
}

Removing Dotted line to Anchore Tag or <a> in IE

This is one of the Big Issue ,that IE browser will display the "Dotted Line " ,when you "hover","visited" and "active".

 .css

a , a:hover , a:visited , a:active {
         border:none;
         outline:none;
}

Display * rather than Required label in AUI form

You need the get the label value from the " Language.properties " file rather than giving direct value in the " label " attribute in the AUI input tag.

example:-

Language.Properties : -

first-name-req = First Name <em class="star"> * <em>

email-req = Email Id <em class="star"> * <em>

phone-req = Mobile Number <em class="star"> * <em>

.jsp page :-

<aui:form name="fm" method="POST" action="<%=customerURL%>" inlineLabels="true">


<aui:input name="firstName" label="first-name-req" value='<%= %>' autocomplete="off">
<aui:validator name="required" />
<aui:validator name="minLength" errorMessage="Firs Name can not be less than 5 characters. Please try again" >5</aui:validator>
<aui:validator name="maxLength" errorMessage="First Name is too long. Please try again" >75</aui:validator>
</aui:input>

<aui:input name="emailId" label="email-req" value='<%= %>' autocomplete="off">
<aui:validator name="required" />
<aui:validator name="alphaNumeric" />
<aui:validator name="maxLength" errorMessage="First Name is too long. Please try again" >256</aui:validator>
</aui:input>

<aui:input name="phoneNo" label="phone-req" value='<%= %>' autocomplete="off">
<aui:validator name="required" />
<aui:validator name="number" />
<aui:validator name="minLength" errorMessage="First Name is too long. Please try again" >10</aui:validator>
</aui:input>

</aui:form>

css :-
.star {
   color : red ;
}

.aui-label-required {
 display : none;
}