• Home
  • About
    • Team
    • Partners
  • Products
    • Connectors
      • DOCSConnect
      • GSA Connector for Alfresco
      • Oracle WebCenter Content Connector
      • WebCenter Sites to WebCenter Content Connector
      • Elasticsearch Connector for WebCenter Content
      • Syl Search
    • eSignature for WebCenter Content
    • TEAM’s Redaction Engine
    • Intelligent Content
    • Bulk Loader for WebCenter Content
    • VERSExporter
  • Solutions
    • Google Search Appliance
    • Oracle WebCenter Suite
    • M-Files
    • eSignature with HelloSign
    • Syl Search
  • Services
    • Consulting
    • Support Services
    • Oracle Cloud Managed Services
    • On Demand Support
    • Training Services
  • Info
    • Case Studies
    • White Papers
    • Custom Components
    • Videos
  • Blog
  • Contact

Call us today! +1.651.222.TEAM (8326)

We are Global
sales@teaminformatics.com
TEAM Informatics TEAM Informatics
  • Home
  • About
    • Team
    • Partners
  • Products
    • Connectors
      • DOCSConnect
      • GSA Connector for Alfresco
      • Oracle WebCenter Content Connector
      • WebCenter Sites to WebCenter Content Connector
      • Elasticsearch Connector for WebCenter Content
      • Syl Search
    • eSignature for WebCenter Content
    • TEAM’s Redaction Engine
    • Intelligent Content
    • Bulk Loader for WebCenter Content
    • VERSExporter
  • Solutions
    • Google Search Appliance
    • Oracle WebCenter Suite
    • M-Files
    • eSignature with HelloSign
    • Syl Search
  • Services
    • Consulting
    • Support Services
    • Oracle Cloud Managed Services
    • On Demand Support
    • Training Services
  • Info
    • Case Studies
    • White Papers
    • Custom Components
    • Videos
  • Blog
  • Contact

WebCenter CK Editor Customization – WebCenter Portal

Home Oracle WebCenter CK Editor Customization – WebCenter Portal

WebCenter CK Editor Customization – WebCenter Portal

Feb 18, 2014 | Posted by teaminformatics | Oracle, WCM, WebCenter Portal | 0 comments |

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

Tags: CK editorConfigureEmbed VideoPortalPortal VideoVideoWebCenter
0 Comments
Share

You also might be interested in

GSA Connector 2.2.1 is Out!

Jan 4, 2013

TEAM’s dedicated Product Team is incessantly working on improving the[...]

The Low Hanging Fruit of WebCenter Content: Maximizing Your Investment

May 16, 2014

By: Dwayne Parkinson - Solution Architect Many clients I encounter[...]

Supporting our WebCenter Customers

Sep 21, 2011

by Matt Zelen The long term success of any WebCenter[...]

Leave a Reply

Your email is safe with us.
Cancel Reply

Recent Posts

  • Press Release: TEAM Informatics Announces Partnership with HelloSign & Introduces eSignature for WebCenter Content
  • How to Style an ADF Checkbox
  • Records Management Configuration Migration
  • Encryption Options for WebCenter Content
  • Sending E-mail from WebCenter Content using Office 365

Tags

10g 11g ADF Application Development Best Practices bpm Cloud cms Content content management customize Development ecm enterprise enterprise content management FatWire Google GSA GSA Connector Ipad Iphone JAVA Migration Mobile Mobile Application OpenWorld Oracle Oracle SOA Portal Products records Records Management REST Sites site studio social Spaces Task Flow TEAM Video VM WebCast WebCenter webcenter content webcenter sites

Categories

  • Alfresco
  • ecm
  • Email
  • General
  • Google Search Appliance
  • How To
  • Oracle
  • Oracle ATG
  • Oracle Documents Cloud Service
  • Portal
  • Records
  • Site Studio
  • TEAM Cloud
  • TEAM Products
  • Uncategorized
  • VERS
  • WCM
  • WebCenter Content
  • WebCenter Portal
  • WebCenter Sites
  • WebCenter Social
  • WebCenter Spaces
It's time to put your unstructured data to work Contact TEAM
Logo

Enterprise Content Management, Auto-classification, Hybrid Cloud, Oracle Public Cloud, Search & Managed Services

Fresh Blogs

  • Press Release: TEAM Informatics Announces Partnership with HelloSign & Introduces eSignature for WebCenter Content
  • How to Style an ADF Checkbox
  • Records Management Configuration Migration
  • Encryption Options for WebCenter Content

Popular Tags

BPM Endeca Search Enterprise Manager Google Search Appliance Information Rights Management Microsoft Office 365 Microsoft SharePoint Migrations Multi-Lingual Oracle Document Capture Records Sites Site Studio SOA WebCenter Content

Contact

  • TEAM Informatics, Inc.
  • 901 Marquette Ave Suite 1500 • Minneapolis, MN 55402
  • +1.651.222.8326
  • sales@teaminformatics.com

© 2018 · TEAM Informatics, Inc.

Prev Next