In the next lesson, we'll be viewing the editor side by side in two different windows. Let's just quickly make sure that it looks great at all screen sizes by adding a few styles to make sure it's fully responsive. view, what I've done is added a style max width of 100% to the editor component itself. view, I've added this scoped style section.
Basically, it hides the editor sidebar at lower screen sizes and makes the actual editable area a min-width of zero at those lower screen sizes so it never overflows the window horizontally. Then at higher screen sizes, the sidebar will pop back in. You can copy these styles from the lesson source code. Now, one thing I missed in the original recording of this video...
is that while these styles do make things look better at the smaller screen size, they also hide our comments at the smaller screen size. So notice here on desktop, I have a comment off to the side, but on mobile, there is no way to view that comment. What's the solution? Well, CK Editor has something built in for this.
Inside of the onReady function, we have access to the CK Editor instance. where we can get the annotations UI plugin. This is what's responsible for displaying those comments. Then we can switch to an inline mode for those annotations on our smaller screen size.
This matches that width that we used in the media query in the style section below. And for our desktop screen size, we switch back to the comments being on the wide sidebar on the right-hand side, as we've already seen it. Then we just call this function both immediately when we have the editor ready and then also when the window size changes The result is that on a smaller screen size Now our comments show up in line on the desktop. They're exactly where they were before I've left a link to the commit that makes this change in the description below so you can copy and paste that as well In the next lesson, we'll be viewing the editor side by side in two different windows.
Let's just quickly make sure that it looks great at all screen sizes by adding a few styles to make sure it's fully responsive. view, what I've done is added a style max width of 100% to the editor component itself. view, I've added this scoped style section. Basically, it hides the editor sidebar at lower screen sizes and makes the actual editable area a min-width of zero at those lower screen sizes so it never overflows the window horizontally.
Then at higher screen sizes, the sidebar will pop back in. You can copy these styles from the lesson source code. Now, one thing I missed in the original recording of this video... is that while these styles do make things look better at the smaller screen size, they also hide our comments at the smaller screen size.
So notice here on desktop, I have a comment off to the side, but on mobile, there is no way to view that comment. What's the solution? Well, CK Editor has something built in for this. Inside of the onReady function, we have access to the CK Editor instance.
where we can get the annotations UI plugin. This is what's responsible for displaying those comments. Then we can switch to an inline mode for those annotations on our smaller screen size. This matches that width that we used in the media query in the style section below.
And for our desktop screen size, we switch back to the comments being on the wide sidebar on the right-hand side, as we've already seen it. Then we just call this function both immediately when we have the editor ready and then also when the window size changes The result is that on a smaller screen size Now our comments show up in line on the desktop. They're exactly where they were before I've left a link to the commit that makes this change in the description below so you can copy and paste that as well