ckEditor响应式网页设计

Question

我在我的响应式设计网站中使用CKEditor 4.5.11。一切似乎工作正常，除了2 ckEditor问题列在下面：

1. 如何使插入图像响应ckEditor？我为他们使用了我的CSS，但它根本不起作用。即使它不适用于那些。
2. 如何将ckEditor完整工具栏转换为移动（小屏幕）设备的基本和简单工具栏，例如当宽度小于600px？

我在Google和Stack Overflow上搜索了很多，但没有给出适当的解决方案，除了几个基于Drupal的解决方法，我没有任何处理和我的业务。我认为这个话题到目前为止在互联网上并没有被认真考虑。

任何ckEditor插件，自定义JS或CSS解决方案将被接受，如果它工作。请注意，我不想更改（升级）我的ckEditor，因为它使用ckFinder进行了很好的设置，当我升级到过去时，所有内容都被破坏了。所以请不要提升升级。

Answer 1

对于敏感的图像，使用此：

CKEDITOR.addCss('.cke_editable img { max-width: 100% !important; height: auto !important; }'); 

如果您想在浏览器调整大小，以修改工具栏，你不能这样做，不破坏实例，并用另一个工具栏的配置重新创建它（的内容将不会迷路）。对于这一点，你可以使用window.matchMedia（在Firefox，Chrome和IE 10的支持）是这样的：

var toolbar_basic = [ 
    ['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink','-','About'] 
] 
var toolbar_full = [ 
    { name: 'document', items : [ 'Source','-','Save','NewPage','DocProps','Preview','Print','-','Templates' ] }, 
    { name: 'clipboard', items : [ 'Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo' ] }, 
    { name: 'editing', items : [ 'Find','Replace','-','SelectAll','-','SpellChecker', 'Scayt' ] }, 
    { name: 'forms', items : [ 'Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 
     'HiddenField' ] }, 
    '/', 
    { name: 'basicstyles', items : [ 'Bold','Italic','Underline','Strike','Subscript','Superscript','-','RemoveFormat' ] }, 
    { name: 'paragraph', items : [ 'NumberedList','BulletedList','-','Outdent','Indent','-','Blockquote','CreateDiv', 
     '-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','-','BidiLtr','BidiRtl' ] }, 
    { name: 'links', items : [ 'Link','Unlink','Anchor' ] }, 
    { name: 'insert', items : [ 'Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak','Iframe' ] }, 
    '/', 
    { name: 'styles', items : [ 'Styles','Format','Font','FontSize' ] }, 
    { name: 'colors', items : [ 'TextColor','BGColor' ] }, 
    { name: 'tools', items : [ 'Maximize', 'ShowBlocks','-','About' ] } 
] 

var mqs = [ 
    window.matchMedia('(max-width: 600px)') 
] 

mqs.forEach(function(mq) { 
    mq.addListener(widthChange); 
}); 

widthChange(); // call it once initially 

function widthChange() { 
    if (CKEDITOR.instances.editor1) { 
     CKEDITOR.instances.editor1.destroy(); 
    } 
    if (mqs[0].matches) { 
     // window width is less than 600px 
     CKEDITOR.replace('editor1', { toolbar: toolbar_basic }); 
    } else { 
     // window width is at least 600px 
     CKEDITOR.replace('editor1', { toolbar: toolbar_full }); 
    } 
}