Thursday 26 January 2012

Changing Liferay Journal's(Web content's) abstract text area to richtext editor.

             Sometimes it is needed to use some html tags for liferay web content's abstracts, but this field is simple text area and it is not user friendly to put tags by hands. So, I decided to change abstract textarea to richtext editorm I will use Hook-plugin for this.
Here you can find how to use rich text editor, so I tried to implement this solution.

    First, I fount that this jsp (html/portlet/journal/article/abstract.jsp) is responsible for rendering abstract page. By reviewing it you can find that this is our text field that I want to replace with richtexteditor:


    Second, I replaced it with:
 
 
  
 


   
    and add some javascript for proper working of richtext editor:

  function initSummaryEditor() {
   return document.fm1.description_<%= Validator.isNotNull(toLanguageId) ? toLanguageId : defaultLanguageId %>.value;
  }
  
  function saveAbstract() {
   document.fm1.description_<%= Validator.isNotNull(toLanguageId) ? toLanguageId : defaultLanguageId %>.value = window.summary.getHTML();
  }
 

    Optionally it is possible to limit toolbar set of richtext editor, as written here.

     Pay attention how I hid original textarea field, I used span instead of type="hidden", because this field are language dependent and if it will be hidden it removes language dependings and will not work properly.
Also for initialising richtext editor original field should be used, in other way you will get some additional xml with language description, which will broke your html.

Finally you willget this screen for changing abstracts of web content:

Paul

No comments:

Post a Comment