CKEditor: how to define custom configuration file?

[Connie]

I want to create a custom file, which will not be overwritten by updates.
The standard configuration file is per default admin/template/js/ckeditor/config.js

CKEDITOR.config.customConfig defines the URL Path to the config-file, which is per default '<CKEditor folder>/config.js'

see here: http://docs.cksource.com/ckeditor_api/sy...stomConfig

I tried to set in gsconfig.php:

Code:

# WYSIWYG Editor Options
define('GSEDITOROPTIONS', "
  enterMode: CKEDITOR.ENTER_P,
customConfig : 'admin/template/js/my.js'  
");

or

Code:

# WYSIWYG Editor Options
define('GSEDITOROPTIONS', "
  enterMode: CKEDITOR.ENTER_P,
customConfig : '/my.js'  
");

or

Code:

# WYSIWYG Editor Options
define('GSEDITOROPTIONS', "
  enterMode: CKEDITOR.ENTER_P,
customConfig : /my.js'  
");

it all does not work. So I see only the chance to edit config.js which comes with getsimple, but I would like to have another, customdefined configuration

[mvlcek]

Connie, what do you want to configure?

I have most of my configuration in gsconfig.php, only the styles are outside - this took a lot of trial and error:

Code:

define('GSEDITOROPTIONS',
  " toolbar: [
            ['Bold', 'Italic', 'Underline', 'NumberedList', 'BulletedList', 'JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock', 'Outdent', 'Indent'],
      ['Table', 'Link', 'Unlink', 'Image', 'RemoveFormat', 'Source'],
      '/',
      ['Styles','Format'],
    ],
    stylesCombo_stylesSet: 'my_styles:/theme/Choice/styles.js',
    contentsCss: '/theme/Choice/default.css',
    bodyId: 'content'
");

styles.js looks like this to have a styles drop down for the editor to style paragraphs (and code fragments):

Code:

CKEDITOR.addStylesSet( 'my_styles',
[
    // Block Styles
    { name : 'Normal', element : 'p', attributes : { } },
    { name : 'Motto1', element : 'p', attributes : { 'class' : 'motto1' } },
    { name : 'Motto2', element : 'p', attributes : { 'class' : 'motto2' } },
    { name : 'Motto3', element : 'p', attributes : { 'class' : 'motto3' } },
    { name : 'Rechts', element : 'p', attributes : { 'class' : 'rfloat' } },
    { name : 'Links', element : 'p', attributes : { 'class' : 'lfloat' } },

    // Inline Styles
    { name : 'Code', element : 'span', attributes : { 'class' : 'code' } },
]);

Now the content in the page editor looks (nearly) exactly like the real site.

[Connie]

mvlcek,

thank you for these informations! Your example gives me a lot of insights.

Well, as I am always working on CKEditor-Integrations (it's my editor of choice) and I did that for Joomla (many times ago), for CMSimple and for CMSMadeSimple, I am always trying to get the most out of the editor and I prefer to use separate configuration files as by that it is possible to use the original commands and not special syntaxes of the relevant CMS.

So custom.CONFIG is what I want to define in GSEDITOROPTIONS and the rest will be done in the specific folder.

I see you set

Code:

stylesCombo_stylesSet: 'my_styles:/theme/Choice/styles.js',

which means that the file is located in theme/yourTheme/ ?


why do you define the toolbar in GSEDITOROPTIONS and not in GSEDITORTOOL?

how to add the custom.CONFIG to the options? I will try that in the next working break ;=)

[Connie]

Code:

# WYSIWYG Editor Options
define('GSEDITOROPTIONS', "
  enterMode: CKEDITOR.ENTER_P,
       bodyId: 'content',
    customConfig : '/theme/canvass/wb.js'
    ");

this does not load the file "wb.js" in the folder /theme/canvass/ unfortunately

[n00dles101]

setting it like this works :

Code:

stylesCombo_stylesSet: 'my_styles:../../../../theme/Choice/styles.js'

[mvlcek]

I see you set

Code:

stylesCombo_stylesSet: 'my_styles:/theme/Choice/styles.js',

which means that the file is located in theme/yourTheme/ ?

Yes, it contains references to the styles and thus I think it belongs into the theme's directory.

why do you define the toolbar in GSEDITOROPTIONS and not in GSEDITORTOOL?

With GSEDITORTOOL you can only set the toolbar to specific configurations (e.g. "advanced"), but not define it with exactly the tools you want.

[n00dles101]

@mvlcek, you can use the to define the toolbar. We added GSEDITOROPTIONS to allow other options to be added. You can use eitehr for defining the toolbar.

Here's mine:

Code:

# WYSIWYG toolbars (advanced, basic or [custom config])
define('GSEDITORTOOL', "['Bold', 'Italic', 'Underline', 'NumberedList', 'BulletedList', 'JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock', 'Table', 'TextColor', 'BGColor', 'Link', 'Unlink', 'Image', 'RemoveFormat', 'Source'],
            '/',['Format']");

[Connie]

setting it like this works :

Code:

stylesCombo_stylesSet: 'my_styles:../../../../theme/Choice/styles.js'

thanks, that's the problem: the link was not relative to the script ... I will check!

[Connie]

Unfortunately it is not working:

Code:

define('GSEDITORTOOL',"['Source','-','Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo','Find','Replace','-','SelectAll','RemoveFormat'],
    '/',
    ['Bold','Italic','Underline','Strike','-','Subscript','Superscript','-','JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'],
    ['TextColor','BGColor','-','Rule','PageBreak'],['NumberedList','BulletedList','-','Outdent','Indent'],
    '/',
    ['Blockquote','-','Smiley','SpecialChar'],['Link','Unlink','Anchor'],
    ['Image','Flash','Table','HorizontalRule','SpecialChar'],
               '/',
    ['Styles','Format','Font','FontSize'],['ShowBlocks']
    ");

# WYSIWYG editor language (default en)
define('GSEDITORLANG', 'de');
# WYSIWYG Editor Options
define('GSEDITOROPTIONS', "
customConfig : '../../../../theme/canvass/wb.js'

");

wb.js in /themes/canvass/...:

Code:

CKEDITOR.editorConfig = function( config )
{
    // Define changes to default configuration here. For example:
    // config.removePlugins = 'elementspath,resize' ; // hide element path and resizer
    config.toolbarCanCollapse = true; // hide toolbar collapse button
    config.enterMode = CKEDITOR.ENTER_P,
    config.skin = 'v2',
      config.bodyId = 'content',
    config.forceSimpleAmpersand = false,
    config.fontSize_defaultLabel = '11px',
    config.font_defaultLabel = 'Verdana',
    config.entities = false,
    config.emailProtection = 'encode',
    config.contentsLanguage = 'de',
    config.toolbarLocation = 'top',
    config.browserContextMenuOnCtrl = false
    };

I get the standard getsimple-skin and the functionalities are not activated.

I read in the documentation:

CKEDITOR.config.customConfig: The URL path for the custom configuration file to be loaded

so I do not think I need a replace-code in the command, but I even tried with to no avail...
I even tried with absolute URL...

PS: some of the commands here are for testing whether the file is read or not..

[Connie]

I managed to get the CustomConfig-setting working:

Code:

# WYSIWYG Editor Options
define('GSEDITOROPTIONS', "
    customConfig : '../../../../theme/canvass/wb.js',
    skin : 'v2'
");

Only the skin-directive was not read from that file, so I had to include it in the options here...

[mikeh]

What if all the options were there, but commented out? Then all we would have to do is un-comment the ones we would like to enable?

Or there is a list of all the options in a comment, above the config line?

[Connie]

What if all the options were there, but commented out? Then all we would have to do is un-comment the ones we would like to enable?

Or there is a list of all the options in a comment, above the config line?

That's what I suggest in another post, too