10 Configuring Bundled Attribute Editors

Oracle Content and Experience attribute editor, Image Picker, CKEditor, and Clarkii Online Image Editor come packaged with WebCenter Sites. Content contributors use Image Picker to visually choose an image asset to associate with the asset they are creating or editing. With CKEditor, they apply a wide range of MS Word-style formatting to their content. And, they use the Clarkii Online Image Editor (Clarkii OIE) to edit an image directly in an asset's New or Edit view in Form Mode.

See these topics on configuring instances of attribute editors that ship with WebCenter Sites:

• Configuring CKEditor

• Configuring the Clarkii Online Image Editor

• Configuring the Image Picker

• Configuring the Oracle Content and Experience Asset Picker

10.1 Configuring CKEditor

CKEditor is an open source WYSIWYG text editor from CKSource which requires no client-side installation. CKEditor is bundled with WebCenter Sites. You can configure asset types containing WYSIWYG-enabled text fields to use CKEditor by default.

See these topics:

• Before You Begin

• How to Create a CKEditor Instance and Enable It for a Field

• How to Enable CKEditor for Use in Web Mode

• How to Enable Selected Asset Types for the CKEditor

• How to Set the Approval Dependency for Included Assets

• How to Customize the CKEditor Toolbar

• How to Configure Spell Check Support in CKEditor

10.1.1 Before You Begin

If you are using CKEditor with Internet Explorer, and WebCenter Sites is configured to use the cp1252 character set, follow these steps to have CKEditor work correctly in Internet Explorer:

1. In the Admin interface, open the Property Management Tool and note the value of the cs.contenttype property.
2. Log in to Explorer.
3. Go to the element SiteCatalog\OpenMarket\xcelerate\Actions\FCKEditorRenderer and set its resargs1 field to:

   cs.contenttype=[your content type]; charset=windows-1252

   where [your content type] takes the value that you noted from the Property Management Tool.

10.1.2 How to Create a CKEditor Instance and Enable It for a Field

This procedure shows you how to create an instance of CKEditor and enable it for a flex asset attribute based on a FirstSiteII example.

In our example, you will enable a new CKEditor instance as the input method (attribute editor) for the FSIIAbstract field. (FSIIAbstract is a flex attribute of the Content sample asset type.)

To Create and Enable a CKEditor Instance:

1. Open the Admin interface.

2. Create the CKEditor instance:

   1. In the button bar, click New.

   2. In the list of asset types, click New Attribute Editor.

      WebCenter Sites displays the New Attribute Editor form.

   3. In the Name field, enter a name that uniquely identifies this instance of CKEditor. For the purpose of our example, enter CK_FSIIAbstract.

      Clients can use generic names to create the CKEditor and use it for multiple attributes. It is not required to uniquely identify the CKEditor instance for the attribute unless there is a specific requirement for that field. For example, the width and height of the CKEditor in that field if it is different than other CKEditor fields.

   4. Paste the following code into the XML field:

      <?XML VERSION="1.0"?>
      <!DOCTYPE PRESENTATIONOBJECT SYSTEM "presentationobject.dtd">
      <PRESENTATIONOBJECT NAME="CKEDITOR">
      <CKEDITOR WIDTH="400" HEIGHT="200"></CKEDITOR>
      </PRESENTATIONOBJECT>
      

   5. Click Save.

3. Enable the CKEditor instance as the input method for the FSIIAbstract field. Find and open the FSIIAbstract attribute asset in the Edit form:

   1. In the button bar, click Search.

   2. In the list of asset types, click Find Content Attribute.

   3. In the Search field, enter FSIIAbstract and click Search.

   4. In the list of search results, navigate to the FSIIAbstract asset and click its Edit (pencil) icon.

      WebCenter Sites opens the asset in the Edit form.

   5. Set CKEditor as the attribute editor (input method) for this attribute. In the Attribute Editor drop-down list, choose CK_FSIIAbstract.

   6. Click Save.

4. To test your new CKEditor instance, switch to the Oracle WebCenter Sites: Contributor interface, and find and open any Content asset in its Edit view:

   1. In the Search field, click the down-arrow icon to open the Search Type menu. In the Search Type menu, choose Find Content. Then click the magnifying glass icon.

      A Search tab opens displaying the results of your search.

   2. In the list of asset types, navigate to a Content asset of your choice (FSIIAbout in our example), right-click the asset and choose Edit from the context menu.

      A tab opens displaying the asset in its Edit view.

   3. Navigate to the Abstract field and click in the field.

      If CKEditor does not appear, check the attribute editor XML code and the selection you made in the Attribute Editor drop-down list.

   4. In the asset's toolbar, click the Inspect icon to display the asset's Inspect view.

10.1.3 How to Enable CKEditor for Use in Web Mode

To enable users to edit assets using CKEditor in Web Mode, set the editor and params parameters in the insite:edit tag within the appropriate template, as shown in the table below. The template whose code you edit must be either for the asset whose CKEditor you want to work with in Web Mode, or for the asset type associated with that asset.

