HOW-TO add an inline editor

[jharrop]

There is a wiki page on adding an inline editor but it is incomplete.  There are also several later posts asking how to do it.

I've just added an (experimental) inline editor for docx documents to my Alfresco 3 development environment, so I thought I'd briefly note the steps here.

The key class to look at is org.alfresco.web.bean.coci.EditOnlineDialog.

It contains the following:

   /**
    * Action listener for handle http online(inline) editing action. E.g "edit_doc_online_http" action
    *
    * @param event ActionEvent
    */
   public void handleHttpEditing(ActionEvent event)
   {      
      handle(event);

      Node workingCopyNode = property.getDocument();
      if (workingCopyNode != null)
      {
         ContentReader reader = property.getContentService().getReader(workingCopyNode.getNodeRef(), ContentModel.PROP_CONTENT);
         if (reader != null)
         {
            String mimetype = reader.getMimetype();

            // calculate which editor screen to display
            if (MimetypeMap.MIMETYPE_TEXT_PLAIN.equals(mimetype) || MimetypeMap.MIMETYPE_XML.equals(mimetype) 
|| MimetypeMap.MIMETYPE_TEXT_CSS.equals(mimetype)
                  || MimetypeMap.MIMETYPE_JAVASCRIPT.equals(mimetype))
            {
               // make content available to the text editing screen
               property.setEditorOutput(reader.getContentString());

               // navigate to appropriate screen
               FacesContext fc = FacesContext.getCurrentInstance();
               fc.getApplication().getNavigationHandler().handleNavigation(fc, null, "dialog:close:browse");
               this.navigator.setupDispatchContext(workingCopyNode);
               fc.getApplication().getNavigationHandler().handleNavigation(fc, null, "dialog:editTextInline");
            }
            else
            {               
               // make content available to the html editing screen
               property.setDocumentContent(reader.getContentString());
               property.setEditorOutput(null);

               // navigate to appropriate screen
               FacesContext fc = FacesContext.getCurrentInstance();
               fc.getApplication().getNavigationHandler().handleNavigation(fc, null, "dialog:close:browse");
               this.navigator.setupDispatchContext(workingCopyNode);
               fc.getApplication().getNavigationHandler().handleNavigation(fc, null, "dialog:editHtmlInline");
            }
         }
      }
   }
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

You can see that for certain MIME types, it uses the inline text editor.  For anything else marked inline editable, it uses the inline HTML editor.

To do something different, you have to modify this class.

To specify different behaviour for a docx, I added a clause:

else if (mimetype.equals("application/vnd.openxmlformats-officedocument.wordprocessingml.document")) {
‍‍‍

For the existing behaviours, config/alfresco/web-client-config-dialogs.xml contains

      <dialog name="editHtmlInline" page="/jsp/content/edit-html-inline.jsp" managed-bean="CCEditHtmlInlineDialog"
                 icon="/images/icons/edit_online_large.gif" title-id="editfile_description"
                 description-id="editfileinline_description" />

         <dialog name="editTextInline" page="/jsp/content/edit-text-inline.jsp" managed-bean="CCEditTextInlineDialog"
                 icon="/images/icons/edit_online_large.gif" title-id="editfile_description"
                 description-id="editfileinline_description" />‍‍‍‍‍‍‍

So for docx I simply added:

   

    <dialog name="editDocxInline" page="/jsp/content/edit-docx-inline.jsp" managed-bean="CCEditDocxInlineDialog"
                 icon="/images/icons/edit_online_large.gif" title-id="editfile_description"
                 description-id="editfileinline_description" />‍‍‍

      
Then you need corresponding:

• /jsp/content/edit-docx-inline.jsp


• CCEditDocxInlineDialog, and


• define managed bean CCEditDocxInlineDialog in source/web/WEB-INF/faces-config-beans.xml

Each of these can be copied from the existing ones.  The JSP is likely to require significant change though - this is where the work is, and the exact nature will depend on the editor you are integrating.

Having made these changes, rebuilt, and marked my docx inline editable, my custom inline editor launches 🙂

[jharrop]

The other half of the battle is to be able to save the edits.

That's done by org.alfresco.web.bean.coci.CheckinCheckoutDialog.editInline

The essence of that is:

            ContentWriter writer = property.getContentService().getWriter(node.getNodeRef(), 
                  ContentModel.PROP_CONTENT, true);
               writer.putContent(property.getEditorOutput());
‍‍‍‍‍

If you need to pre-process the editor output before writing it, you can do that by testing the MIME type.

For property.getEditorOutput() to work its magic, you jsp should contain:

<h:inputHidden id="editorOutput" value="#{CCProperties.editorOutput}" />‍

You'll need to make sure that your editor writes its output into that field when the user clicks the save button.

To do this I attached some javascript to the save button.  Here's how:

         <dialog name="editDocxInline" page="/jsp/content/edit-docx-inline.jsp" managed-bean="CCEditDocxInlineDialog"
                 icon="/images/icons/edit_online_large.gif" title-id="editfile_description"
                 description-id="editfileinline_description" show-ok-button="false">
                 <buttons>
                    <button id="finish-button"
                            label="Save"
                            action="#{DialogManager.finish}"
                            onclick="javascript:mySave()" />                 
                 </buttons>
         </dialog>
‍‍‍‍‍‍‍‍‍‍‍‍

@show-ok-button="false"  removes the default save button, and the <button> definition adds a new one, with @onclick which calls my Javascript to put the editor output into the editorOutput form field.

Hope this helps someone.

Jason

[avin_jss]

can you tell me which open source editor can we integrate to edit doc files ??? if that editor can edit docx that ll be best.