CKEDITOR.replace(); is not working

Question

Well i am using VS2010 to integrate CKeditor in MVC 3. I am successively able to integrate it but I am facing issue with customize toolbar. I have config.js under Scripts/ckeditor folder. I have create a copy of config.js and placed it under the root directory(i.e testmvc) and renamed it to "myconfig.js". Now my config.js looks like this :

CKEDITOR.editorConfig = function (config) {

// Define changes to default configuration here. For example:

// config.language = 'fr';

// config.uiColor = '#AADC6E';

CKEDITOR.replace('editor1',

{

customConfig :  'testmvc1/myconfig.js'

} );

};

and my "myconfig.js" looks like this:

CKEDITOR.editorConfig = function( config )

{ // Define changes to default configuration here. For example:

// config.language = 'fr';

// config.uiColor = '#AADC6E';

config.toolbar = 'Full';

config.toolbar_Full =

[

{ name: 'document', items: ['Source', '-', 'Save', 'NewPage', 'DocProps', 'Preview', 'Print', '-', 'Templates'] }, ];

};

Now i want that default config.js should redirect it to my custom "myconfig.js" so that i can use my customized toolbar, but the replace command is not working. It is throwing me an error when i launch the website. Please suggest me something because i tried everything on the net

Answer 1

Why do you have config.js and myconfig.js? You need one of them (the latter probably). Then in your HTML just add <script> tag with:

CKEDITOR.replace('editor1', {
    customConfig:  'testmvc1/myconfig.js'
});

BTW if you have an error on the console, please attach it next time. We're not magicians.

Answer 2

The call to load the editor needs to be in the file with the textarea. Either in the head inside the onload event or after the textarea is called.

<script type="text/javascript">
    CKEDITOR.replace('editor1',
    {
        customConfig :  'testmvc1/myconfig.js'    
    } );
</script>

Here's the page from the developer's guide: Developers_Guide: Integration

---

To call your custom config within the default config file, try this:

config.customConfig = 'testmvc1/myconfig.js';

---

Possible causes of error:

Try reversing the order of your toolbar config assignments:

config.toolbar_Full =
[
    { name: 'document', items: ['Source', '-', 'Save', 'NewPage', 'DocProps', 'Preview', 'Print', '-', 'Templates'] }
];

config.toolbar = 'Full';

You need to define the toolbar before you assign it.

---

Also, something that might cause the error is the comma between the closing brace and the closing bracket 'Templates'] }, ];