You are viewing a plain text version of this content. The canonical link for it is here.
Posted to dev@lenya.apache.org by Apache Wiki <wi...@apache.org> on 2005/12/06 22:39:52 UTC

[Lenya Wiki] Update of "HowToIntegrateFCKEditor" by BobHarner

Dear Wiki user,

You have subscribed to a wiki page or wiki category on "Lenya Wiki" for change notification.

The following page has been changed by BobHarner:
http://wiki.apache.org/lenya/HowToIntegrateFCKEditor

The comment on the change is:
Added fckeditor.xmap file, to consolodate some of the steps, simplified some.

------------------------------------------------------------------------------
  = Integrating the FCKeditor with Lenya =
  
- This is still very much a work in progress.  This will get the famous FCKeditor (which we have nicknamed "Fred" to reduce snickering) to load with content, save the content, asset upload and insertion, and link creation.  However, validation still needs to be implemented when saving.  And we've only tried this with FCKeditor 2.1 and Lenya 1.2.3/1.2.4.  Full credit for all this goes to K. Haenni.
+ This is still very much a work in progress.  This will get the famous FCKeditor (which we have nicknamed "Fred" to reduce snickering) to load with content, save the content, and link to assets.  However, validation still needs to be implemented when saving, and the asset upload portion is not quite ready.  We've only tried this with Lenya 1.2.3/1.2.4 and FCKeditor 2.0/2.11.  Full credit for all this goes to K. Haenni.
  
- 1. Make sure that Fred (the FCK Editor) is in the `lenya/webapp/lenya/resources/fckeditor` directory.  This can be downloaded from http://www.fckeditor.net/.  Remove any unnecessary folders and files in the fckeditor directory (anything that begins with an “_”).
+ 1. Download Fred (the FCK Editor) from http://www.fckeditor.net/ into a new `lenya/webapp/lenya/resources/fckeditor` directory.
  
- 2. Download [attachment:invokeEditor.js] to a new `lenya/webapp/lenya/resources/fckeditor` directory.
+ 2. Download [attachment:invokeEditor.js] into that same `lenya/webapp/lenya/resources/fckeditor` directory.
  
  3. Add the following to `lenya/webapp/lenya/resources/fckeditor/fckconfig.js` after the line `FCKConfig.ImageDlgHideAdvanced` (around line 112):
  
@@ -20, +20 @@

  		path = value.substring(5,value.length);
  	}
  }
+ var filemgr = '/fckeditor/filemanager/browser/default/browser.html';
  }}}
  
- Then, modify the `FCKConfig.LinkBrowserURL` and `FCKConfig.ImageBrowserURL`:
+ IMPORTANT:  Set filemgr (above) to start with your servlet context root (e.g. '/lenya/fckeditor/...') if you aren't using Jetty.
+ 
+ Then, modify the `LinkBrowserURL`, `ImageBrowserURL` and `FlashBrowserURL` values as follows:
+ 
  {{{
- FCKConfig.LinkBrowserURL = FCKConfig.BasePath + 'filemanager/browser/default/browser.html?Type=File&Connector=' + path + '/connectors/lenya/connector.lenya';
+ FCKConfig.LinkBrowserURL = filemgr + '?Type=File&Connector=' + path + '/connectors/lenya/connector.lenya';
- FCKConfig.ImageBrowserURL = FCKConfig.BasePath + 'filemanager/browser/default/browser.html?Type=Image&Connector=' + path + '/connectors/lenya/connector.lenya';
+ FCKConfig.ImageBrowserURL = filemgr + '?Type=Image&Connector=' + path + '/connectors/lenya/connector.lenya';
+ FCKConfig.FlashBrowserURL = filemgr + '?Type=Flash&Connector=' + path + '/connectors/lenya/connector.lenya';
  }}}
  
  
- and edit `lenya/webapp/lenya/resources/fckeditor/fckeditor.js` (near the top) to set the height and width of the editor:
+ 4. Edit `lenya/webapp/lenya/resources/fckeditor/fckeditor.js` (near the top) to set the height and width of the editor:
  
  {{{
-         this.Width                      = width                 || '100%' ;
+         this.Width          = width || '100%' ;
-         this.Height                     = height                || '100%' ;
+         var usAgent = navigator.userAgent.toLowerCase() ;
+         if ( usAgent.indexOf("msie") != -1)     // Internet Explorer
+             this.Height     = height || '95%' ;
+         else                                    // Gecko
+             this.Height     = height || screen.height * 0.6;
  }}}
  
