# MD Composer extras
**URL:** https://meta.discourse.org/t/md-composer-extras/118912
**Category:** Theme component
**Created:** [5월 28, 2019, 8:08오후 UTC](https://meta.discourse.org/t/md-composer-extras/118912 "2019-05-28T20:08:37Z")
**Posts on this page:** 20
**Page:** 3
### Author:  [@nathank](https://meta.discourse.org/u/nathank)
#### Post date: [6월 24, 2022, 1:28오후 UTC](https://meta.discourse.org/t/md-composer-extras/118912/41 "2022-06-24T13:28:23Z")
> [@Steven](#):
>
> 가장 좋은 방법은 현재 테마에 몇 줄의 CSS를 추가하는 것입니다.
제안해 주신 대로 진행하여, 원하지 않는 버튼들을 다음과 같이 숨겼습니다:
```plaintext
// MD Composer Extras TC에서 불필요한 버튼 숨기기
.d-editor-button-bar {
.superscript_button,.subscript_button, .align_center_button,.align_right_button, .align_justify_button {
display: none;
}
}
```
하지만 이 기능의 TC 설정에서 어떤 버튼을 포함할지 선택할 수 있다면 정말 좋겠습니다. 버튼 설정에 텍스트가 없으면 해당 버튼이 생성되지 않도록 하는 방식으로 구현할 수 있을지 궁금합니다.
직접 시도해 보았지만 제 초보적인 실력으로는 감당이 되지 않았습니다. 각 부분이 해당 설정에 따라 조건부로 동작하도록 만드는 방법을 찾지 못했습니다.
---
### Author:  [@Heliosurge](https://meta.discourse.org/u/Heliosurge)
#### Post date: [1월 16, 2023, 10:20오전 UTC](https://meta.discourse.org/t/md-composer-extras/118912/42 "2023-01-16T10:20:00Z")
스티븐님, 안녕하세요! 아주 좋은 컴포넌트인데 작은 버그를 발견했습니다. 상첨자(Superscript)에 약간의 오류가 있습니다. 아래를 참고해 주세요.
/sub 대신 /sup으로 닫아야 합니다.
---
### Author:  [@Heliosurge](https://meta.discourse.org/u/Heliosurge)
#### Post date: [1월 16, 2023, 1:30오후 UTC](https://meta.discourse.org/t/md-composer-extras/118912/43 "2023-01-16T13:30:29Z")
> [@Steven](#):
>
> 시간을 내서 테마 컴포넌트를 재구성할 것 같습니다. 기본적으로 단순한 tc를 선호하며, 모든 옵션이 포함된 브랜치에는 서브스크립트 버튼을 사용하고, 공식 bbcode 플러그인을 사용하는 사람들을 위해 bbcode 브랜치를 사용할 예정입니다.
고급 버전에서 설정 토글을 사용하여 올인원(all-in-one) 기능을 구현할 수 있을 것 같습니다.
예를 들어, bbcode 플러그인을 사용 중인지 여부를 나타내는 토글을 두면, 양쪽 모두에서 버튼을 숨기거나 바에 버튼을 추가하는 옵션을 가질 수 있습니다. 관리자가 ⚙ 드롭다운에서 옵션을 제외하기를 원할 때도 동일한 방식을 적용할 수 있습니다.
저는 아직 css를 배우는 단계라 초보이지만, 드롭다운을 캐스케이딩 드롭다운으로 정리하기 위해 추가적인 장식 효과를 위한 보조 컴포넌트를 만들 수 있을 것입니다.
예를 들어, 색상 옵션 선택기가 있는 메인 드롭다운 기어입니다.
| ⚙ | . |
| --- | --- |
| 투표 삽입 | |
| 표 삽입 | |
| 텍스트 색상. \> | 빨강 |
| | 초록 |
| | 파랑 |
| | 주황 |
드롭다운과/또는 툴바에 다른 서식 옵션을 그룹화하여 서식 옵션을 선택할 수 있는 메뉴를 만들 수도 있습니다.
---
### Author:  [@Steven](https://meta.discourse.org/u/Steven)
#### Post date: [1월 16, 2023, 5:59오후 UTC](https://meta.discourse.org/t/md-composer-extras/118912/44 "2023-01-16T17:59:25Z")
감사합니다. 해당 문제에 대한 수정 사항을 push했습니다.
---
### Author:  [@Heliosurge](https://meta.discourse.org/u/Heliosurge)
#### Post date: [1월 16, 2023, 6:56오후 UTC](https://meta.discourse.org/t/md-composer-extras/118912/45 "2023-01-16T18:56:41Z")
천만에요! 빠른 답변과 수정에 진심으로 감사드립니다! 🖖😎🤝
---
### Author:  [@Heliosurge](https://meta.discourse.org/u/Heliosurge)
#### Post date: [1월 16, 2023, 11:58오후 UTC](https://meta.discourse.org/t/md-composer-extras/118912/46 "2023-01-16T23:58:02Z")
선택적 브랜치 설치 방법을 포함하도록 Op Post를 업데이트하는 것을 권장합니다. "color"와 “simple” 브랜치 대안을 확인했습니다.
color 브랜치에서 bbcode\_color에 작은 변경 사항을 적용했습니다.
“ **Desktop\Head** ” - 65행과 “\*€Mobile\Head\*\*” - 96행에서
\*\*“[color=##233]”\*\*를 \*\*“[color=name]”\*\*으로 변경했습니다. WiP 사이트에서 이름(color name)을 색상으로 변경하는 가이드를 만들 예정이기 때문입니다.
_16진수 값은 원래 사용했던 값이 아닙니다. 그것이 어떤 값이었는지에 대한 참고용으로만 넣어두었습니다._
아직 초보 단계라 GitHub 계정을 만들고 풀 리퀘스트(Pull Request) 방법을 배우는 데 시간이 좀 걸릴 것입니다.
---
### Author:  [@rahim123](https://meta.discourse.org/u/rahim123)
#### Post date: [3월 19, 2023, 5:29오후 UTC](https://meta.discourse.org/t/md-composer-extras/118912/47 "2023-03-19T17:29:18Z")
이렇게 간편하면서도 기능이 풍부한 컴포넌트를 만들어 주셔서 정말 감사합니다. 정말 감사드립니다.
그리고 작은 제안 하나 드리고 싶은데요, 더 긴 태그 대신 ~~이것~~ 과 같은 마크다운 관례를 사용해 취소선을 만들 수 있을까요?
---
### Author:  [@jrgong](https://meta.discourse.org/u/jrgong)
#### Post date: [8월 18, 2023, 9:27오후 UTC](https://meta.discourse.org/t/md-composer-extras/118912/48 "2023-08-18T21:27:53Z")
이 주제에 대해 한마디 보태겠습니다 🙂
MD composer extras를 특정 그룹에만 표시할 수 있는 네이티브 옵션이 있으면 좋겠습니다. 저희 경우, 지금은 스태프에게만 추가 버튼들을 테스트해 보고 싶거든요.
지금은 nathan님의 코드에 `body:not(.staff)`를 추가해서 임시로 숨겼습니다:
```css
// Hides unneeded buttons from the MD Composer Extras TC from non-staff users
body:not(.staff) .d-editor-button-bar {
.superscript_button,.subscript_button, .align_center_button,.align_right_button, .align_justify_button {
display: none;
}
}
```
다음 단계로는 각 개별 버튼에 대한 권한 설정이 있으면 좋겠습니다. 🤤
---
### Author:  [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [8월 18, 2023, 9:33오후 UTC](https://meta.discourse.org/t/md-composer-extras/118912/49 "2023-08-18T21:33:27Z")
@jrgong 이 컴포넌트와 몇 가지 CSS를 추가하면 가능합니다.
> **[GitHub - discourse/discourse-groups-css-classes-in-body](https://github.com/discourse/discourse-groups-css-classes-in-body)**
>
> Contribute to discourse/discourse-groups-css-classes-in-body development by creating an account on GitHub.
CSS 예시로 제 그룹 내비게이션 메뉴 섹션 TC를 확인해 보세요. 사용자 카드에 링크가 있습니다.
---
### Author:  [@jrgong](https://meta.discourse.org/u/jrgong)
#### Post date: [8월 18, 2023, 9:34오후 UTC](https://meta.discourse.org/t/md-composer-extras/118912/50 "2023-08-18T21:34:15Z")
이게 아직 코어에 왜 안 들어갔지? 😃 공유해줘서 고마워, 정말 감사해.
---
### Author:  [@denvergeeks](https://meta.discourse.org/u/denvergeeks)
#### Post date: [9월 11, 2023, 3:20오후 UTC](https://meta.discourse.org/t/md-composer-extras/118912/51 "2023-09-11T15:20:17Z")
> [@Steven](#):
>
> 저는 이 플러그인을 추천합니다.
[Plugin](https://meta.discourse.org/t/formatting-toolbar/40649)이 이 테마 컴포넌트보다 여전히 장점이 있다는 말인가요?
---
### Author:  [@Steven](https://meta.discourse.org/u/Steven)
#### Post date: [9월 11, 2023, 4:30오후 UTC](https://meta.discourse.org/t/md-composer-extras/118912/52 "2023-09-11T16:30:29Z")
저는 여전히 플러그인이 더 좋다고 생각하지만, 여기에 제시된 옵션이 마음에 드신다면 괜찮습니다.
---
### Author:  [@denvergeeks](https://meta.discourse.org/u/denvergeeks)
#### Post date: [9월 11, 2023, 5:40오후 UTC](https://meta.discourse.org/t/md-composer-extras/118912/53 "2023-09-11T17:40:40Z")
빠른 답변 감사합니다. 이유를 설명해 주시겠어요?
---
### Author:  [@Steven](https://meta.discourse.org/u/Steven)
#### Post date: [9월 11, 2023, 6:19오후 UTC](https://meta.discourse.org/t/md-composer-extras/118912/54 "2023-09-11T18:19:10Z")
개인적인 의견이지만, 컴포넌트에 버튼을 너무 많이 추가한 것 같습니다.
플러그인은 기본 기능에 더 초점을 맞추고 있으며, bbcode 시스템도 더 간단합니다(`[wrap="center"]` 대신 `[center]`를 사용). 하지만 컴포넌트는 확실히 설치하기가 더 쉽습니다.
---
### Author:  [@nathank](https://meta.discourse.org/u/nathank)
#### Post date: [11월 6, 2023, 10:18오후 UTC](https://meta.discourse.org/t/md-composer-extras/118912/55 "2023-11-06T22:18:48Z")
혹시 아직 보지 못하셨을 수 있으니 공유합니다:
---
### Author:  [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [11월 6, 2023, 11:09오후 UTC](https://meta.discourse.org/t/md-composer-extras/118912/56 "2023-11-06T23:09:13Z")
PR를 만들었습니다 👍
[https://github.com/MonDiscourse/md-composer-extras/pull/12](https://github.com/MonDiscourse/md-composer-extras/pull/12)
---
### Author:  [@jrgong](https://meta.discourse.org/u/jrgong)
#### Post date: [4월 3, 2024, 9:42오전 UTC](https://meta.discourse.org/t/md-composer-extras/118912/57 "2024-04-03T09:42:02Z")
모든 버튼에 md-composer-extras CSS 클래스를 추가할 수 있을까요? 제 목표는 스태프가 아닌 사용자에게 모든 버튼을 한 번에 숨기는 것이며, 이렇게 하면 CSS 타겟팅이 훨씬 간단해질 것입니다.
---
### Author:  [@Steven](https://meta.discourse.org/u/Steven)
#### Post date: [4월 3, 2024, 10:44오전 UTC](https://meta.discourse.org/t/md-composer-extras/118912/58 "2024-04-03T10:44:03Z")
이것이 가능한지 확실하지 않습니다. 플러그인 API 파일의 예제 코드를 보면, 이러한 모든 아이콘에 대해 일종의 루트 클래스를 추가하는 방법을 찾을 수 없었습니다. 제가 잘못 이해하고 있을 수도 있지만요.
```plaintext
api.onToolbarCreate(toolbar => {
toolbar.addButton({
id: 'pop-text',
group: 'extras',
icon: 'bolt',
action: 'makeItPop',
title: 'pop_format.title'
});
});
```
---
### Author:  [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [4월 3, 2024, 1:02오후 UTC](https://meta.discourse.org/t/md-composer-extras/118912/60 "2024-04-03T13:02:52Z")
`staff` 클래스가 `` 요소에 적용됩니다.
따라서 다음과 같이 모든 버튼을 대상으로 할 수 있습니다:
```css
body:not(.staff) .d-editor-button-bar {
/* 모든 것 숨기기
* (팝업 메뉴 버튼을 포함한 표시되는 버튼)
*/
button,
.toolbar-popup-menu-options {
display: none;
}
}
```
```css
body:not(.staff) .d-editor-button-bar {
/* 특정 버튼 숨기기 */
button {
/* 인라인 버튼 */
&.align_justify_button,
&.align_right_button
/* ... */
{
display: none;
}
/* 팝업 메뉴 */
&.toolbar-popup-menu-options {
[data-name="Float left"],
/* ... */ {
display: none;
}
}
}
}
```
도움이 될까요?
참고로, 이 컴포넌트에 관심이 있을 수 있습니다:
> [@현재 사용자의 그룹에 대한 CSS 클래스](https://meta.discourse.org/t/css-classes-for-current-users-groups/226068):
>
> discourse2요약 CSS Classes for Current User’s Groups는 사용자가 속한 그룹을 \ 태그에 CSS 클래스로 추가합니다.eyeglasses미리보기 [theme-creator.discourse.org에서 미리보기](https://discourse.theme-creator.io/theme/Johani/user-groups-css-classes)hammer_and_wrench리포지토리 링크 [https://github.com/discourse/discourse-groups-css-classes-in-body](https://github.com/discourse/discourse-groups-css-classes-in-body)open_book디스코urs 테마를 처음 사용하시나요? [디스코urs 테마 사용 입문가 가이드](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966) 이 테마 컴포넌트 설치 설치 전: [image] 설치 후: [image] Discourse는 기본적으로 현재 사용자의 기본 그룹만 CSS 클래스로 추가합니다. 이 컴포넌트는 이를 변경하여, 현재 사용자가 속한 모든 그룹(신뢰 수준(trust-level)과 같은 내장 그룹 포함)을 클래스로 추가합니다. 이 컴포넌트…
---
### Author:  [@jrgong](https://meta.discourse.org/u/jrgong)
#### Post date: [4월 9, 2024, 11:45오전 UTC](https://meta.discourse.org/t/md-composer-extras/118912/61 "2024-04-09T11:45:35Z")
Hey Arkshine! 정말 도움이 됩니다! 그런데 제 생각에는 각 버튼에 `md-composer-extras`라는 CSS 클래스를 추가하는 것이 더 효율적인 방법일 것 같습니다. 그렇게 하면 모든 요소를 숨기기 위한 CSS 마크업이 매우 간단해집니다 🙂
> [@Arkshine](#):
>
> 부연 설명으로, 이 컴포넌트가 관심 있으실 수 있습니다:
>
> > [@](#):
> >
> > discourse2 Summary CSS Classes for Current User’s Groups는 사용자가 속한 그룹을 태그에 CSS 클래스로 추가합니다. eyeglasses 미리보기 [theme-creator.discourse.org에서 미리보기](https://discourse.theme-creator.io/theme/Johani/user-groups-css-classes) hammer\_and\_wrench 저장소 링크 [GitHub - discourse/discourse-groups-css-classes-in-body · GitHub](https://github.com/discourse/discourse-groups-css-classes-in-body) open\_book Discourse 테마를 처음 접하시는 분? [Discourse 테마 사용 입문 가이드](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966) 이 테마 컴포넌트 설치 전: [image] 후: [[image]](https://global.discourse-cdn.com/meta/original/4X/4/a/0/4a00e001260d4ba7966a30a2b036c1a016dcd986.png) Discourse는 현재 u…
감사합니다! 사실 이미 그것을 사용 중입니다 😉
[이전 페이지](https://meta.discourse.org/t/md-composer-extras/118912.md?page=2)
[다음 페이지](https://meta.discourse.org/t/md-composer-extras/118912.md?page=4)