WebCenter CK Editor Customization – WebCenter Portal

By: Andreja Sambolec – Application Consultant

For creating new blogs or wikis, the WebCenter CK Editor (text editor) is used. Using CK Editor we have options to edit text, add tables, embed images and videos…

In this demonstration we are going to embed video.

You can edit the HTML and add the <iframe> component, but it will be deleted after saving changes or switching between tabs.

To avoid this, we customized the task-flow which contains this editor.

The page fragment we changed is
oracle.webcenter.doclib.view.jsf.taskflow.richTextEditor.editHTML.jsff.

We figured that the problem is caused by the converter added to <rte:editor> component so we deleted it (No other problems arise because of those changes):

<rte:editor id=”rte value=”#{pageFlowScope.rte.HTMLTextArea}”
converter=”#{pageFlowScope.rte.HTMLConverter}” />

Next we wanted to have an icon for embedding videos to enhance and simplify the user experience.

embedvideo

When a user clicks on the icon a list of videos will be displayed inside of a dialog box:

ckeditor

When a user clicks on the OK button, the video should be added as part of the iframe in the editor.

The Tag Library used for this component is rte-taglib.jar, we need change this library.

Changed files are:

  • ckeditor.js (add new plugin)

j.video={init:function(m){m.addCommand(‘video’, new a.dialogCommand(‘video’));m.ui.addButton(‘Video’,{label:m.lang.video,icon:this.path+’images/video_qualifier.png’,command:’video’});a.dialog.add(‘video’, this.path + ‘dialogs/video.js’);}};j.add(‘video’, j.video);

  • config.js (declare a new plugin):

config.extraPlugins = ‘wclinkexist,wclinknew,wcimage,video,snippet,tools’; config.toolbar_WC = [ …. [‘WCLinkExist’,’WCLinkNew’,’WCImage’,’Video’,’-‘], …. ];

  • Lang/en.js (new labels for the video plugin)

…..

video : ‘Embed Video’,

videodialog :

{

title                   : ‘Select video’,

},

……

To display the video dialog, we created a new plugin and added it to the plugins folder

(META-INF\adf\oracle\webcenter\doclib\rte\jsLibs\ckeditor\plugins\video).

‘video’ folder contains two subfolders: ‘images’ folder (contains icon image to open the dialog  box) and ‘dialog’ folder (contains dialog.js file with logic to display videos and create <iframe>  in the editor when closing the dialog box)

Now to add some content inside of the dialog box and pass some value to the editor, you can check the source of other plugins as help (I used the Colordialog plugin).

This is the code snippet to add <iframe> in the editor when the user clicks on the OK button:

var dialog = this,

data = {},

iframe = c.createElement( ‘iframe’ ),

div = c.createElement(‘div’);

obj.commitContent( data );

div.setAttribute(‘class’, ‘video’);

iframe.setAttribute( ‘src’, ‘urlValue’);

iframe.setAttribute( ‘width’, ‘620’ );

iframe.setAttribute( ‘width’, ‘349’ );

iframe.setAttribute( ‘frameborder’, ‘0’);

iframe.appendTo(div);

a.insertElement(div);

This was done in WebCenter Portal 11.1.1.8 but is compatible with 11.1.1.7 and 11.1.1.6., as well.

If you have any questions, or would like to talk to someone from TEAM, contact us!

2 Responses to WebCenter CK Editor Customization – WebCenter Portal

  1. Jaap says:

    Great blog post. The version of CKEditor in WebCenter Portal is not the most recent and it’s hard to upgrade or customize it. But, if you have to, this is the way to go. Although I doubt whether Oracle will support custom changes to the rte-taglib library, and you may run into issues when patching or upgrading as well.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: