GetSimple Support Forum - CKEditor: how to define custom configuration file?

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'  

");

Code:
# WYSIWYG Editor Options

define('GSEDITOROPTIONS', " 

  enterMode: CKEDITOR.ENTER_P,

customConfig : '/my.js'  

");

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

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.

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 ;=)

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

setting it like this works :

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

Connie Wrote: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.

Connie Wrote: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.

@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']");

n00dles101 Wrote: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!

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:

Quote: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..

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

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?

mikeh Wrote: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