2017-08-09 23 views
0

私は、ボタンの押下に基づいてプリセット間でツールバーをスワップする機能をユーザーに提供しようとしています。ボタンがCKEditor画面にあるのが理想的ですが、私はそれを使って遊ぶことができます。CKEditor - 表示されているボタンを切り替えるボタン

私はthis SO Articleを見つけました。このインスタンスでは、インスタンスを破棄し、新しい設定で再初期化するという概念が得られました。

私は高いランクの回答をとり、テーブルに合わせて修正してボタンに投げた。

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で直接行う方法がありますか?

更新それはIDとeditorのインスタンス化は、それを見つけることの問題を解決しますが、エディタは、私はそれをクリックするたびに空にされている修正のように思える

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

。インスタンスを破壊する代わりにreloadの設定がありますか?私はこれまででだのはここ

アップデート2

です。再初期化中にデータを失うことはありませんが、「else」ステートメントをトリガすることができません。

答えて

0

私の関数は正しかったですが、varが初期化されています - 関数が目的をすべてリセットしていました。 AKAまた、ツールバーの事前に定義された設定とFullに交換することができ、クリック

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

上-always-本当です。

関連する問題