javascript - 响应式网页设计中的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 });
    }
}