Integration of CKEditor in Alfresco 4.2.2

The following steps are required to be performed in order to integrate CKEditor in Alfresco 4.2.2.

Steps :

     1)     

      Add the entries mentioned in ckeditor-config-custom.xml in your share-config-custom.xml. Location of ckeditor-config-custom.xml :

http://share-extras.googlecode.com/svn/trunk/CKEditor%20Form%20Control/ckeditor-config-custom.xml.sample

After performing step 1, edit your share-config-custom.xml file (shared\classes\alfresco\web-extension) and add the following code in it.

                     <dependencies>

                                                                <js src="/modules/editors/ckeditor/ckeditor.js" />

                                                                <js src="/components/editors/ckeditor/ckeditorloader.js" />

                        </dependencies>

        So your share-config-custom.xml would look something like :

<alfresco-config>

   <!-- cm:content type (existing nodes) -->

   <config evaluator="node-type" condition="cm:content">

      <forms>

           <dependencies>

               <js src="/modules/editors/ckeditor/ckeditor.js" />

               <js src="/components/editors/ckeditor/ckeditorloader.js" />

           </dependencies>

        <form>

        <field-visibility>

               <show id="cm:name" />

               …

               …

…

Also add the above <dependencies…/> in the following <config> section.

<config evaluator="model-type" condition="cm:content">

    2)     

      Now I am assuming that you already have the JAR file (downloaded from https://code.google.com/p/share-extras/downloads/detail?name=ckeditor-form-control-0.2.jar&can=2&q=

OR

https://addons.alfresco.com/addons/ckeditor-form-control

    3)      

      Extract/Open the JAR to a temporary location and start putting the contents inside it in your extension environment of Alfresco 4.2.2. NOTE: Do it carefully if you already have some other customized files added in your extension environment. Don’t directly copy the folders. Copy the custom files one by one. That is :

    4)     

     Copy  \ckeditor-form-control-0.2\alfresco\messages\   to   shared\classes\alfresco\messages\

    5)    

          Copy  \ckeditor-form-control-0.2\alfresco\site-data\   to   shared\classes\alfresco\web-extension\site-data\

    6)    

           Copy  \ ckeditor-form-control-0.2\alfresco\site-webscripts\  to  shared\classes\alfresco\web-extension\site-webscripts\

    7)    

         Copy \ ckeditor-form-control-0.2\alfresco\templates\   to   shared\classes\alfresco\web-extension\templates\

    8)    

          Copy \ ckeditor-form-control-0.2\org\springframework\extensions\surf\  to   tomcat\webapps\share\WEB-INF\classes\org\springframework\extensions\surf\

Comment out the values from the list of <property name=”configs”> that are not required.

It should be fine if you just keep this single entry :

 <value>classpath:alfresco/web-extension/ckeditor-config-custom.xml</value>

And comment out the rest (other two).

As you make this entry, you would need to put the file (ckeditor-config-custom.xml - http://share-extras.googlecode.com/svn/trunk/CKEditor%20Form%20Control/ckeditor-config-custom.xml.sample) in your shared\classes\alfresco\web-extension.

But as you already have made the entry (of the contents inside it) in your share-config-custom.xml; you may rename it to ckeditor-config-custom.xml.sample.

   9)    

        Copy ckeditor-form-control-0.2\META-INF\components\editors\    to   tomcat\webapps\share\components\editors\

   10)  

     Copy ckeditor-form-control-0.2\META-INF\modules\editors\ckeditor\   to   tomcat\webapps\share\modules\editors\ckeditor\

Also copy  ckeditor-form-control-0.2\META-INF\components\   to  shared\classes\alfresco\web-extension\site-webscripts\

And

Copy  ckeditor-form-control-0.2\META-INF\modules\   to   tomcat\shared\classes\alfresco\web-extension\site-webscripts\

   11)  

     The most important step – put the entries of your custom js and css files for ckeditor in form.js.ftl and form.css.ftl.

Location of form.js.ftl  &  form.css.ftl  - tomcat\webapps\share\WEB-INF\classes\alfresco\site-webscripts\org\alfresco\components\form\

The following entries will go inside form.js.ftl :

<@script type="text/javascript" src="${url.context}/res/components/editors/ckeditor/ckeditorloader.js" group="form"/>

<@script type="text/javascript" src="${url.context}/res/components/editors/ckeditor/config.js" group="form"/>

<@script type="text/javascript" src="${url.context}/res/modules/editors/ckeditor/ckeditor.js" group="form"/>

<@script type="text/javascript" src="${url.context}/res/modules/editors/ckeditor/config.js" group="form"/>

<@script type="text/javascript" src="${url.context}/res/modules/editors/ckeditor/lang/en.js" group="form"/>

<@script type="text/javascript" src="${url.context}/res/modules/editors/ckeditor/plugins/image/dialogs/image.js" group="form"/>

<@script type="text/javascript" src="${url.context}/res/modules/editors/ckeditor/plugins/styles/styles/default.js" group="form"/>

The following entries will go inside form.css.ftl:

<@link href="${url.context}/res/modules/editors/ckeditor/skins/kama/editor.css" group="form"/>

<@link href="${url.context}/res/modules/editors/ckeditor/skins/kama/dialog.css" group="form"/>

<@link href="${url.context}/res/modules/editors/ckeditor/contents.css" group="form"/>

In previous alfresco versions, the above entries were made in form.get.head.ftl but from 4.2.2 onwards it is deprecated; so we need to put the entries here (form.js.ftl and form.css.ftl).  It would be even great if we can override the above files and put them in extension environment.

   12)  

       Restart the server and check by creating a new HTML file or editing an existing HTML file (inline-edit).  If you have already restarted the server before, you don’t need to restart it again after making the above entries. Just refresh the webscripts from http://server:port/share/service/index and check the functionality.

Courtesy :

     a)      JAR download location :   https://addons.alfresco.com/addons/ckeditor-form-control

     b)      Source code :  https://github.com/share-extras/ckeditor-forms

*Directly putting the JAR into shared/lib and adding the ckeditor-config-custom.xml file in extension environment  didn’t work; so I have followed the manual procedure of putting the custom files in ext envt.

Thank you for going through the blog.

Also do provide your inputs/suggestions/feedback on this.