Table 10-1 Parameters that Enable CKEditor in Web Mode

Tag	Parameter	Value	Description
insite:edit	editor	ckeditor	Specifies the name of the editor to use.
N/A	params	editorId	Specifies the ID of the CKEditor you want to use in Web Mode.
N/A	N/A	enableEmbeddedLinks	Enables the link icons on the CKEditor toolbar.

This example shows the required parameters for enabling CKEditor in Web Mode:

Example 10-1 Code to Enable CKEditor in Web Mode

<ics:listget listname='BodyList' fieldname="value" output="Body" />
<div id="body">
<insite:edit
      assetid='<%=ics.GetVar("cid")%>'
      assetfield='<%='Attribute_"+ics.GetVar("BodyAttrName")%>'
      assetfieldvalue='<%=ics.GetVar("Body")%>'
      assettype='<%=ics.GetVar("c")%>'
      editor='ckeditor'
      params="{enableEmbeddedLinks:'1'}"/>
</div>

Note:

If the insite:edit tag does not define a height and width for CKEditor, then CKEditor will use the XSIZE and YSIZE defined in its XML code. See the Tag Reference for Oracle WebCenter Sites Reference.

You can edit the insite:edit tag in one of the following ways:

• In the Element Logic field of the appropriate template. To work in a template's Element Logic field:

  • Open the Admin interface.

  • Click Search (in the button bar), then select Find Template, then Search, and then Select template name.

  • From the template's Edit form, select the Element tab and navigate to the Element Logic field.

• In Oracle WebCenter Sites Explorer.

• In a text editor of your choice.

10.1.4 How to Enable Selected Asset Types for the CKEditor

To narrow down the user's choice of available asset types, add the ALLOWEDASSETTYPES parameter to the CKEditor XML code. As values, specify the names of the allowed asset types in a comma-separated list.

To enable asset types for the CKEditor:

1. Open the Admin interface.

2. Find and open the attribute editor named CKEditor in its Edit form:

   1. In the button bar, click Search.

   2. In the Search form, select Find Attribute Editor.

   3. In the Search for Attribute Editors form, fill in a search criteria (if any) and click Search.

   4. In the search results list, navigate to the CKEditor asset and click its Edit (pencil) icon.

3. Navigate to the XML field, add the ALLOWEDASSETTYPES parameter to the <CKEDITOR> tag. Then, specify the names of the asset types you want to enable in the value of the ALLOWEDASSETTYPES parameter, as shown in this example:

   <?XML VERSION="1.0"?>
   <!DOCTYPE PRESENTATIONOBJECT
   SYSTEM "presentationobject.dtd">
   <PRESENTATIONOBJECT
   NAME="CKEDITORTEST"><CKEDITOR WIDGET="580"
   HEIGHT="200" IMAGEPICKERID="1112668339899"
   ALLOWEDASSETTYPES="MEDIA_C,CONTENT_C,PRODUCT_C,DOCUMENT_C">
   </CKEDITOR></PRESENTATIONOBJECT>
   

   The ALLOWEDASSETTYPES parameter is added as an additional parameter to the <CKEDITOR> tag. The value of this parameter specifies the asset types with which the user can create a new asset.

4. Click Save Changes to save the asset.

5. Test the ALLOWEDASSETTYPES parameter:

   1. Switch to the Contributor interface.

   2. Find and open an asset with a CKEditor enabled field in Web Mode:

      • In the Search field, specify a search criteria and then click the magnifying glass icon.

        A Search tab opens displaying the results of your search.

      • Click the name of an asset to open its Inspect view.

      • If the asset opens in Form Mode, click the Mode switch in the asset's toolbar to switch to Web Mode.

      • In the asset's toolbar, click the Edit icon.

   3. Search on one of the allowed asset types. After the allowed asset displays in the docked search results list, drag the allowed asset to CKEditor.

      If you do not have any allowed assets of the type you specified with the ALLOWEDASSETTYPES parameter, select Content and then New to create a new asset. Then search on the asset and drag it from the dock to the CKEditor.

10.1.5 How to Set the Approval Dependency for Included Assets

The Include asset and Create and include a new asset icons allow users to include one asset in another asset's CKEditor-enabled field. The included asset is then previewable in the field and, ultimately, embedded in the display of the main asset online.

After the main and included assets have been published for the first time, the dependency between them determines how subsequent approvals and publications will work. This dependency is defined by the DEPTYPE parameter in the XML code of the CKEditor.

The DEPTYPE parameter can be set to either EXISTS or EXACT. If the DEPTYPE parameter is not set explicitly, EXACT is used by default.

• EXISTS: When the main asset is edited, approved, and re-published, the included asset does not have to be approved and re-published while a version of the asset exists at the destination.

• EXACT: When the main asset is edited, approved, and re-published, the included asset, if it was edited, must be approved and re-published as well.

To Define the Approval Dependency for Included Assets:

1. Open the Admin interface.

