Learn Vue JS course Learn Javascript and Vue JS Learn VueJS course Learn VueJS Tutorial

Build a Google Docs Clone with CKEditor in 30 Minutes

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