根據下拉列表動態更改CKeditor配置

Question

我有一個語言下拉列表，我希望我的ck編輯器以選定的下拉語言打開，但並未發生。它適用於第一次選擇，但之後，它仍然在那裏，根本不會改變。我檢查了警報的下拉值，它會很好。

這裏是我的jQuery代碼

$(function() { 
    $('.langdropdown').on('change', function() { 
     $('#communication-message').val(''); 
     langval = $('.langdropdown').val(); 
     $('#communication-message').ckeditor({ 
      language: langval, 
      uiColor: '#66FFCC' 
     }); 
    }); 
}); 

Answer 1

試試這個

$(document).ready(function() { 
    $('#communication-message').ckeditor(); 
    $('.langdropdown').on("change", function() { 
     var langCode = $(this).val(); 
     $($('#communication-message')).ckeditor(function() { 
      this.destroy(); 
     }).ckeditor({ 
      language: langCode 
     }); 
    }); 
}); 

更全面例如更改語言而不更改缺省設置的CKEditor。
的jsfiddle：http://jsfiddle.net/codeandcloud/u819q0og/

Answer 2

在Javascript中最當一個元素被初始化，你要「消滅」的時間，然後再使用新的值初始化的元素。我建議你找到一種'銷燬'當前ckeditor實例的方法，然後用新參數創建一個新實例。嘗試以下操作。我沒有嘗試，但它應該工作。

$(function() { 
    $('.langdropdown').on('change', function() { 
     var elem = $('#communication-message'); 
     var langval = $(this).val(); 
     elem.val(''); 
     elem.ckeditorGet().destroy(); 
     elem.ckeditor({ 
      language: langval, 
      uiColor: '#66FFCC' 
     }); 
    }); 
}); 

Answer 3

因此，解決我的問題之一是創建文本框外的2周的div一旦下拉值的變化，去除內部的div並追加新的文本框，再次outerdiv。

$(function(){ 
$('#communication-message').ckeditor({language:'en',uiColor:'#66FFCC'}); 
$('.langdropdown').on('change',function(){ 
$('.containerforck1').remove(); 
//alert('removed'); 
langval = $('.langdropdown').val(); 
$('.containerforck').append("<div class='containerforck1'><textarea id='communication-message' name='message' rows='10' class='span6' required> </textarea></div>"); 
$('#communication-message').ckeditor({language:langval,uiColor:'#66FFCC'}); 
}); 
});