작성 도구 모음을 사용자 지정하는 방법?

기여 기능
1

I’m wondering if there is any way to customize which buttons are displayed (and in which order) on the New Topic toolbar.

Specifically, I want to replace the Date/Time button with the Add Event button. The Date/Time just causes confusion for new users and in our context, Events is what we want to highlight. Instructing users to first ignore the calendar-looking button, click on the gear icon, and then click on the other calendar looking icon is not the greatest considering our community has a lot of non-tech oriented and older folks using it.

I do see there are topics about customizing the new topic button, but not the toolbar itself.

3개의 좋아요
2

I’m also curious about this. We recently added a tool to the composer toolbar and it pushed the :gear: down to the next line.

CleanShot 2024-08-27 at 10.44.59
CleanShot 2024-08-27 at 10.44.59644×386 17.4 KB

1개의 좋아요
3

There’s no setting to configure the toolbar, but it’s possible through themes and plugins.

It would be nice to have this feature, so I’m going to re-categorize it as a feature request.

For now, buttons can be hidden with CSS… for example:

.d-editor-button-bar {
  .local-dates {  // hides the date button
    display: none;
  }
}

or to hide an option from the :gear: menu

.toolbar-popup-menu-options {
  [data-name="Build Poll"] {
    display: none;
  }
}

With CSS it’s also fairly straightforward to reorder items in these menus… you can do something like:

.d-editor-button-bar {
  .local-dates {  // moves the date button to the beginning
    order: -1/
  }
}

We have a guide for figuring out how to change CSS over here:

All that said, the more difficult change is moving something to/from the dropdown menu and into the main toolbar (or vice versa). You’d need to hide the original button with CSS and then add a duplicate button using the API.

Looking at an example theme component, like Discourse Gifs gives a general idea of how that’s done… though this gets tricky if you’re not a developer.

9개의 좋아요
How to customize editor button? (remove couple option)
Add markdown to selected text
"Quote whole post" button location
How to customize editor button? (remove couple option)
4

for the :gear: menu

When I tried writing this way, the display order didn’t change.
PS: display: none; didn’t work either.

.toolbar-popup-menu-options {
  [data-name="Create event"] {
    order: -1;
  }
}

The following syntax works as expected, moving “Create event” to the top.

.select-kit-collection {
  display: flex;
  flex-direction: column;
}

.select-kit-row[data-name="Create event"] {
  order: -1;
}

I’m not familiar with CSS, ChatGPT helps to create the code above.

1개의 좋아요
5

Yes, this is really needed. Not only a “default” option for all users, but then each user could customize it, because not everyone needs to have a button to make the text “Bold”, or "Italic, of even the “Ask AI”.

But for now, being able to at least move things around globally and adding them to the hidden/cog wheel menu, would help.

On my 13" screen things are starting to get a little bit cramped (I always like to have some of the original topic visible for quoting sections, etc):

image
image1013×596 51.4 KB

6

I’m curious: how did you add that note “20 characters required”, and does it then show how many the person typed already?

How about for the title?

7

To be honest I’m not entirely sure. That was installed on a community that I previously ran (but no longer do). It looks like this it can be located here.

2개의 좋아요
8

Thanks! That’s exactly that! :raising_hands:

1개의 좋아요
9

I also have older folks on my forum, and I feel silly explaining this to them.

The gear is also a very non-obvious symbol for “there’s more”. Maybe an ellipsis would be more appropriate? Is there a straightforward way I can change the icon?

Another stumbling block I found here is that on mobile there is a little hamburger icon that hides/shows the toolbar, and it seems to be off by default. This causes way more confusion than any benefit it could offer. I turned it off:

.composer-controls .toggle-toolbar {
  display: none;
}

.d-editor-button-bar {
  display: grid !important;
}
10

안녕하세요, 이 방식이 여전히 권장되는지, 아니면 이 내용에 영향을 받는지에 대해 궁금합니다.

1개의 좋아요
11

.js 초기화 파일에서 api.onToolbarCreate를 사용하는 것은 여전히 지원됩니다 :+1:

링크하신 토픽은 <script type="text/discourse-plugin"> 태그에 자바스크립트를 포함하는 것에만 언급하고 있습니다.

3개의 좋아요
12

안녕하세요,

‘이벤트 아이콘 생성’ 버튼을 +메뉴의 오른쪽 밖에 배치했는데, 아래 설명을 따라 왼쪽에 배치할 수도 있습니다:

1° 관리자 > 외관 > 테마 > 편집 > 코드 편집 > head로 이동하여 테마 헤더에 다음 자바스크립트를 추가하세요.

<!-- Custom Create Event Button (Icon-based, Language-proof) -->
<script>
(()=>{const e=".d-editor-button-bar",t=".btn.no-text.fk-d-menu__trigger.toolbar-menu__options-trigger.toolbar__button.options.toolbar-popup-menu-options",n=".fk-d-menu__inner-content",o=".d-modal.fk-d-menu-modal",c=e=>{const t=e.querySelector('svg use[href="#calendar-day"]');return t?t.closest("button"):null},r=(e,t,n=4e3)=>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)}),l=(e=4e3)=>{const t=new MutationObserver(()=>{document.querySelector(o)&&t.disconnect()});t.observe(document.body,{childList:!0,subtree:!0}),setTimeout(()=>t.disconnect(),e)},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);o||(await new Promise((e,t)=>{const c=new MutationObserver(()=>{(o=document.querySelector(n))&&(c.disconnect(),e())});c.observe(document.body,{childList:!0,subtree:!0}),setTimeout(()=>{c.disconnect(),t()},2e3)}));try{(await r(o,c)).click(),l()}catch{}})},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>

2° 아이콘을 오른쪽이 아닌 왼쪽에 배치하려면: 같은 관리자 페이지에서 CSS 탭을 찾을 수 있으며, 여기에 다음을 추가할 수 있습니다:

.btn.no-text.btn-icon.toolbar__button.link.custom-create-event-btn { order: -1; }

3° 보너스: 이 버튼이 특정 카테고리에서만 이 위치에 보이도록 하려면 해당 스크립트를 사용하고 카테고리 이름으로 조건을 수정하세요. Discourse Events - #547 by opcourdis

image
image1034×334 33.8 KB

1개의 좋아요
13

@david와 @opcourdis의 도움 되는 답변에 진심으로 감사드립니다.

2개의 좋아요