2017-08-09 275 views
0

我想讓用戶能夠在基於按鈕按下預設的工具欄之間切換。理想情況下,該按鈕將在CKEditor屏幕上,但我可以玩弄它。CKEditor - 按鈕切換顯示工具欄

我找到了this SO Article,其中我得到了你銷燬你的實例的概念,並用'New Config'重新初始化它。

爲了效仿我選擇了排名較高的回覆之一,將其修改爲匹配我的表格,然後將其扔到一個按鈕上。

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

好像修改的editor與ID的實例解析它發現它的問題,但編輯器被清空我點擊它每一次。有沒有辦法reload的配置,而不是銷燬實例?

更新2

這是我在哪裏爲止。在重新初始化期間,我不會丟失數據,但我無法獲得'else'語句觸發。

回答

0

我的函數是正確的,但var被初始化 - 在函數重置它的目的是一切。 AKA這是對點擊

<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與工具欄預定義的配置-always-如此。