maandag 9 mei 2011

PrimeFaces inplace wrapped around editor

In Primefaces, there is a <p:inplace> component, which is a nice component to use for inline editing,
and a <p:editor>, which is an input component with rich text formatting capabilities.


But the two didn't really match. If one uses a <p:inplace> wrapped around a <p:editor>, the editor does not work as it is supposed to. The problem is that the editor is not designed to work in a container which is initially hidden. And that's just the behavior you depend on when you want to use an inplace component.


However, with this little trick, you can use an inplace component wrapped around an editor. The editor has a 'lazy' property. If you set this to true, you can initialize the editor at the moment it is shown:

  <h:form id="formWithInplace">
    <p:inplace id="inplaceid">
      <p:editor value="#{editorBean.value}" saveListener="#{editorBean.save}"
                                lazy="true" widgetVar="editorWidget"/>
    </p:inplace>

  </h:form>

So now we have an inplace wrapped around a lazy editor. The only thing we have to do now, is initialize the editor when the inplace is clicked (and the editor is shown). As the inplace does not have an 'onclick' parameter, we will use jQuery and the id of the inplace component:


  <script type="text/javascript">
    jQuery(PrimeFaces.escapeClientId('formWithInplace:inplaceid')).click(
      function(){
        editorWidget.init();
      }
    );
  </script>