CKEditor: how to define custom configuration file?

CKEditor: how to define custom configuration file? - Printable Version

+- GetSimple Support Forum (http://get-simple.info/forums)
+-- Forum: GetSimple (http://get-simple.info/forums/forumdisplay.php?fid=3)
+--- Forum: General Questions and Problems (http://get-simple.info/forums/forumdisplay.php?fid=16)
+--- Thread: CKEditor: how to define custom configuration file? (/showthread.php?tid=1494)

CKEditor: how to define custom configuration file? - Connie - 2011-03-30

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/symbols/CKEDITOR.config.html#.customConfig

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

CKEditor: how to define custom configuration file? - mvlcek - 2011-03-30

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.

CKEditor: how to define custom configuration file? - Connie - 2011-03-30

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

CKEditor: how to define custom configuration file? - Connie - 2011-03-30

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

CKEditor: how to define custom configuration file? - n00dles101 - 2011-03-30

setting it like this works :

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

CKEditor: how to define custom configuration file? - mvlcek - 2011-03-30

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.

CKEditor: how to define custom configuration file? - n00dles101 - 2011-03-30

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

CKEditor: how to define custom configuration file? - Connie - 2011-03-30

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!

CKEditor: how to define custom configuration file? - Connie - 2011-03-30

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

CKEditor: how to define custom configuration file? - Connie - 2011-04-01

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

CKEditor: how to define custom configuration file? - mikeh - 2011-04-02

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?

CKEditor: how to define custom configuration file? - Connie - 2011-04-02

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