ck editor config

crush123

probably simple, but how do i configure the toolbar on the ckeditor editor plugin?

i have a config.js file but changing it doesn't seem to make any difference.

Cant seem to find an example

can i do this directly with ...

        type: "ckeditor",
        opts: "{}"

can i point to a js file within opts, or key in the values ?

allan

The opts parameter given (which should be an object, not a string) is just passed to the CKEditor constructor:

 CKEDITOR.replace( id, conf.opts );

If that accepts a js file in the second parameter, then it would work, but the CKEditor documentation doesn't seem to suggest it does.

Can you not just load your js file as normal (assuming it assigns the config to a variable) and then pass that config in?

Allan

crush123

looking at the ckeditor help, it appears that i can do this...

CKEDITOR.replace( 'editor1', {
customConfig: '/custom/ckeditor_config.js'
});

using this and the example above, I assume that replacing the 'editor1' with the div id of the text area (in my case DTE_Field_tblcmscontent-ContentValue) would be it

so is it just a case then of using a modified version of this line as my option ?

label: "Content Value:",
            name: "tblcmscontent.ContentValue",
            type: "ckeditor",
            opts: CKEDITOR.replace( "DTE_Field_tblcmscontent-ContentValue", {
                customConfig: '/ckeditor/config.js'
                })

or am I missing the point ?

allan

If you can pass a customConfig option have you tried doing so as follows?:

type: "ckeditor",
opts: {
  customConfig: '...'
}

Allan

crush123

to be honest, nothing seems to work.

I can't even enforce the slightest change from the default setting, whether trying a custom config option, or simply to add/remove sections of the toolbar

allan

Can you give me a link to the page?

Allan

crush123

in this example, i tried just setting the toolbar to basic in my editor instance

{
            label: "Content Value:",
            name: "tblcmscontent.ContentValue",
            type: "ckeditor",
            opts: { toolbar : 'Basic' }
        }

allan

Looks like you need to update your CKEditor plug-in for Editor. Specifically in the version you have:

conf._editor = CKEDITOR.replace( id );

needs to be:

conf._editor = CKEDITOR.replace( id, conf.opts );

Allan

crush123

Ok, thanks for pointing that out.

Updated js file in place

i tried the following, and it works

            {
            label: "Content Value:",
            name: "tblcmscontent.ContentValue",
            type: "ckeditor",
            opts: { toolbar : [['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink','-','About']],
                    uiColor : '#9AB8F3'
                 }
        }

so now I will look at using a config file. ;-)

OK, in order to use a config file, here is a basic example of what i did.

Added a js file to the page with my custom settings

<script type="text/javascript" src="/pathto/config.js"></script>

in this case i made it a wacky colour and used french

CKEDITOR.editorConfig = function( config ) {
// Define changes to default configuration here.
// For complete reference see:
// http://docs.ckeditor.com/#!/api/CKEDITOR.config

config.toolbarGroups = [
      { name: 'document',    groups: [ 'mode', 'document', 'doctools' ] },
  //{ name: 'clipboard',   groups: [ 'clipboard', 'undo' ] },
  // { name: 'editing',     groups: [ 'find', 'selection', 'spellchecker' ] },
  { name: 'forms' },
  '/',
  //{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
  { name: 'paragraph',   groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ] },
  { name: 'links' },
  { name: 'insert' },
  '/',
  { name: 'styles' },
  { name: 'colors' },
  { name: 'tools' },
  { name: 'others' },
  { name: 'about' }
];

// Remove some buttons provided by the standard plugins, which are
// not needed in the toolbar.
config.removeButtons = 'Underline,Subscript,Superscript';

// Set the most common block elements.
config.format_tags = 'p;h1;h2;h3;h4;pre';

// Simplify the dialog windows.
//config.removeDialogTabs = 'image:advanced;link:advanced';

config.language = 'fr';

config.uiColor = '#3AB423';
}; 

then in the editor instance

use the name of the config group as the option, in this case, i called it toolbarGroups

                type: "ckeditor",
            opts: { toolbar: 'toolbarGroups' }

that should do it.