How to set ckeditor config when using the jquery version?

Question

I'm using the jquery version of ckeditor, like this:

$(".textarea").ckeditor();

I need to specify the toolbar buttons, but I don't know how. All the help I found here on stackoverflow or using google was for the old javascript ckeditor version, OR I don't know how to use it with jquery (code above).

Also, how do I specify the css file location, so that the ckeditor loads my css and displays the data the same way it will be displayed on the site?

Anyone can help with this mess?

Answer 1

$(".textarea").ckeditor(function() { 
   // Instance loaded callback.
}, {
   // Config here.
});

Answer 2

Not sure if this is a new feature of CKEDITOR, but just want to share my solution (in case it helps anyone looking for this now):

$("textarea.youreditor").ckeditor
(
    {
        customConfig: "/path/to/custom/config.js"
    }
);

... and my config looks like this (simply copied the default config.js:

CKEDITOR.editorConfig = function(config)
{
    config.toolbar_Full =
    [
        { name: 'basicstyles', items : [ 'Bold','Italic','Underline','Strike','Subscript','Superscript','-','RemoveFormat' ] },
        { name: 'paragraph', items : [ 'NumberedList','BulletedList','-','Outdent','Indent','-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'] },
        { name: 'insert', items : [ 'Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak','Iframe' ] },
        { name: 'colors', items : [ 'TextColor','BGColor' ] }
    ];  
};    

** I am cross posting my solution from here: How do I pass in config info to CKEditor using the jQuery adapter?

Answer 3

This is how I set the config using jQuery....

var config = {
              toolbar: [ /* Whatever toolbars you wish go here. */ ],
              height: 250,
              width: 500,
              align: "left",
              contentsCss: ["body { /* Style your body any way you like */ } otherCSSStuff { /* Style away. */} "]
              /*and whatever other options you wish to config... */
             };

$( 'textarea.editor' ).ckeditor( config, function() { /* Your callback function. */ } );