2. Find and open the attribute editor named CKEditor in its Edit form:

   1. In the button bar, click Search.

   2. In the Search form, select Find Attribute Editor.

   3. In the Search for Attribute Editors form, fill in a search criteria (if any) and click Search.

   4. In the search results list, navigate to the CKEditor asset and click its Edit (pencil) icon.

3. Navigate to the XML field, add the DEPTYPE parameter to the <CKEDITOR> tag, and set the value of the DEPTYPE parameter to either EXISTS or EXACT, as shown in this example:

   <?XML VERSION="1.0"?>
   <!DOCTYPE PRESENTATIONOBJECT
   SYSTEM "presentationobject.dtd">
   <PRESENTATIONOBJECT
   NAME="CKEditorTest"><CKEDITOR
   WIDTH="580" HEIGHT="200"
   DEPTYPE="EXISTS"></CKEDITOR>
   </PRESENTATIONOBJECT>
   

   The DEPTYPE parameter is added as an additional attribute to the <CKEDITOR> tag.

4. Click Save Changes to save the asset.

10.1.6 How to Customize the CKEditor Toolbar

You can customize the functions available in the CKEditor toolbar and their arrangements in the custom configuration file.

To customize the CKEditor toolbar in the custom config.js file:

1. You can customize CKEditor in two ways:

   • Option 1: If you upgraded to WebCenter Sites 12.2.1 Patch 2 or greater according to the instructions given in Document 2168947.1, follow these steps:

     1. In the WebLogic managed server, on the Server Start tab, make sure the -Dsites.config JVM parameter is set to point to the WebCenter Sites config folder.

     2. In the <sites.config> folder, create a ckeditor folder .

     3. Copy the sites.war/ckeditor/config.js into the<sites.config>/ckeditor folder.

     4. Add customizations to the <sites.config>/ckeditor/config.js file. For example, you can add the following customization to load an external plugin:

        //load external plugin
        (function() 
        {CKEDITOR.plugins.addExternal('','<plugin is accessible>', 'plugin.js');
        })();

        An example of the external plugin:

        (function() 
        {CKEDITOR.plugins.addExternal('myExternalPlugin','http://hostname:port/staticResources/ckeditor/myExternalPlugin', 'plugin.js');
        })();

     5. Flush the ckeditor/getConfig page.

     6. Clear the browser cache to remove cache of the old config.js file.

   • Option 2: In WebCenter Sites 12.2.1.1 or greater, you can place multiple custom CKEditor config files with different names in the ckeditor folder in the extend.sites.webapp-lib.war. You can create multiple CKEditor XML definitions, where each definition's CONFIG parameter references a different CKEditor config file.

     1. Shutdown the WebLogic managed server.

     2. Back up the sites-home/extend.sites.webapp-lib.war library file.

     3. Extract the sites-home/extend.sites.webapp-lib.war file JAR to a temp folder.

     4. In the ckeditor folder, add custom CKEditor config file with different name, such as config1.js, which contains custom configurations.

     5. Recreate the temp folder JAR as sites-home/extend.sites.webapp-lib.war.

     6. In the WebLogic console, in the Deployments section, update the extend.sites.webapp-lib library with the updated sites-home/extend.sites.webapp-lib.war file.

     7. Start the WebLogic managed server.

     8. In the WebCenter Sites Admin interface, for your CKEditor xml definition, you can use the CONFIG parameter to reference the custom config1.js file. For example:

        <?XML VERSION="1.0"?><!DOCTYPE PRESENTATIONOBJECT SYSTEM "presentationobject.dtd">
        <PRESENTATIONOBJECT NAME="FCKEditorTest"><CKEDITOR WIDTH="580px" HEIGHT="200px" CONFIG="config1.js"></CKEDITOR>
        </PRESENTATIONOBJECT>

2. To customize the toolbar for the Contributor interface (for Form Mode and Web Mode):

   • locate config.toolbar_SITES in <sites.config>/ckeditor/config.js for customizing the toolbar for the Contributor interface.

   • locate config.toolbar_SITES_WEB in <sites.config>/ckeditor/config.js for customizing the toolbar for Web Mode.

3. Make your changes. For information about the toolbar definition syntax, consult the CKEditor documentation.

4. Save and close the file.

5. Redeploy the WebCenter Sites application and restart the application server for your changes to take effect.

To customize the CKEditor toolbar on a per-instance basis:

1. Create the custom toolbar definition:

   1. Open the custom configuration file in a text editor:

      <sites.config>/ckeditor/config.js

   2. Add a new toolbar definition to the file. For information about how to build a custom toolbar definition, consult the CKEditor documentation.

      config.toolbar_<toolbardef> = [
                          [ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ],
                          { name: 'links', items: [ 'Link', 'Unlink', 'Anchor' ] },
                          { name: 'basicstyles', items: [ 'Bold', 'Italic', 'Underline','Strike','-','Subscript','Superscript' ] },
                          { name: 'colors', items: [ 'TextColor', 'BGColor' ] },
                          { name: 'tools', items: [ 'Maximize', 'ShowBlocks' ] }
          ];
      

      The <toolbarDef> value is the name of your custom toolbar definition. You will use this name when modifying a CKEditor instance to use this custom definition.

