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.

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

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-INFadforaclewebcenterdoclibrtejsLibsckeditorpluginsvideo).

‘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!