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

刚才看了看上一篇写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