2. Modify a CKEditor instance to use your custom toolbar definition.

   1. Open the Admin interface.

   2. Find the CKEditor instance:

      • In the button bar, click Search.

      • In the list of asset types, click Find Attribute Editor.

      • In the Search field, enter the name of the asset holding the CKEditor instance and click Search.

      • In the list of search results, navigate to the asset and click its Edit (pencil) icon.

   3. In the XML field, modify the attribute editor code as follows:

      • Find the line highlighted in bold below:

        <?XML VERSION="1.0"?>
        <!DOCTYPE PRESENTATIONOBJECT SYSTEM
           "presentationobject.dtd">
        <PRESENTATIONOBJECT NAME="CKEditorCustomized">
        <CKEDITOR WIDTH="400" HEIGHT="200">
        </CKEDITOR></PRESENTATIONOBJECT>
        

      • Add the TOOLBAR parameter to the <CKEDITOR> tag:

        TOOLBAR="<toolbarDef>"
        

      • The value of the TOOLBAR parameter specifies the name of the custom toolbar definition you created in step 1.

      • The modified line should look as follows:

        <CKEDITOR WIDTH="400" HEIGHT="200" TOOLBAR="<toolbarDef>">
        

   4. Click Save Changes to save the asset.

3. Redeploy the WebCenter Sites application and restart the application server for your changes to take effect.

For information about configuring CKEditor, consult its documentation.

10.1.7 How to Configure Spell Check Support in CKEditor

For instructions about using and configuring the CKEditor spell checker, visit the following URL: http://docs.cksource.com/CKEditor_3.x/Users_Guide/Spell_Checking

10.2 Configuring the Clarkii Online Image Editor

The Clarkii Online Image Editor (Clarkii OIE) is a third-party image editor from InDis Baltic that is supported on all browsers on which WebCenter Sites is supported, including Safari. You can configure separate instances of Clarkii OIE on a per-field basis for each asset type, or a single instance to be associated with the fields of multiple asset types.

The following figure summarizes the native controls of Clarkii OIE and functions provided by WebCenter Sites for operating on images in an attribute for which Clarkii OIE is enabled.

Figure 10-1 Clarkii Online Image Editor Rendered in a Field of an Asset's Form

Description of "Figure 10-1 Clarkii Online Image Editor Rendered in a Field of an Asset's Form"

Before configuring and enabling this feature, take note of the following:

• Clarkii OIE can be enabled only for flex attributes. The instructions in this section use the Media flex family of the FirstSiteII sample site as an example.

• Clarkii OIE can be enabled only for attributes of type blob.

• Flash must be installed on the client browser in order for Clarkii OIE to be rendered in the field for which you enabled it.

  Note:

  You can customize the functions in the Clarkii OIE toolbar and menu. Since these functions are strictly Clarkii OIE related they are not documented. For instructions about configuring Clarkii OIE specific functions, visit the following URL:

  http://www.online-image-editor-clarkii.com/

Topics:

• How to Create a Clarkii OIE Instance and Enable it for a Field

• How to Configure Clarkii OIE Properties

• How to Implement a Field Copier Filter to Classify Assets

10.2.1 How to Create a Clarkii OIE Instance and Enable it for a Field

Create a Clarkii OIE instance and enable it for a flex attribute asset. This procedure is based on the FirstSiteII sample site.

In this example, you will enable a new Clarkii OIE instance as the attribute editor for the FSII_ImageFile field. FSII_ImageFile is an attribute of the sample Media asset type.

1. Open the Admin interface.

