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

기여 기능
1

새 주제 툴바에 어떤 버튼이 어떤 순서로 표시되는지 커스터마이징할 수 있는 방법이 있는지 궁금합니다.

구체적으로, 날짜/시간 버튼을 이벤트 추가 버튼으로 교체하고 싶습니다. 날짜/시간 버튼은 신규 사용자에게 혼란을 줄 뿐이고, 우리의 컨텍스트에서는 이벤트를 강조하는 것이 더 적합합니다. 커뮤니티에는 기술에 익숙하지 않은 고연령 사용자가 많기 때문에, 달력을 닮은 버튼을 무시하고, 기어 아이콘을 클릭한 뒤, 또 다른 달력을 닮은 아이콘을 클릭하도록 안내하는 것은 최선의 방법이 아닙니다.

새 주제 버튼을 커스터마이징하는 관련 주제는 몇 가지 보았지만, 툴바 자체에 대한 내용은 찾지 못했습니다.

3개의 좋아요
2

저도 이 부분에 대해 궁금합니다. 최근에 컴포저 툴바에 도구를 추가했는데, :gear: 아이콘이 다음 줄로 밀려 내려갔습니다.

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

1개의 좋아요
3

도구대를 설정할 수 있는 옵션은 없지만, 테마와 플러그인을 통해 가능합니다.

이 기능이 있으면 좋겠지만, 일단 기능 요청으로 카테고리를 변경하겠습니다.

현재는 CSS를 사용하여 버튼을 숨길 수 있습니다… 예를 들어:

.d-editor-button-bar {
  .local-dates {  // 날짜 버튼 숨김
    display: none;
  }
}

또는 :gear: 메뉴에서 옵션을 숨기는 방법:

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

CSS를 사용하면 이러한 메뉴의 항목 순서를 바꾸는 것도 비교적 간단합니다… 다음과 같이 할 수 있습니다:

.d-editor-button-bar {
  .local-dates {  // 날짜 버튼을 맨 앞으로 이동
    order: -1/
  }
}

CSS를 변경하는 방법에 대한 가이드는 여기를 참고하세요:

그러나 더 어려운 작업은 항목을 드롭다운 메뉴에서 메인 도구대로(또는 그 반대) 이동하는 것입니다. CSS로 원래 버튼을 숨기고 API를 사용하여 중복된 버튼을 추가해야 합니다.

Discourse Gifs와 같은 예시 테마 컴포넌트를 보면 그것이 어떻게 이루어지는지 일반적인 아이디어를 얻을 수 있습니다… 하지만 개발자가 아니라면 까다로울 수 있습니다.

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

for the :gear: menu

이렇게 작성해 봤는데 표시 순서가 변경되지 않았습니다.
참고: display: none; 도 작동하지 않았습니다.

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

아래 문법은 의도대로 작동하여 "Create event"를 맨 위로 이동시킵니다.

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

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

CSS에 익숙하지 않아 ChatGPT의 도움을 받아 위의 코드를 작성했습니다.

1개의 좋아요
5

네, 정말 필요합니다. 모든 사용자를 위한 “기본” 옵션뿐만 아니라, 각 사용자가 이를 사용자화할 수 있도록 해야 합니다. 모든 사용자가 “굵게”, “기울임체”, 심지어 “AI에게 묻기” 버튼을 필요로 하는 것은 아니기 때문입니다.

하지만 당장은 최소한 전역적으로 항목을 이동하고 숨김/설정(기어) 메뉴에 추가할 수 있다면 도움이 될 것입니다.

제 13인치 화면에서는 공간이 조금씩 좁아지기 시작하고 있습니다 (인용 섹션 등을 위해 원래 주제의 일부가 항상 보이기를 선호합니다):

image
image1013×596 51.4 KB

6

궁금한 점이 있습니다: "20자 이상 입력"이라는 노트를 어떻게 추가했나요? 그리고 사용자가 이미 몇 자를 입력했는지도 표시되나요?

제목은 어떻게 되나요?

7

솔직히 완전히 확신은 없습니다. 제가 이전에 운영했었던(하지만 지금은 더 이상 운영하지 않는) 커뮤니티에 설치되어 있었습니다. 이렇게 생겼고, 여기에서 찾을 수 있습니다.

2개의 좋아요
8

감사합니다! 정확히 그거였어요! :raising_hands:

1개의 좋아요
9

저도 포럼에 고령의 사용자들이 있어서, 이 부분을 설명할 때마다 어색함을 느낍니다.

또한 기어 아이콘은 '더 보기’를 나타내는 매우 직관적이지 않은 심볼입니다. 점(…)이 더 적합하지 않을까요? 아이콘을 변경할 수 있는 간단한 방법이 있을까요?

여기서 발견한 또 다른 장벽은 모바일에서 툴바를 숨기거나 표시하는 작은 햄버거 아이콘이 기본값으로 꺼져 있다는 점입니다. 이는 이 기능이 제공할 수 있는 이점보다 훨씬 더 큰 혼란을 초래합니다. 저는 이를 꺼두었습니다:

.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개의 좋아요
14

이 기능 요청에 대한 작은 첫걸음이 이제 실험적인 예정된 변경 사항으로 라이브되었습니다. 자세히 보기

1개의 좋아요