Basic CKEditor setup with JQuery and a custom config file

Question

This is my first time using CKeditor and I am trying to get some of the basics working. I have a test page, (not PHP, just basic HTML) with JQuery and Bootstrap loaded and working OK. I have two fields. I have linked to the CKEditor CDN and loaded adapt_jquery.js in the <head>

Relevant HTML

If I place this script at the bottom of the page, I get an instance of CKEditor on each <textarea> with the specified ui color and size.

<script type="text/javascript">
$('textarea').ckeditor(
   {
    uiColor : '#03BC5D',
    language : 'en',
    height : 100,
    width : 600 ,  
   }
);
</script>

If I use the script below on the page, an editor is rendered for each <textarea>, and The Firefox web developer plug in shows that custom_config.js is in the list of Javascript files. However the editor instance that loads for each <textarea> had not been affected by my custom config file. I expect that I am missing something simple, but can't figure out what.

 <script>
  $('textarea').ckeditor(
   {
      customConfig : '/JQTesting/ck_custom/custom_config.js'       
    }
  );
 </script>

Custom Config File:

CKEDITOR.editorConfig = function( config ) {
    uiColor : '#03BC5D';
    language : 'en';
    height : 100;
    width : 600;
};

Is there any console error or warning saying it can't find the file perhaps? — AtheistP3ace
Thank you for responding. I was getting a JS error: missing semi-colons after each declaration in the custom_config.js file. Corrected it, no longer getting errors, but the editor is still not affected by the custom config file. I edited my original post to reflect the changes. — Empulse
I am no longer getting errors, but it still does not work. The editor instances are still not being affected by the custom config file. It its just that I am no longer getting JS errors. — Empulse

t.niese t.niese · Accepted Answer · 2015-11-19T15:37:30

You have to set the properties of the config parameter, so you code has to look like this

CKEDITOR.editorConfig = function( config ) {
    config.uiColor = '#03BC5D';
    config.language = 'en';
    config.height = 100;
    config.width = 600;
};

You created different labels (MDN: label) in your function by using the : outside of an object literal. As of that you didn't change config and your editorConfig function didn't do anything.

Basic CKEditor setup with JQuery and a custom config file

1 Answers