Изменение конфигурации 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 и добавить новое текстовое поле снова 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'}); 
}); 
});