2. Create a Clarkii OIE instance:

   1. In the button bar, click New.

   2. In the list of asset types, click New Attribute Editor.

      WebCenter Sites displays the New Attribute Editor form.

   3. In the Name field, enter a name that uniquely identifies this Clarkii OIE instance (for this example, enter ClarkiiOIE).

   4. In the XML field, paste the following code.

      Note:

      • For detailed information about each parameter, see the table in How to Configure Clarkii OIE Properties.

      • The attribute editor must include Buttons such as those included in the XML code below. Otherwise a blank page is displayed in the Edit form.

      <?XML VERSION="1.0"?>
      <!DOCTYPE PRESENTATIONOBJECT SYSTEM "presentationobject.dtd">
      <PRESENTATIONOBJECT NAME="editor">
      <IMAGEEDITOR  
        EDITORTYPE="clarkii"  
        HEIGHT="500"  
        WIDTH="600"  
        MAXHEIGHT="650"  
        MAXWIDTH="900"  
        FITIMAGE="true"  
        ENABLEOIEFORMAT="true"  
        DEFAULTTEXTFONT="Arial"  
        DEFAULTTEXTSIZE="18"  
        DEFAULTTEXTCOLOR="#000000"  
        ENABLEIMAGEPICKER="true"  
        ASSETTYPE="Media_C"  
        ATTRIBUTE="FSII_ImageFile"  
        ATTRIBUTETYPE="Media_A"  
        CATEGORYATTRIBUTE=""  
        RESTRICTEDCATEGORYLIST=""  
        OIEASSETTYPE="Media_C"  
        OIEATTRIBUTE="FSII_ImageFile"  
        OIEATTRIBUTETYPE="Media_A"  
        OIECATEGORYATTRIBUTE=""  
        OIERESTRICTEDCATEGORYLIST=""  
        OIEENABLEIMAGEPICKER="true"  
        TAGEDIT="true">
        <BUTTONS>
          <BUTTON NAME="New" VISIBLE="true"/>
          <BUTTON NAME="Open" VISIBLE="true"/>
          <BUTTON NAME="Scan" VISIBLE="false"/>
          <BUTTON NAME="Save" VISIBLE="true"/>
          <BUTTON NAME="Copy" VISIBLE="true"/>
          <BUTTON NAME="Paste" VISIBLE="true"/>
          <BUTTON NAME="Undo" VISIBLE="true"/>
          <BUTTON NAME="Redo" VISIBLE="true"/>
          <BUTTON NAME="Brush" VISIBLE="true"/>
          <BUTTON NAME="Eraser" VISIBLE="true"/>
          <BUTTON NAME="FixRedEye" VISIBLE="true"/>
          <BUTTON NAME="Open" VISIBLE="true"/>
          <BUTTON NAME="Grid" VISIBLE="true"/>
          <BUTTON NAME="FlattenLayers" VISIBLE="true"/>
          <BUTTON NAME="Help" VISIBLE="true"/>
          <BUTTON NAME="ImageMenu" VISIBLE="true"/>
          <BUTTON NAME="ImageRotateLeft" VISIBLE="true"/>
          <BUTTON NAME="ImageRotateRight" VISIBLE="true"/>
          <BUTTON NAME="ImageMirror" VISIBLE="true"/>
          <BUTTON NAME="ImageCrop" VISIBLE="true"/>
          <BUTTON NAME="ImageResample" VISIBLE="true"/>
          <BUTTON NAME="ImageResizeCanvas" VISIBLE="true"/>
          <BUTTON NAME="ColorMenu" VISIBLE="true"/>
          <BUTTON NAME="ColorGrayScale" VISIBLE="true"/>
          <BUTTON NAME="ColorBrightnessContrast" VISIBLE="true"/>
          <BUTTON NAME="SharpenBlurMenu" VISIBLE="true"/>
          <BUTTON NAME="InsertMenu" VISIBLE="true"/>
          <BUTTON NAME="InsertImage" VISIBLE="true"/>
          <BUTTON NAME="InsertRectangle" VISIBLE="true"/>
          <BUTTON NAME="InsertEllipse" VISIBLE="true"/>
          <BUTTON NAME="InsertLineArrow" VISIBLE="true"/>
          <BUTTON NAME="InsertRichText" VISIBLE="true"/>
          <BUTTON NAME="InsertTextAlongPath" VISIBLE="true"/>
          <BUTTON NAME="HSL" VISIBLE="true"/>
          <BUTTON NAME="EmbossLight" VISIBLE="true"/>
          <BUTTON NAME="EmbossMedium" VISIBLE="true"/>
          <BUTTON NAME="EmbossDark" VISIBLE="true"/>
          <BUTTON NAME="OilPaint" VISIBLE="true"/>
          <BUTTON NAME="WaterColor" VISIBLE="true"/>
          <BUTTON NAME="Mosaic" VISIBLE="true"/>
          <BUTTON NAME="Patchwork" VISIBLE="true"/>
          <BUTTON NAME="BrickTexture" VISIBLE="true"/>
        </BUTTONS>
      </IMAGEEDITOR>
      </PRESENTATIONOBJECT>

   5. Click Save.

3. Enable the Clarkii OIE instance as the attribute editor for an attribute of a given asset type. For this example, use the Media asset type's FSII_ImageFile attribute.

   1. Find and open the attribute asset in its Edit form. For this example, find and open the FSII_ImageFile attribute.

      • In the button bar, click Search.

      • In the list of asset types, click the asset type of a attribute asset. For this example, click Find Media Attribute.

      • In the Search field, enter the name of the attribute asset you want to modify. For this example, enter FSII_ImageFile.

      • Click Search.

      • In the list of search results, navigate to the attribute asset (FSII_ImageFile) and click its Edit (pencil) icon.

        WebCenter Sites opens the asset in its Edit form.

   2. Set Clarkii OIE as the attribute editor for this attribute asset:

      • In the Value Type field, make sure blob is selected.

        Note:

        Clarkii OIE requires an attribute value of type blob. Once an attribute asset is saved, the value selected for the Value Type field cannot be modified.

      • In the Attribute Editor drop-down list, choose the Clarkii OIE instance you created in step 2.

   3. Click Save Changes.

