Blog

As many WebCenter Sites developers already know, the flexibility of the CKEditor attribute editor allows us to apply customizations to it. Actually, implementing these customizations isn't always the easiest task. For the newest 12c version, Oracle's official documentation can, unfortunately, be quite confusing.

To help clarify how to implement CKEditor customizations in 12c, this blog will outline simple instructions on how to customize the CKEditor toolbar.

Say for instance that we have an attribute called "Abstract," and it needs a basic, simplified CKEditor as its attribute editor. The toolbar of the out-of-the-box CKEditor is too complicated and cumbersome for this particular attribute; it is similar to the toolbar portrayed in the image above. We need to simplify this toolbar for our "Abstract" attribute.

So how do we do this? The steps are simple:

First of all, we need to extend the default CKEditor toolbar by defining custom toolbar elements in a properties file. We can do this by adding a Javascript properties file within the 12c extend.sites.webapp-lib.war file. For instance, I have added the file "web/src/main/ckeditor/laboutiqueconfig.js" inside the extend.sites.webapp-lib.war file and have defined a custom toolbar section (called absToolbarDef) within it:

a.toolbar_absToolbarDef = [

['Bold','Italic','Underline','-','RemoveFormat'],['Link','Unlink','Anchor'],['NumberedList','BulletedList','CreateDiv','ShowBlocks'],['Source']

];

Then, we need to create a new attribute editor via the Admin UI and wire it up to the new CKEditor toolbar definition. In my example, I have created a new attribute editor called "AbsCKEditor". Notice the two parameters CONFIG="laboutiqueconfig.js" and TOOLBAR="absToolbarDef" that connect it to the new definition:

AbsCKEditor.jpg

The next step will be to actually deploy the extend.sites.webapp-lib.war file to the application server that is housing WebCenter Sites 12c. Then, a simple restart, and assign the new "AbsCKEditor" to our attribute "Abstract," and voila, a much more streamlined, basic toolbar:

EditMode.jpg

Happy customizing!