Answers

• allan Posts: 63,680Questions: 1Answers: 10,498 Site admin

  February 2016 Answer ✓

  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 Posts: 417Questions: 126Answers: 18

  February 2016 edited February 2016

  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 Posts: 63,680Questions: 1Answers: 10,498 Site admin

  February 2016

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

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

  Allan
• crush123 Posts: 417Questions: 126Answers: 18

  February 2016

  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 Posts: 63,680Questions: 1Answers: 10,498 Site admin

  February 2016

  Can you give me a link to the page?

  Allan
• crush123 Posts: 417Questions: 126Answers: 18

  February 2016 edited February 2016

  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 Posts: 63,680Questions: 1Answers: 10,498 Site admin

  February 2016

  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 Posts: 417Questions: 126Answers: 18

  February 2016 edited February 2016

  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.