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