+ also, if your servlet context is other than "/", edit fckeditor.js to set the `this.BasePath` value to include it:
+ 
+ {{{
+ 	this.BasePath = '/lenya/fckeditor/' ;
+ }}}
+ 
- 4. Download the following files to `lenya/webapp/lenya/resources/misc/fckeditor`:
+ 5. Download the following files to `lenya/webapp/lenya/resources/misc/fckeditor`:
  
   * [attachment:uploadComplete.xhtml]
  
@@ -46, +61 @@

  
  These file are just simple container pages.  The remaining html will be added during the transformations.  `index.xhtml` is the container for the editor page itself, and `uploadComplete.xhtml` is the response that's sent to Fred after an asset has been uploaded which contains the name of the file being uploaded and an error code.
  
- 5. Add the following actions to `sitemap.xmap`:
- 
- {{{
- <map:action name="frededitorsave" logger="sitemap.action.frededitorsave" src="org.apache.lenya.cms.cocoon.acting.FredSaveAction" />
- <map:action name="upload-fred-asset" logger="sitemap.action.upload-fred-asset" src="org.apache.lenya.cms.cocoon.acting.UploadFredAsset" />
- }}}
- 
  6. Add the following to `global-sitemap.xmap` after  `<!-- Editor BXE -->`
  
  {{{
- <!-- FCK Editor Connector for asset upload and insertion as well as link creation --> 
  <map:pipeline>
-    <map:match pattern="fckeditor/editor/filemanager/browser/default/*/**/connectors/**.lenya">
+    <map:match pattern="fckeditor/**">
-        <map:mount uri-prefix="fckeditor/editor/filemanager/browser/default" src="lenya/pubs/{1}/sitemap.xmap" check-reload="true" reload-method="synchron"/>
+        <map:mount uri-prefix="fckeditor" src="lenya/fckeditor.xmap" check-reload="true" reload-method="synchron"/>
     </map:match>
  </map:pipeline>
- 
- <!-- FCK Editor -->
- <map:pipeline>
-    <map:match pattern="fckeditor/**">
-        <map:read src="lenya/resources/fckeditor/{1}"/>
-    </map:match>
- </map:pipeline>    
  }}}
  
- 7. Add the following to `lenya/webapp/lenya/pubs/[pubname]/publication-sitemap.xmap` before the pipeline that builds the page (around line 116):
+ 7. (skip)
  
