CKEditor - Button to switch shown Toolbar

Question

I'm trying to give a user the ability to swap around the toolbar between presets based on a button press. Ideally that button would be in the CKEditor screen, but I can play around with it.

I've found this SO Article in which I get the concept that you destroy your instance, and re-initialize it with a 'New Config'.

To follow suit I took one of the higher ranked responses, modified it to match my table, and threw it onto a button.

function toolbarSwap(){
    var editor = CKEDITOR.instances.editor;
    if (editor) { editor.destroy(true); }

    CKEDITOR.config.toolbar_Basic = [['Bold','Italic','Underline',
    '-','JustifyLeft','JustifyCenter','JustifyRight','-','Undo','Redo']];
    CKEDITOR.config.toolbar = 'Basic';
    CKEDITOR.config.width=400;
    CKEDITOR.config.height=300;
    CKEDITOR.replace('editor', CKEDITOR.config);
}

The replace command concerns me since I can't see it working, as to if the data within the editor will go away but either way nothing is happening when I click the button that runs this function.

Is this the best method, or is there a way I can do this within CKEditor directly?

Update

function toolbarSwap(){
  var editor = CKEDITOR.instances['editor'];
  if (editor) { editor.destroy(true); }

  CKEDITOR.config.toolbar_Basic = [['Bold','Italic','Underline',
  '-','JustifyLeft','JustifyCenter','JustifyRight','-','Undo','Redo']];
  CKEDITOR.config.toolbar = 'Basic';
  CKEDITOR.config.width=400;
  CKEDITOR.config.height=300;
  CKEDITOR.replace('editor', CKEDITOR.config);
}

It seems like modified the instantiation of editor with the ID resolves the issue of it finding it, but the Editor is being emptied every time I click it. Is there a way to reload the config, instead of destroying the instance?

Update 2

function changeToolBar() {
  var expanded = true;
  if (expanded === true) {
    var myToolBar = [{ name: 'verticalCustomToolbar', groups: [ 'basicstyles'], items: [ 'Bold', 'Italic'] }];
    var config = {};
    config.toolbar = myToolBar;
    CKEDITOR.instances.editor.destroy();//destroy the existing editor
    CKEDITOR.replace('editor', config);  
    expanded = false;
  } else {
    CKEDITOR.instances.editor.destroy();//destroy the existing editor
    CKEDITOR.replace('editor', {toolbar: 'Full'});     
    expanded = true;
    console.log("Expand me")
  };
}

Here is where I'm at so far. I am not losing the data during the re-init, but I am unable to ever get the 'else' statement to trigger.

score 0 · Answer 1 · answered Aug 09 '17 at 23:31

My Function was correct, but the var being initialized -in- the function was resetting it's purpose everything. AKA It's -always- true on click

<button type="button" onclick="changeToolBar()">Swap It</button>

function changeToolBar() {

  if (expanded === true) {
    var myToolBar = [{ name: 'verticalCustomToolbar', groups: [ 'basicstyles'], items: [ 'Bold', 'Italic'] }]; //Generic placeholder
    var config = {};
    config.toolbar = myToolBar;
    CKEDITOR.instances.editor.destroy();//destroy the existing editor
    CKEDITOR.replace('editor', config);  
    console.log(expanded); // Logging to ensure change
    expanded = false;
    console.log(expanded); // Logging to ensure the change
  } else {
    CKEDITOR.instances.editor.destroy();//destroy the existing editor
    CKEDITOR.replace('editor', {toolbar: 'Full'});   // Toolbar 'full' is a default one  
    expanded = true;
    console.log("Expand me") // Logging if it works
  };
}

Can also swap in Full with a predefined config for toolbars.

CKEditor - Button to switch shown Toolbar

1 Answers1