CKEditor-切換顯示的工具欄的按鈕

Question

我正在嘗試讓用戶能夠基於按鈕的按下在工具欄之間切換。 理想情況下，該按鈕應該在CKEditor屏幕中，但是我可以使用它。

我在這篇SO文章中找到了一個概念，您可以銷毀您的實例，然后使用“新配置”將其重新初始化。

為了跟進，我采取了排名較高的回答之一，對其進行了修改以匹配我的桌子，然后將其扔到按鈕上。

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);
}

replace命令使我感到擔心，因為我看不到它是否起作用，因為編輯器中的數據是否會消失，但是當我單擊運行此功能的按鈕時，無論哪種方式都沒有發生。

這是最好的方法，還是我可以直接在CKEditor中執行此操作？

更新

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);
}

似乎修改ID的editor實例化可以解決它找到它的問題，但是每次單擊它時，編輯器就會被清空。 有沒有辦法reload配置，而不是銷毀實例？

更新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")
  };
}

這是我到目前為止的位置。 在重新初始化期間，我不會丟失數據，但是我永遠無法觸發“ else”語句。

Answer 1

我的函數是正確的，但是var正在初始化-in-函數正在重置它的用途。 再次點擊，它總是-正確

<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
  };
}

也可以與工具欄的預定義配置Full交換。