# 如何自定义composer工具栏？

**URL:** https://meta.discourse.org/t/how-to-customize-the-composer-toolbar/323577
**Category:** Feature
**Tags:** composer
**Created:** [2024年八月27日 14:43 UTC](https://meta.discourse.org/t/how-to-customize-the-composer-toolbar/323577 "2024-08-27T14:43:43Z")
**Posts on this page:** 1
**Showing post:** 12

<div class="post-metadata">

### Author: ![opcourdis](https://avatars.discourse-cdn.com/v4/letter/o/45deac/32.png) [@opcourdis](https://meta.discourse.org/u/opcourdis)
#### Post date: [2025年八月26日 18:53 UTC](https://meta.discourse.org/t/how-to-customize-the-composer-toolbar/323577/12 "2025-08-26T18:53:30Z")

</div>

您好，

我将“创建事件图标”放在了“+菜单”的右侧外部，但您可以按照以下说明将其放置在左侧：

1. 在您的主题的管理员后台 `外观` \> `主题` \> `编辑` \> `编辑代码` \> `head` 中添加此 JavaScript：

```javascript
<!-- Custom Create Event Button (Icon-based, Language-proof) -->
<script>
(() => {
  const e = ".d-editor-button-bar";
  const t = ".btn.no-text.fk-d-menu __trigger.toolbar-menu__ options-trigger.toolbar__button.options.toolbar-popup-menu-options";
  const n = ".fk-d-menu__inner-content";
  const o = ".d-modal.fk-d-menu-modal";
  const c = (e) => {
    const t = e.querySelector('svg use[href="#calendar-day"]');
    return t ? t.closest("button") : null;
  };
  const r = (e, t, n = 4000) => new Promise((o, c) => {
    const r = t(e);
    if (r) return o(r);
    const l = new MutationObserver(() => {
      const n = t(e);
      n && (l.disconnect(), o(n));
    });
    l.observe(e, { childList: !0, subtree: !0 });
    setTimeout(() => {
      l.disconnect();
      c();
    }, n);
  });
  const l = (e = 4000) => {
    const t = new MutationObserver(() => {
      document.querySelector(o) && t.disconnect();
    });
    t.observe(document.body, { childList: !0, subtree: !0 });
    setTimeout(() => {
      t.disconnect();
    }, e);
  };
  const s = (e) => {
    if (e.querySelector(".custom-create-event-btn")) return;
    const o = document.createElement("button");
    o.className = "btn no-text btn-icon toolbar__button link custom-create-event-btn";
    o.title = "Create event";
    o.innerHTML = '<svg class="fa d-icon d-icon-calendar-day svg-icon"><use href="#calendar-day"></use></svg>';
    e.appendChild(o);
    o.addEventListener("click", async () => {
      const e = document.querySelector(t);
      if (!e) return;
      e.click();
      let o = document.querySelector(n);
      if (!o) {
        await new Promise((e, t) => {
          const c = new MutationObserver(() => {
            o = document.querySelector(n);
            o && (c.disconnect(), e());
          });
          c.observe(document.body, { childList: !0, subtree: !0 });
          setTimeout(() => {
            c.disconnect();
            t();
          }, 2000);
        });
      }
      try {
        (await r(o, c)).click();
        l();
      } catch {}
    });
  };
  const u = new MutationObserver(() => {
    const t = document.querySelector(e);
    t && s(t);
  });
  u.observe(document.body, { childList: !0, subtree: !0 });
  const d = document.querySelector(e);
  d && s(d);
})();
</script>

```

1. 如果您想将图标放在左侧而不是右侧：在同一个管理员页面，您会找到一个 CSS 选项卡，您可以在其中添加此内容：

.btn.no-text.btn-icon.toolbar\_\_button.link.custom-create-event-btn { order: -1; }

1. 奖励：如果您只想在某些类别中使此按钮可见，请使用那里的脚本并修改条件以使用您的类别名称：[Discourse Calendar (and Event) - #547 by opcourdis](https://meta.discourse.org/t/discourse-calendar-and-event/97376/547?u=opcourdis)

 ![image](https://global.discourse-cdn.com/meta/original/4X/b/7/0/b703c96190543abb5e977ec1a8f4580c91be357f.png)

---

_[View the full topic](https://meta.discourse.org/t/how-to-customize-the-composer-toolbar/323577)._