Tweaking CKEditor Styles to Be Fully Responsive

It’s super easy to tweak the CKEditor styles to meet your exact needs. In this lesson, we get it working for all screen sizes with a few lines of CSS and a little JavaScript.

<!--app.vue-->
<Editor style="max-width: 100%" />

<!--Editor.vue-->
<script setup>

function onReady(editor) {
  //...
  const annotationsUIs = editor.plugins.get( 'AnnotationsUIs' );
  function refreshDisplayMode() {
    if ( window.innerWidth < 1115) {
      annotationsUIs.switchTo( 'inline' );
    } else {
      annotationsUIs.switchTo( 'wideSidebar' );
    }
  }

  editor.ui.view.listenTo( window, 'resize', refreshDisplayMode );
  refreshDisplayMode();
}

</script>
<style scoped>
@media (max-width: 1115px) {
  :deep(.editor-container__sidebar) {
    min-width: 0px;
    width: 0px;
    visibility: hidden;
  }
  :deep(.ck-editor__editable) {
    min-width: 0 !important;
  }
}
</style>

Links

• Git Commit for Annotations Sidebar Fix