MD Composer extras

제안해 주신 대로 진행하여, 원하지 않는 버튼들을 다음과 같이 숨겼습니다:

// MD Composer Extras TC에서 불필요한 버튼 숨기기
.d-editor-button-bar {
    .superscript_button,.subscript_button, .align_center_button,.align_right_button, .align_justify_button {
        display: none;
    }
}

하지만 이 기능의 TC 설정에서 어떤 버튼을 포함할지 선택할 수 있다면 정말 좋겠습니다. 버튼 설정에 텍스트가 없으면 해당 버튼이 생성되지 않도록 하는 방식으로 구현할 수 있을지 궁금합니다.

직접 시도해 보았지만 제 초보적인 실력으로는 감당이 되지 않았습니다. 각 부분이 해당 설정에 따라 조건부로 동작하도록 만드는 방법을 찾지 못했습니다.

1개의 좋아요

스티븐님, 안녕하세요! 아주 좋은 컴포넌트인데 작은 버그를 발견했습니다. 상첨자(Superscript)에 약간의 오류가 있습니다. 아래를 참고해 주세요.

/sub 대신 /sup으로 닫아야 합니다.

2개의 좋아요

고급 버전에서 설정 토글을 사용하여 올인원(all-in-one) 기능을 구현할 수 있을 것 같습니다.

예를 들어, bbcode 플러그인을 사용 중인지 여부를 나타내는 토글을 두면, 양쪽 모두에서 버튼을 숨기거나 바에 버튼을 추가하는 옵션을 가질 수 있습니다. 관리자가 :gear: 드롭다운에서 옵션을 제외하기를 원할 때도 동일한 방식을 적용할 수 있습니다.

저는 아직 css를 배우는 단계라 초보이지만, 드롭다운을 캐스케이딩 드롭다운으로 정리하기 위해 추가적인 장식 효과를 위한 보조 컴포넌트를 만들 수 있을 것입니다.

예를 들어, 색상 옵션 선택기가 있는 메인 드롭다운 기어입니다.

:gear: .
투표 삽입
표 삽입
텍스트 색상. > 빨강
초록
파랑
주황

드롭다운과/또는 툴바에 다른 서식 옵션을 그룹화하여 서식 옵션을 선택할 수 있는 메뉴를 만들 수도 있습니다.

1개의 좋아요

감사합니다. 해당 문제에 대한 수정 사항을 push했습니다.

2개의 좋아요

천만에요! 빠른 답변과 수정에 진심으로 감사드립니다! :vulcan_salute::smiling_face_with_sunglasses::handshake:

선택적 브랜치 설치 방법을 포함하도록 Op Post를 업데이트하는 것을 권장합니다. "color"와 “simple” 브랜치 대안을 확인했습니다.

color 브랜치에서 bbcode_color에 작은 변경 사항을 적용했습니다.

“Desktop\Head” - 65행과 “*€Mobile\Head**” - 96행에서

**“[color=##233]”**를 **“[color=name]”**으로 변경했습니다. WiP 사이트에서 이름(color name)을 색상으로 변경하는 가이드를 만들 예정이기 때문입니다.

16진수 값은 원래 사용했던 값이 아닙니다. 그것이 어떤 값이었는지에 대한 참고용으로만 넣어두었습니다.

아직 초보 단계라 GitHub 계정을 만들고 풀 리퀘스트(Pull Request) 방법을 배우는 데 시간이 좀 걸릴 것입니다.

이렇게 간편하면서도 기능이 풍부한 컴포넌트를 만들어 주셔서 정말 감사합니다. 정말 감사드립니다.

그리고 작은 제안 하나 드리고 싶은데요, 더 긴 태그 대신 이것과 같은 마크다운 관례를 사용해 취소선을 만들 수 있을까요?

1개의 좋아요

이 주제에 대해 한마디 보태겠습니다 :slight_smile:

MD composer extras를 특정 그룹에만 표시할 수 있는 네이티브 옵션이 있으면 좋겠습니다. 저희 경우, 지금은 스태프에게만 추가 버튼들을 테스트해 보고 싶거든요.

지금은 nathan님의 코드에 body:not(.staff)를 추가해서 임시로 숨겼습니다:

// 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;
    }
}

다음 단계로는 각 개별 버튼에 대한 권한 설정이 있으면 좋겠습니다. :drooling_face:

2개의 좋아요

@jrgong 이 컴포넌트와 몇 가지 CSS를 추가하면 가능합니다.

CSS 예시로 제 그룹 내비게이션 메뉴 섹션 TC를 확인해 보세요. 사용자 카드에 링크가 있습니다.

5개의 좋아요

이게 아직 코어에 왜 안 들어갔지? :smiley: 공유해줘서 고마워, 정말 감사해.

3개의 좋아요

Plugin이 이 테마 컴포넌트보다 여전히 장점이 있다는 말인가요?

저는 여전히 플러그인이 더 좋다고 생각하지만, 여기에 제시된 옵션이 마음에 드신다면 괜찮습니다.

2개의 좋아요

빠른 답변 감사합니다. 이유를 설명해 주시겠어요?

개인적인 의견이지만, 컴포넌트에 버튼을 너무 많이 추가한 것 같습니다.

플러그인은 기본 기능에 더 초점을 맞추고 있으며, bbcode 시스템도 더 간단합니다([wrap="center"] 대신 [center]를 사용). 하지만 컴포넌트는 확실히 설치하기가 더 쉽습니다.

4개의 좋아요

혹시 아직 보지 못하셨을 수 있으니 공유합니다:

image

3개의 좋아요

PR를 만들었습니다 :+1:

https://github.com/MonDiscourse/md-composer-extras/pull/12

2개의 좋아요

모든 버튼에 md-composer-extras CSS 클래스를 추가할 수 있을까요? 제 목표는 스태프가 아닌 사용자에게 모든 버튼을 한 번에 숨기는 것이며, 이렇게 하면 CSS 타겟팅이 훨씬 간단해질 것입니다.

이것이 가능한지 확실하지 않습니다. 플러그인 API 파일의 예제 코드를 보면, 이러한 모든 아이콘에 대해 일종의 루트 클래스를 추가하는 방법을 찾을 수 없었습니다. 제가 잘못 이해하고 있을 수도 있지만요.

api.onToolbarCreate(toolbar => {
  toolbar.addButton({
  id: 'pop-text',
  group: 'extras',
  icon: 'bolt',
  action: 'makeItPop',
  title: 'pop_format.title'
  });
 });

staff 클래스가 <body> 요소에 적용됩니다.

따라서 다음과 같이 모든 버튼을 대상으로 할 수 있습니다:

body:not(.staff) .d-editor-button-bar {
    /* 모든 것 숨기기 
     * (팝업 메뉴 버튼을 포함한 표시되는 버튼) 
     */
    button, 
    .toolbar-popup-menu-options {
        display: none; 
    }
}
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;
            }
        }
    }
}

도움이 될까요?

참고로, 이 컴포넌트에 관심이 있을 수 있습니다:

Hey Arkshine! 정말 도움이 됩니다! 그런데 제 생각에는 각 버튼에 md-composer-extras라는 CSS 클래스를 추가하는 것이 더 효율적인 방법일 것 같습니다. 그렇게 하면 모든 요소를 숨기기 위한 CSS 마크업이 매우 간단해집니다 :slight_smile:

감사합니다! 사실 이미 그것을 사용 중입니다 :wink: