CKEDITOR And Styles configuration with only toolbar

Question

I try to configure CKEDITOR in Oracle Framework "Endeca v 11.1.0" but something is wrong. I can only configure toobar like this :

[
{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ], items: [ 'Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat' ] },
'/',
{ name: 'styles', items: [ 'Styles', 'Format', 'Font', 'FontSize' ] },
{ name: 'colors', items: [ 'TextColor', 'BGColor' ] },
{ name: 'tools', items: [ 'Maximize', 'ShowBlocks' ] },
{ name: 'others', items: [ '-' ] },
{ name: 'about', items: [ 'About' ] }
];

and i cannot configure styles like i want. By default i have sur styles of ckeditor and it is normal. i have not set a good style.js with good configuration.

I want to configure specific style and i have read somes documentation like this : http://docs.ckeditor.com/#!/guide/dev_styles but how can i do that in my configuration :

CKEDITOR.stylesSet.add( 'my_styles', [
// Block-level styles
{ name: 'Blue Title', element: 'h2', styles: { 'color': 'Blue' } },
{ name: 'Red Title' , element: 'h3', styles: { 'color': 'Red' } },
// Inline styles
{ name: 'CSS Style', element: 'span', attributes: { 'class': 'my_style' } },
{ name: 'Marker: Yellow', element: 'span', styles: { 'background-color': 'Yellow' } }
]);

How can i set specific style in toolbar configuration only ?? Thx for help

Answer 1

I'm going to give advice that you might not find helpful :) Instead of creating a custom editor for use within Experience Manager (and then having to maintain that during upgrades, etc), it might be better instead to give them an editor UI completely separate from XM. Then, when they have their nice HTML to copy and paste it into XM.

Another idea: Instead of creating a Flex editor directly (like what you're doing), create a light-weight Flex editor that launches a popup window (where that would be a webapp hosted outside of XM directly). Then have that popup window return a block of HMTL as text. This would allow you to create a fancy editor but not be constrained by Flex.

I can't share a full code example for my second recommendation, but in Flex you can open a popup windoww by doing:

 ExternalInterface.call("window.open",
       popupUrl, "Select Value",
       "menubar=1,resizeable=1,width=1000,height=800,location=yes,menubar=yes,scrollbars=1,toolbar=1");

... where popupUrl would be the URL of your exteranl web app.

Then, in the webapp, when you want to pass back a value, you can do:

windowOpener = window.opener.document.xmgrSwfElement;
windowOpener.selectValue(path);
window.close();