### 作者：  [@seanblue](https://meta.discourse.org/u/seanblue)
#### 发布日期： [2022 年9 月 20 日 02:12 UTC](https://meta.discourse.org/t/why-so-many-options-in-the-gear-editor-menu/239497/1 "2022-09-20T02:12:38Z")
在桌面端主菜单栏有足够空间的情况下，为什么这么多选项都隐藏在齿轮菜单选项后面？`预格式文本`、`项目符号列表`和`编号列表`之前不是在主菜单栏上的吗？
---
### 作者：  [@JammyDodger](https://meta.discourse.org/u/JammyDodger)
#### 发布日期： [2022 年9 月 20 日 13:14 UTC](https://meta.discourse.org/t/why-so-many-options-in-the-gear-editor-menu/239497/2 "2022-09-20T13:14:34Z")
我猜这截图是来自 Meta。🙂
在我的笔记本电脑（Windows/Firefox）上，我的格式栏是这样的：
你使用的设备有什么不同之处可能解释这种差异吗？
---
### 作者：  [@Tris20](https://meta.discourse.org/u/Tris20)
#### 发布日期： [2022 年9 月 20 日 13:24 UTC](https://meta.discourse.org/t/why-so-many-options-in-the-gear-editor-menu/239497/3 "2022-09-20T13:24:27Z")
我也看到了和 @JammyDodger 一样的现象，即使我缩小浏览器窗口：
---
### 作者：  [@Don](https://meta.discourse.org/u/Don)
#### 发布日期： [2022 年9 月 20 日 13:44 UTC](https://meta.discourse.org/t/why-so-many-options-in-the-gear-editor-menu/239497/4 "2022-09-20T13:44:54Z")
您好，
这是一个触摸屏设备吗？
>
>
> We've been having some problems with toolbar overflow when there are many button…s present, so I did some refactoring in an attempt to avoid the issue and simplify...
>
> Relevant topic (there are a couple customer reports as well): https://meta.discourse.org/t/toolbar-of-composer-is-too-wide-at-least-on-ipad/234743/14
>
> Part of the issue is that we use different positioning for the cog dropdown on iOS and desktop, so we can't hide overflow without also hiding/breaking the dropdown menu on iOS. (We use different positioning on iOS because it has trouble with fixed position elements)
>
> In this PR I've approached the "too many buttons" issue and the "can't hide overflow" issue in a few different ways:
>
> 1. I updated the way we hide menu items from \`site.mobileView\` to \`capabilities.touch\` — this means that iPads are now included in the mobile behavior of showing fewer icons. They were previously left out and had some issues due to narrower widths.
>
> It's possible some large touch devices get caught up in this, but showing too many icons on iPad (and causing overflow issues) seems more problematic than hiding some options within the cog dropdown. (Alternatively we could check viewport width instead of relying on mobileView.)
>
> 2. I moved the preformatted text button to be hidden within the cog menu on mobile. This is most often used for code, and it seems less likely that someone's sharing code on a mobile device.
>
> 3. I'm allowing the buttons to wrap. This isn't ideal, but better than breaking the cog menu and might make admins think twice about how many buttons they have here
>
> 4. I updated the layout of the button bar from flex to grid. This allows us to use auto-fill/fit, simplify our CSS, and allow for easier equal spacing when wrapping. I also removed the dividers because grid containers want all children to be in an equal-width column. I don't think these were doing much for us other than occupying more space, but if we want to add them back I can use CSS psuedo selectors.
>
> Default:
>
> !\[Screen Shot 2022-09-07 at 6 37 11 PM\](https://user-images.githubusercontent.com/1681963/188995720-f442c08b-4534-418e-9191-33a0bf82b576.png)
>
> Too many buttons wrap:
>
> !\[Screen Shot 2022-09-07 at 6 37 32 PM\](https://user-images.githubusercontent.com/1681963/188995740-45702ddd-b801-4739-b370-9df360b5559f.png)
>
> Mobile default:
>
> !\[Screen Shot 2022-09-07 at 6 37 49 PM\](https://user-images.githubusercontent.com/1681963/188995751-00ff6d5e-c38a-4ce1-b16f-8ac48de1b25d.png)
>
> More mobile buttons can fill the space:
>
> !\[Screen Shot 2022-09-07 at 6 39 27 PM\](https://user-images.githubusercontent.com/1681963/188995834-be83880a-86a4-4b66-bf9f-7639da54f645.png)
>
> Too many mobile buttons:
>
> !\[Screen Shot 2022-09-07 at 6 40 02 PM\](https://user-images.githubusercontent.com/1681963/188995886-ce5d06bf-2a7b-42f7-9327-7cf0fb0c65d7.png)
>
>
> iPad default:
> !\[Screen Shot 2022-09-07 at 6 38 16 PM\](https://user-images.githubusercontent.com/1681963/188995764-f66445a8-ef12-430e-ab0f-db5ad1aedfa4.png)
---
### 作者：  [@seanblue](https://meta.discourse.org/u/seanblue)
#### 发布日期： [2022 年9 月 24 日 02:38 UTC](https://meta.discourse.org/t/why-so-many-options-in-the-gear-editor-menu/239497/5 "2022-09-24T02:38:56Z")
它是一款触摸屏笔记本电脑，是的。我希望可以改回原来的样子，为 iPad / 平板电脑找到另一个解决方案，因为在我的 13 英寸笔记本电脑（不算特别大）上的体验因这次更改而变得糟糕得多。
---
### 作者：  [@denvergeeks](https://meta.discourse.org/u/denvergeeks)
#### 发布日期： [2022 年9 月 24 日 05:15 UTC](https://meta.discourse.org/t/why-so-many-options-in-the-gear-editor-menu/239497/6 "2022-09-24T05:15:55Z")
我也遇到了同样的问题。
在提供用于设置编辑器按钮布局的 UI 之前，@awesomerobot 提供了一些 CSS 示例来重新排列它们，并且确实有效。
谢谢 Kris！！！
> [@](#):
>
> 要重新排列按钮，可以将此 CSS 添加到您的主题中：
>
> ```plaintext
> .d-editor-button-bar {
> button:nth-of-type(n+7) { // 顺序为第 8 个的按钮，以及齿轮下拉菜单
> order: 2;
> }
>
> button.upload { // 将上传按钮放在上述元素之前
> order: 1;
> }
> }
>
> ```
>
> 它的作用是：
>
> 默认情况下，`order` 设置为 `0`。
>
> 将 `order: 2` 添加到第 8 个按钮及其之后的所有元素意味着它们将放置在 `order` 值较低的任何元素之后。由于它们都具有相同的 `order` 值，因此它们将回退到 HTML 中出现的顺序。
>
> 添加 `order: 1` 会将上传按钮放在 `order: 2` 的所有元素之前，以及默认 `order: 0` 的所有元素之后。因此，这会将其放在图块按钮的左侧，而不是右侧。
Kris 还建议最好将此添加为主题组件，这样它就可以与您当前的主题分开。
如何做到：
1. 转到 `admin\u003ecustomize\u003ethemes`，然后单击 `new`
2. 将其命名为“Tiles button order”，从下拉列表中选择“component”，然后单击 create
3. 然后您可以单击 `Edit CSS/HTML`，将上面的 CSS 复制并粘贴到 `common \u003e css` 中
现在组件已创建，您需要将其添加到当前主题中。
1. 返回上一页，然后从组件选项卡切换到主题选项卡
2. 选择当前活动的主题（它会有一个绿色的勾号）
3. 在此主题设置中，有一个 `Theme Components` 部分，从下拉列表中找到新组件，然后单击“add”
4. 🎉 现在当您返回论坛主页并刷新时，它应该已激活。
来自 [Tiles Image Gallery - #66 by awesomerobot](https://meta.discourse.org/t/tiles-image-gallery/81950/66)
和 [Tiles Image Gallery - #68 by awesomerobot](https://meta.discourse.org/t/tiles-image-gallery/81950/68)
---
### 作者：  [@seanblue](https://meta.discourse.org/u/seanblue)
#### 发布日期： [2022 年9 月 24 日 23:35 UTC](https://meta.discourse.org/t/why-so-many-options-in-the-gear-editor-menu/239497/7 "2022-09-24T23:35:06Z")
我的 iPhone 8 上看到的选项也更少了。不确定这是否与此更改有关，但主菜单栏上显然还有很多额外的空间。
---
### 作者：  [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### 发布日期： [2022 年9 月 26 日 15:21 UTC](https://meta.discourse.org/t/why-so-many-options-in-the-gear-editor-menu/239497/8 "2022-09-26T15:21:14Z")
我们一直避免观察工具栏的宽度及其内容，并根据可用空间进行调整，因为这将是一个相当复杂的变化，可能会带来一些脆弱性。
因此，挑战在于我们需要在不溢出撰写器的情况下，让所有图标都适合大多数设备（在此更改之前，一些较窄的触摸屏设备根本无法访问齿轮菜单）。不幸的是，这意味着在某些情况下，齿轮菜单中的图标比需要的要多。
我们曾粗略地讨论过添加一些站点设置，允许管理员决定隐藏在齿轮下拉菜单中的内容，因此将来这可能会变得可配置。
---
### 作者：  [@Jagster](https://meta.discourse.org/u/Jagster)
#### 发布日期： [2022 年9 月 26 日 16:48 UTC](https://meta.discourse.org/t/why-so-many-options-in-the-gear-editor-menu/239497/9 "2022-09-26T16:48:22Z")
> [@awesomerobot](#):
>
> 允许管理员决定在 cog 下拉菜单中隐藏什么，因此将来这可能会变得可配置
非常赞同此建议。
---
### 作者：  [@seanblue](https://meta.discourse.org/u/seanblue)
#### 发布日期： [2022 年9 月 26 日 18:31 UTC](https://meta.discourse.org/t/why-so-many-options-in-the-gear-editor-menu/239497/10 "2022-09-26T18:31:53Z")
> [@awesomerobot](#):
>
> 我们曾粗略地讨论过添加一些站点设置，允许管理员决定在“齿轮”下拉菜单中隐藏哪些内容，因此将来这可能会变得可配置。
用户设置会更好。 🙂
主要是因为我不是管理员，哈哈。目前，我主要将菜单用于隐藏文本和隐藏的详细信息。能够在主菜单中显示它们会很好。但它似乎非常用户特定，因此站点设置只能提供有限的帮助。
---
### 作者：  [@thess](https://meta.discourse.org/u/thess)
#### 发布日期： [2022 年12 月 2 日 14:07 UTC](https://meta.discourse.org/t/why-so-many-options-in-the-gear-editor-menu/239497/11 "2022-12-02T14:07:47Z")
我们的网站有很多用户发布的代码片段、脚本和日志输出。从我们的角度来看，将预格式化代码按钮移至触摸屏的齿轮菜单并非最佳选择。有没有什么方法（无需修补 JavaScript）可以将此按钮移回按钮栏或将其与其他我们认为不那么重要的按钮交换？
---
### 作者：  [@Don](https://meta.discourse.org/u/Don)
#### 发布日期： [2022 年12 月 4 日 14:04 UTC](https://meta.discourse.org/t/why-so-many-options-in-the-gear-editor-menu/239497/12 "2022-12-04T14:04:18Z")
您好，
这样您就可以为触摸设备添加一个新的预格式化文本按钮。
将以下内容添加到新组件的 **Common/Header** 部分。
```javascript
```
将此添加到 **Common/CSS** 部分。这将从弹出菜单中隐藏预格式化文本按钮。
```scss
.select-kit.dropdown-select-box.toolbar-popup-menu-options {
li[data-value="applyFormatCode"] {
display: none;
}
}
```
* * *
---
### 作者：  [@thess](https://meta.discourse.org/u/thess)
#### 发布日期： [2022 年12 月 4 日 22:10 UTC](https://meta.discourse.org/t/why-so-many-options-in-the-gear-editor-menu/239497/13 "2022-12-04T22:10:29Z")
@Don - 非常感谢。效果非常好。
---
### 作者：  [@rahim123](https://meta.discourse.org/u/rahim123)
#### 发布日期： [2023 年8 月 11 日 18:29 UTC](https://meta.discourse.org/t/why-so-many-options-in-the-gear-editor-menu/239497/14 "2023-08-11T18:29:17Z")
> [@awesomerobot](#):
>
> 我们曾粗略地讨论过添加一些站点设置，允许管理员决定在齿轮下拉菜单中隐藏哪些内容，因此将来这可能会变得可配置。
这将非常有帮助。我注意到我网站上的大多数用户都不知道在轮子/齿轮菜单下有任何选项。
---
### 作者：  [@Jagster](https://meta.discourse.org/u/Jagster)
#### 发布日期： [2023 年8 月 11 日 19:51 UTC](https://meta.discourse.org/t/why-so-many-options-in-the-gear-editor-menu/239497/15 "2023-08-11T19:51:37Z")
而且我注意到，绝大多数用户根本没有使用工具栏。包括在这里的 Meta 上。
所以，真正的大问题（tm）不是我们在齿轮菜单下有什么或没有什么，而是我们是否应该把所有东西都放在齿轮下，提供更简洁的写作体验 😏
---
### 作者：  [@sableraph](https://meta.discourse.org/u/sableraph)
#### 发布日期： [2024 年2 月 9 日 11:37 UTC](https://meta.discourse.org/t/why-so-many-options-in-the-gear-editor-menu/239497/16 "2024-02-09T11:37:51Z")
在 Discourse 的最新更新后，@Don 提供的解决方案似乎不再有效， ~~并且齿轮菜单中也缺少代码格式化按钮~~ 。_编辑：通过移除自定义组件，该按钮重新出现在了齿轮菜单中。我们现在需要一个替代的解决方案，以便在移动设备上的标题菜单中恢复该按钮。_
作为一个编程学习论坛的版主，我们的用户能够正确地格式化他们的代码，包括在移动设备上，这一点非常重要。这个问题给我们带来了更大的挑战。😕
---
### 作者：  [@Don](https://meta.discourse.org/u/Don)
#### 发布日期： [2024 年2 月 9 日 12:09 UTC](https://meta.discourse.org/t/why-so-many-options-in-the-gear-editor-menu/239497/17 "2024-02-09T12:09:27Z")
嘿 @sableraph 👋
谢谢，我现在已经为此创建了一个可用的主题组件。[GitHub - VaperinaDEV/touch-composer-code-button-to-insertions](https://github.com/VaperinaDEV/touch-composer-code-button-to-insertions)
---
### 作者：  [@sableraph](https://meta.discourse.org/u/sableraph)
#### 发布日期： [2024 年2 月 9 日 12:19 UTC](https://meta.discourse.org/t/why-so-many-options-in-the-gear-editor-menu/239497/18 "2024-02-09T12:19:35Z")
感谢您的回复！
我不确定如何安装主题，但我设法像这样修补了您的原始组件：
```html
```
CSS 保持不变。
---
### 作者：  [@thess](https://meta.discourse.org/u/thess)
#### 发布日期： [2024 年4 月 30 日 14:35 UTC](https://meta.discourse.org/t/why-so-many-options-in-the-gear-editor-menu/239497/19 "2024-04-30T14:35:32Z")
Discourse 的最新更新（v3.3.0-beta2）似乎存在此问题。该按钮位于工具栏上，但选择它会触发关于“formatCode”不是函数的错误。齿轮上的按钮仍然可以正常工作。有什么变化？
---
### 作者：  [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### 发布日期： [2024 年4 月 30 日 15:05 UTC](https://meta.discourse.org/t/why-so-many-options-in-the-gear-editor-menu/239497/20 "2024-04-30T15:05:54Z")
> [@sableraph](#):
>
> `action: "formatCode",`
Replace
`action: "formatCode",`
By
`action: () => toolbar.context.send("formatCode")`
That should fix the issue 👍
[下一页](https://meta.discourse.org/t/why-so-many-options-in-the-gear-editor-menu/239497.md?page=2)