刚才看了看上一篇写CKEditor的文章是在今年的一月份,现在轮到我们的设计师对编辑器下手了。我们回顾下现在的编辑器长什么样子。
![](https://i-blog.csdnimg.cn/blog_migrate/4e278b8aaf884911987b7732dc84aa5a.png)
需求
我们客户端默认窗口尺寸下,会出现排,并且第二排的这些功能使用频次相对较低,为了尽可能的增大用户的操作区域,所以决定做如下改动:
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