4. To test your new Clarkii OIE instance:

   1. Open the Contributor interface.

   2. Find any asset whose definition specifies the attribute you modified in step 3 as a field, and open that asset in its Edit form. For this example, select a Media asset:

      • In the Search field, enter the search criteria.

      • To narrow down your search to a specific asset type, click the down-arrow in the Search field to open the Search Type drop-down list. Click the asset type that is using the field enabled with the Clarkii OIE instance. For this example, select Find Media.

      • Click the magnifying glass icon.

        A Search tab opens listing the results of your search.

      • In the list of search results, right-click an asset of your choice. For this example, select the FSII AudioCo_iAC-008.jpg Media asset and then select Edit.

        WebCenter Sites displays the asset in its Edit form.

   3. Navigate to the field enabled with Clarkii OIE. For this example, FSII_ImageFile field. It should look similar to the following figure.

      Figure 10-2 The Clarkii Online Image Editor

      
      Description of "Figure 10-2 The Clarkii Online Image Editor"

      To render Clarkii OIE in the field, do one of the following:

      • Make sure Flash is installed.

      • Check the XML code of the Clarkii OIE instance you created (see, substep d of step 2).

      • Check the selections you made in the attribute asset for which you enabled Clarkii OIE as the attribute editor (see substep b of step 3 of this procedure).

   4. Click Cancel to return to the asset's Inspect form.

10.2.2 How to Configure Clarkii OIE Properties

The tables below list and define all of the properties that can be specified in the creation of a Clarkii OIE attribute editor asset. Use these tables as a reference to configure the properties for your own Clarkii OIE instance so it fits your site design.

Table 10-2 Clarkii OIE Specifications

Property	Definition
HEIGHT	Specify the height of the Clarkii OIE area as it will be displayed within the attribute field of a given asset's form. Suggested value: 600
WIDTH	Specify the width of the Clarkii OIE area as it will be displayed within the attribute field of a given asset's form. Suggested value: 800
EDITORTYPE	Specify the type of image editor you want to use. To enable Clarkii OIE, the property must read: EDITORTYPE="clarkii"
FITIMAGE	If this property is set to true, images edited with Clarkii OIE will be resized to fit within the Clarkii OIE canvas. If this property is set to false, then when you edit an image with Clarkii OIE, that image is displayed on the canvas in its actual size. Possible values: true|false

Table 10-3 Browse Images Button Specifications

Property	Definition
ENABLEIMAGEPICKER	Enables the Browse Images button which allows users to place an image on the Clarkii OIE canvas, replacing any images that currently exist on the canvas. This button invokes the Image Picker window. Possible values: true|false Note: If this property is set to false, do not set values for the other properties related to the Browse Images button.
ASSETTYPE	Specify the asset type of the image assets that will be displayed in the Image Picker window when the Browse Images button is clicked. Possible values: Any asset type that has a definition containing an attribute of type blob which is intended to store images. Example: "Media_C"
ATTRIBUTE	Specify the image file attribute of the image assets that will be displayed in the Image Picker window when the Browse Images button is clicked. Possible values: Any attribute of type blob intended to store images. Example: "FSII_ImageFile"
ATTRIBUTETYPE	Specify the asset type of the image file attribute specified in the ATTRIBUTE property. Image Picker will look for attributes of only this asset type, and displays only the images with attributes of this asset type. Possible values: The asset type of the image file attribute specified in the ATTRIBUTE property. Example: "Media_A"
CATEGORYATTRIBUTE	Specify a string attribute holding a value that classifies the image assets (preferably by the names of their parent assets) to be displayed in the Image Picker window. The value of this property populates the Category drop-down list in the Image Picker with all values found for the specified attribute. When the Browse Images button is clicked, users can use the Category drop-down list to filter the images that are displayed in the Image Picker window by selecting one of these attribute values. Only the images matching the selected attribute value are rendered in the Image Picker window. Note: If no value is specified for this property, all image assets of the asset type specified in the ASSETTYPE property are displayed in the Image Picker window, and the Category drop-down list is not displayed.
RESTRICTEDCATEGORYLIST	In a comma-delimited list, enter specific values of the attribute specified in the CATEGORYATTRIBUTE property. The values you specify will be the only values available in the Category drop-down list of the Image Picker window when the Browse Images button is clicked. Possible values: Refer to the definition for the CATEGORYATTRIBUTE property. Note: If no value is specified for the CATEGORYATTRIBUTE property, then this property is ignored.

Table 10-4 Insert Image Button Specifications

