根据下拉列表动态更改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'}); 
}); 
});