+ 8. Download [attachment:usecase-fckeditor.xmap] to `lenya/pubs/pubname/`.
- {{{
- <!-- This pipeline is used for uploading and inserting assets into Fred -->
-     <map:pipeline>
-     	<map:match pattern="*/**/connectors/**.lenya">
- 	   <map:select type="request-parameter">
-               <map:parameter name="parameter-name" value="Command"/>
-            <!-- If request parameter Command is GetFoldersAndFiles, returns an xml file containing the list of assets for a page -->
- 	         <map:when test="GetFoldersAndFiles">
- 	            <map:select type="request-parameter">
- 		       <map:parameter name="parameter-name" value="Type"/>
-                   <!-- Returns only assets that are images if the request parameter Type=Image -->
- 		          <map:when test="Image">
- 			     <map:generate src="resources/authoring/{2}" type="directory">
- 	    		        <map:parameter name="depth" value="5"/>
- 	      			<map:parameter name="dateFormat" value="dd-MMM-yyyy hh:mm:ss"/>
- 		      		<map:parameter name="include" value="\.jpg$|\.gif$|\.bmp$|\.png$"/>
- 		      	     </map:generate>
- 		      	   </map:when>
-                   <!-- Returns all assets, but excludes the meta files -->
- 		      	   <map:otherwise>
- 			     <map:generate src="resources/authoring/{2}" type="directory">
- 		    	  	<map:parameter name="depth" value="5"/>
- 	    	  		<map:parameter name="dateFormat" value="dd-MMM-yyyy hh:mm:ss"/>
- 	    	  		<map:parameter name="exclude" value="\.meta$"/>
- 	      		     </map:generate>
- 	      		   </map:otherwise>
- 		    </map:select>
- 		    <map:transform src="../../xslt/fckeditor/asset.xsl">
- 	    	       <map:parameter name="pubid" value="{1}"/>
- 	     	       <map:parameter name="docid" value="{2}"/>
- 	     	       <map:parameter name="type" value="{request-param:Type}"/>
- 		    </map:transform>				  
- 		    <map:serialize type="xml" />
- 		 </map:when>
-                  <!-- If Command request parameter is not GetFoldersAndFiles, must be an upload.  So, upload asset to pages directory using 
-                   upload-fred-asset action. -->
- 		 <map:otherwise>
- 		    <map:act type="upload-fred-asset">
- 		    <map:generate src="../../resources/misc/fckeditor/uploadComplete.xhtml"/>
- 		    <map:transform src="../../xslt/fckeditor/uploadAssetComplete.xsl">
- 		       <map:parameter name="errorCode" value="{errorCode}"/>
- 	     	       <map:parameter name="name" value="{name}"/>
- 	     	    </map:transform>
- 		    <map:serialize type="xhtml"/>
- 		    </map:act>
- 		 </map:otherwise>
- 	  </map:select>
-      </map:match>
-   </map:pipeline>
- 
- }}}
- 
- 8. Copy `lenya/pubs/pubname/usecase-bxeng.xmap` to `usecase-fckeditor.xmap` in the same directory, and make the following changes:
- 
- a. Modify `<map:match pattern="request2document">` to contain the following:
- 
- {{{
-      <map:match pattern="request2document">
- 	    <map:generate src="../../pubs/{page-envelope:publication-id}/work/frededitor/authoring/{page-envelope:document-id}.xml"/>
- 	  	<map:transform src="../../xslt/fckeditor/savedContent.xsl">
- 	  		<map:parameter name="title" value="{dublincore:title}"/>
- 	  		<map:parameter name="creator" value="{dublincore:creator}"/>
- 	  		<map:parameter name="subject" value="{dublincore:subject}"/>
- 	  		<map:parameter name="publisher" value="{dublincore:publisher}"/>
- 	  		<map:parameter name="contributor" value="{dublincore:contributor}"/>
- 	  		<map:parameter name="date" value="{dublincore:date}"/>
- 	  		<map:parameter name="type" value="{dublincore:type}"/>
- 	  		<map:parameter name="format" value="{dublincore:format}"/>
- 	  		<map:parameter name="identifier" value="{dublincore:identifier}"/>
- 	  		<map:parameter name="source" value="{dublincore:source}"/>
- 	  		<map:parameter name="language" value="{dublincore:language}"/>
- 	  		<map:parameter name="relation" value="{dublincore:relation}"/>
- 	  		<map:parameter name="coverage" value="{dublincore:coverage}"/>
- 	  		<map:parameter name="rights" value="{dublincore:rights}"/>
- 	  		<map:parameter name="issued" value="{dublincore:issued}"/>
- 	  		<map:parameter name="modified" value="{dublincore:modified}"/>
- 	  	</map:transform>
- 	  	<map:transform src="../../xslt/authoring/edit/unnumberTags.xsl"/>
-            <map:serialize type="xml"/>
-     </map:match> 
- }}}
- 
- b. Replace `<map:match type="usecase" pattern="bxeng">` with `<map:match type="usecase" pattern="fckeditor">`
- 
- c. Replace `<map:match type="step" pattern="open">` usecase step with the following:
- 
- {{{
- <map:match type="step" pattern="open">
-        <!-- Check for FCK Editor -->
-        <map:act type="resource-exists" src="../../resources/fckeditor/fckeditor.js">
-         <map:act type="reserved-checkout">
-           <map:generate type="serverpages" src="../../content/rc/{exception}.xsp">
-             <map:parameter name="user" value="{user}"/>
-             <map:parameter name="filename" value="{filename}"/>
-             <map:parameter name="date" value="{date}"/>
-             <map:parameter name="message" value="{message}"/>
-           </map:generate>
-           <map:transform src="../../xslt/rc/rco-exception.xsl"/>
-           <map:call resource="style-cms-page"/>
-         </map:act>
-         <map:aggregate element="fckeditor">
-           <map:part src="../../pubs/{page-envelope:publication-id}/content/authoring/{page-envelope:document-path}"/>
-           <map:part src="../../resources/misc/fckeditor/content-namespaces.xml"/>
-         </map:aggregate>
-         <map:transform src="../../xslt/fckeditor/aggregate.xsl">
- 	      <map:parameter name="docname" value="{page-envelope:document-name}"/>
-               <map:parameter name="root" value="{page-envelope:context-prefix}/"/>
-               <map:parameter name="language" value="{page-envelope:document-language}"/>
- 	</map:transform>
-         <map:transform src="../../xslt/util/strip_namespaces.xsl"/>
-         <map:transform src="../../xslt/fckeditor/change-image-path.xsl">
- 	        <map:parameter name="publicationid" value="{page-envelope:publication-id}"/>
-     	</map:transform>
-         <map:serialize type="xhtml"/>
-         </map:act>
-         <map:generate src="../../resources/misc/bxeng/download.xhtml"/>
-         <map:call resource="style-cms-page"/>
-         <map:serialize type="html"/>
-       </map:match>
- 
- }}}
- 
- d. After the open step add the edit step:
- 
- {{{
- 
-     	<map:match type="step" pattern="edit">
- 
-         	<map:select type="request-parameter">
-         	
-         		<!-- get the hid param from aggregate.xsl-->
-           		<map:parameter name="parameter-name" value="hidParam"/>
-           		
-           		<!-- do my conditional testing -->
-           		<map:when test="cancelButton">
-           			<!--this redirect shoots me back to authoring-->
-  					<map:redirect-to uri="{page-envelope:context-prefix}/{page-envelope:publication-id}/authoring/{page-envelope:document-id}.html?lenya.usecase=checkin&amp;lenya.step=checkin&amp;backup=false"/>
- 				</map:when>
- 				
- 				<map:when test="saveIcon">
- 					<map:act type="frededitorsave">
- 			             <map:parameter name="file" value="../../pubs/{page-envelope:publication-id}/work/frededitor/authoring/{page-envelope:document-id}.xml"/>
- 			             <map:parameter name="schema" value="../../pubs/{page-envelope:publication-id}/config/doctypes/schemas/{page-envelope:document-type}.rng"/>
- 			             <map:generate src="../../pubs/{page-envelope:publication-id}/content/authoring/{page-envelope:document-path}"/>
- 			             <map:call resource="style-cms-page"/>
- 			        </map:act>
- 			        <map:call function="editDocument">
- 			           <map:parameter name="sourceUri" value="cocoon:/request2document"/>
- 			           <map:parameter name="useBuffer" value="false"/>
- 			           <map:parameter name="noStatus" value="false"/>
- 			           
- 			           <!--this redirect shoots me back into Fred-->
- 			           <map:parameter name="redirectUrl" value="{request:requestURI}"/>
- 			        </map:call>
- 				</map:when>
- 				
- 				<map:when test="saveButton">
- 					<map:act type="frededitorsave">
- 			             <map:parameter name="file" value="../../pubs/{page-envelope:publication-id}/work/frededitor/authoring/{page-envelope:document-id}.xml"/>
- 			             <map:parameter name="schema" value="../../pubs/{page-envelope:publication-id}/config/doctypes/schemas/{page-envelope:document-type}.rng"/>
- 			             <map:generate src="../../pubs/{page-envelope:publication-id}/content/authoring/{page-envelope:document-path}"/>
- 			             <map:call resource="style-cms-page"/>
- 			        </map:act>
- 			        <map:call function="editDocument">
- 			           <map:parameter name="sourceUri" value="cocoon:/request2document"/>
- 			           <map:parameter name="useBuffer" value="false"/>
- 			           <map:parameter name="noStatus" value="false"/>
- 			           
- 			           <!--this redirect shoots me back into Fred-->
- 			           <map:parameter name="redirectUrl" value="{request:requestURI}"/>
- 			           
- 			        </map:call>
- 				</map:when>
- 			</map:select>
-     	</map:match>
- }}}
  
  9. Add the following line to `lenya/pubs/pubname/config/menus/generic.xsp` after
  `<item wf:event="edit" uc:usecase="bxeng" uc:step="open" href="?"><i18n:text>Edit with BXE</i18n:text></item>` (around line 127):
@@ -257, +82 @@

  <item wf:event="edit" uc:usecase="fckeditor" uc:step="open" href="?"><i18n:text>Edit with FCKeditor</i18n:text></item>
  }}}
  
+ Alternatively, if you want to *only* use the FCKeditor, comment out the other editors in generic.xsp and give the FCKeditor item a label like "Edit Page".
+ 
- 10. Copy `lenya/webapp/lenya/xslt/bxeng/aggregate.xsl` to `lenya/webapp/lenya/xslt/fckeditor/`.
+ 10. Copy `lenya/webapp/lenya/xslt/bxeng/*` to `lenya/webapp/lenya/xslt/fckeditor/`, then:
  
  a. Modify `aggregate.xsl` to contain the following:
  

---------------------------------------------------------------------
To unsubscribe, e-mail: dev-unsubscribe@lenya.apache.org
For additional commands, e-mail: dev-help@lenya.apache.org