Property	Definition
OIEATTRIBUTE	Specify the image file attribute of the image assets that will be displayed in the Image Picker window when the Insert Image button is clicked. Possible values: Any attribute of type blob intended to store images. Example: "FSII_ImageFile"
OIEATTRIBUTETYPE	Specify the asset type of the image file attribute you specified in the OIEATTRIBUTE property. Image Picker will look for attributes of only this asset type, and displays only the images with attributes of this asset type. Possible values: The asset type of the image file attribute specified in the OIEATTRIBUTE property. Example: "Media_A"
OIECATEGORYATTRIBUTE	Specify a string attribute holding a value that classifies the image assets (preferably by the names of their parent assets) that will be displayed in the Image Picker window. The value of this property populates the Category drop-down list in the Image Picker with all values found for the specified attribute. When the Insert Image button is clicked, users can use the Category drop-down list to filter the images that are displayed in the Image Picker window by selecting one of these attribute values. Only the images matching the selected attribute value are rendered in the Image Picker window. Note: If no value is specified for this property, all image assets of the asset type specified in the OIEASSETTYPE property are displayed in the Image Picker window, and the Category drop-down list is not displayed.
OIERESTRICTEDCATEGORYLIST	In a comma-delimited list, enter specific values of the attribute specified in the OIECATEGORYATTRIBUTE property. The values you specify will be the only values available in the Category drop-down list of the Image Picker window when the Insert Image button is clicked. Possible values: Refer to the definition for the OIECATEGORYATTRIBUTE property. Note: If no value is specified for the OIECATEGORYATTRIBUTE property, then this property is ignored.
OIEENABLEIMAGEPICKER	Enables the Insert Image button, which enables users to insert an image as a layer on top of existing images on the Clarkii OIE canvas. This button invokes the Image Picker window. Possible values: true|false Note: If this property is set to false, do not set values for the other properties related to the Insert Image button.
OIEASSETTYPE	Specify the asset type of the image assets that will be displayed in the Image Picker window when the Insert Image button is clicked. Possible values: Any asset type that has a definition containing an attribute of type blob intended to store images. Example: "Media_C"

10.2.3 How to Implement a Field Copier Filter to Classify Assets

You use a field copier filter to classify image assets by the names of their parent assets. The following figure illustrates an example of how to implement a field copier filter, using the Media flex family of the FirstSiteII sample site. The field copier filter in this example copies the value of the system-defined Name attribute of the parent assets into a user defined string attribute.

To ensure that the values of preexisting attributes are not overwritten, create a new string attribute (FSII_ImageParentName) to hold the value of the system-defined attribute to be copied by the field copier. See Flex Filter Classes.

Figure 10-3 Sample Overview of a Field Copier Filter

Description of "Figure 10-3 Sample Overview of a Field Copier Filter "

To Use a Field Copier Filter:

1. Open the Admin interface.

2. Determine the system-defined attribute whose value you want to use as the input for the field copier filter, and the user defined string attribute to which the field copier will be copying the system-defined attribute's value. To avoid overwriting the values of preexisting attributes, create a flex attribute of type string (FSII_ImageParentName in this example).

3. Create a filter of type FieldCopier (FSII_ImageParentNameCopier in this example):

   1. In the button bar, click New.

   2. In the list of asset types, click New Media Filter.

      The New Media Filter form is displayed.

   3. In the Name field, enter a unique name for this filter (For example, FSII_ImageParentNameCopier).

   4. In the Filter field, choose FieldCopier from the drop-down list. Then click Get Arguments:

      • In the Name drop-down list, select the system-defined attribute whose value you want to use as the input value for the field copier filter (name in this example).

      • In the Value field, type the name of the user defined attribute (FSII_ImageParentName in this example) into which the field copier filter will copy the value of the system-defined attribute you specified.

   5. Click Add to add the argument to the filter.

   6. Click Save to save the filter.

4. Find a parent (or child) definition and add the new field copier filter to it (in this example we are adding the field copier filter to the Media parent definition FSII_ImageCategory):

   1. In the button bar, click Search.

   2. In the list of asset types, select Find Media Parent Definition.

   3. In the Search field, enter the name of the parent definition to which you want to add the field copier filter (FSII_ImageCategory).

   4. Click Search.

   5. In the list of search results, navigate to a parent (or child) definition and click its Edit (pencil) icon.

   6. In the Edit form of the parent (or child) definition, navigate to the Filters section and select the field copier filter you created in step 3.

   7. Click Save Changes.

5. Find and re-save all preexisting parent (or child) assets associated with the definition to which you added the field copier filter (FSII_ImageParentNameCopier). This enables the filter to populate the user defined attribute (FSII_ImageParentName) with the value of the system-defined attribute (Name).

   If you added the filter to a parent definition, all children of the associated parent assets internally inherit the value that the field copier filter copied into the user defined attribute (FSII_ImageParentName in this example).

10.3 Configuring the Image Picker

When configuring an instance of the Image Picker attribute editor, you must specify the values of some parameters in the XML definition.

This table describes those parameters:

Table 10-5 Image Picker Parameters

Parameter	Explanation
ASSETTYPENAME	Asset type of the image assets that this instance of Image Picker will display. Example: Media_C
ATTRIBUTETYPENAME	Asset type of the image file attribute within the selected image asset type. Example: Media_A
ATTRIBUTENAME	Name of the image file attribute within the selected image asset type. Example: FSII_ImageFile
CATEGORYATTRIBUTENAME	(Optional) Name of the category attribute within the selected image asset type. Example: FSII_ImageCategory
RESTRICTEDCATEGORYLIST	Accepts a comma-delimited list of values of the category attribute within the selected image asset type. The values in this list will appear in the Category drop-down list in the Image Picker window. If this parameter is omitted, Image Picker will display all assets belonging to the selected image asset type. Example: Audio,Video,Photo

