CKEditor系列（七）编辑器工具栏根据宽度自动折叠

最新推荐文章于 2024-06-08 11:06:12 发布

原创

最新推荐文章于 2024-06-08 11:06:12 发布

· 572 阅读

0 ·

版权

文章标签：

#编辑器

本文介绍了如何修改CKEditor，使其工具栏能够根据窗口宽度自动折叠。通过简化DOM结构，实现按需折叠功能，同时保持兼容性。文章详细讲解了需求、实现原理、代码实现过程以及触发折叠计算的时机，旨在解决编辑器工具栏在有限空间下的显示问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

刚才看了看上一篇写CKEditor的文章是在今年的一月份，现在轮到我们的设计师对编辑器下手了。我们回顾下现在的编辑器长什么样子。

需求

我们客户端默认窗口尺寸下，会出现排，并且第二排的这些功能使用频次相对较低，为了尽可能的增大用户的操作区域，所以决定做如下改动：

1.将居左对齐、居中对齐、居右对齐改成三合一的功能> <img src=“https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2129b4f8a274420fbe1a61c92891ecdc~tplv-k3u1fbpfcp-zoom-in-crop-mark:1956:0:0:0.image)2.将频次使用率低的有序列表和无序列表调整至最后面3.根据可用宽度收起一行展示不下的工具栏图标> <img src=“https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/06ff6187190a4237a30a8aed8d4244ba~tplv-k3u1fbpfcp-zoom-in-crop-mark:1956:0:0:0.image)有这个需求，经验告诉我官方大概率不会有这种配置，但是还是先去官网和Google上搜搜吧。最终发现官方有个toolbarCanCollapse配置项，虽然有个折叠按钮的功能，但是远远不能满足需求。对齐三合一功能更不可能有了，也没有找到。![file](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1b5291f3aeec4bd5a5adf46b037ca4bf~tplv-k3u1fbpfcp-zoom-in-crop-mark:1956:0:0:0.image” style=“margin: auto” /” style=“margin: auto” />

效果

我们可以提前看下本文最后的实现效果是什么样的

CKEditor工具栏实现原理

# toolbar/plugin.js
editor.on( 'uiSpace', function( event ) {if ( event.data.space != editor.config.toolbarLocation )return;// Create toolbar only once.event.removeListener();editor.tool

最低0.47元/天解锁文章