响应式网页设计中的ckEditor

Question

我在我的响应式设计网站中使用 CKEditor 4.5.11。除了下面列出的 2 个 ckEditor 问题外，一切似乎都运行良好：

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

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