Sample XML code for an Image Picker definition is included in How to Create Image Picker Attribute Editor Definition Code. For instructions about creating new attribute editors (such as new instances of Image Picker) see Creating Attribute Editors. For instructions about selecting an input method (such as Image Picker) for a field in an asset form, see Create Flex Attributes in Creating a Flex Asset Family.

Topics:

• How to Categorize Image Assets for Display in Image Picker

• How to Create Image Picker Attribute Editor Definition Code

10.3.1 How to Categorize Image Assets for Display in Image Picker

Using the CATEGORYATTRIBUTENAME and RESTRICTEDCATEGORYLIST parameters described in the previous section, you can restrict an instance of Image Picker to display only selected categories of assets belonging to the selected image asset type. Before you do so, the following conditions must be satisfied:

• You must add a category attribute of type string to the selected image asset type or flex definition that will store the category descriptor for each asset within the selected asset type. Image Picker will use the value of this attribute to generate a list of asset categories which it is allowed display. For instructions about creating attributes, see Create Flex Attributes in Creating a Flex Asset Family.

• You or your content providers must fill in the category field for each asset of the selected image asset type, as appropriate. An asset which is not assigned a category is not displayed by a category-restricted instance of Image Picker.

10.3.2 How to Create Image Picker Attribute Editor Definition Code

A sample XML definition for the Image Picker attribute editor is included below for your reference. Use it to get an idea of how to configure Image Picker on your system.

<?XML VERSION="1.0"?>
<!DOCTYPE PRESENTATIONOBJECT>
<PRESENTATIONOBJECT NAME="ImagePicker">
<IMAGEPICKER>
  ASSETTYPENAME="Media_C"
  ATTRIBUTETYPENAME="Media_A"
  ATTRIBUTENAME="FSII_ImageFile"
  CATEGORYATTRIBUTENAME="FSII_ImageCategory"
  RESTRICTEDCATEGORYLIST="Audio,Video">
</IMAGEPICKER>
</PRESENTATIONOBJECT>

See Creating Attribute Editors.

10.4 Configuring the Oracle Content and Experience Asset Picker

To enable content contributors to use the Oracle Content and Experience web interface in WebCenter Sites, you need to create at least one attribute editor and associate at least one attribute with your editor.

Topics

• How to Create the Oracle Content and Experience Asset Picker Attribute Editor Definition Code

• How to Enable the Oracle Content and Experience Asset Picker for a Field

10.4.1 How to Create the Oracle Content and Experience Asset Picker Attribute Editor Definition Code

You can create an attribute editor using asset and digital asset type as the attribute types and also include search parameters.

1. Open the Admin interface.
2. Click New and then select New Attribute Editor from the shortcut list.

   The Attribute Editor form opens.

3. In the Name field, enter a unique name of up to 64 characters, excluding spaces.
4. In the Description field, enter a short phrase that describes the purpose of the attribute editor.
5. In the Attribute Type field, select asset.
6. In the XML field, enter the appropriate code, for example:

   <?XML VERSION="1.0'?> 
   <!DOCTYPE PRESENTATIONOBJECT >   
       <PRESENTATIONOBJECT NAME="<add name here>" 
           <OCEPICKER ASSETTYPES="" MEDIAGROUPS="" KEYWORDS="">
           </OCEPICKER> 
       </PRESENTATIONOBJECT>

   • ASSETTYPES: This parameter is used to filter assets by asset types. Provide Oracle Content and Experience asset types' names as the value for this parameter. Use comma(,) separated values to specify multiple asset types.
   • MEDIAGROUPS: This parameter is used to filter assets by media groups (images, videos, documents, and others). Use comma(,) separated values to specify multiple media groups.
   • KEYWORDS: This parameter is used to filter assets by keywords. Use comma(,) separated values to specify multiple keywords.
7. Click Save.

   Note:

   Another option is to code the XML for the attribute editor in a separate .xml file. In this case, rather than entering the code directly into the XML field, click Browse next to the XML in file field and select the file.

8. Approve this attribute editor so that it can be published to the management system.
9. Associate your attribute editor to the required attribute.

10.4.2 How to Enable the Oracle Content and Experience Asset Picker for a Field

After you've created your asset picker, you must enable it for the fields it is required for so the assets can be accessed in the Contributor interface.

1. Open the Admin interface.
2. Find and open the attribute you want to associate with your asset picker.
   1. In its Edit form, in the button bar, click Search.
   2. In the Search form, select Find Attributes.
   3. In the Search for Attributes form, fill in a search criteria (if any) and click Search.
   4. In the search results list, navigate to the attribute you want to associate with your asset picker and click its Edit (pencil) icon.
3. In the Attribute form, click Edit (pencil) icon to open the form in the edit mode.
4. In the Attribute Editor drop-down list, select your asset picker and click Save.