Build Poll 옵션(데스크톱)을 추가 메뉴에서 꺼내서 나머지 서식 버튼 옆으로 이동시킬 수 있나요?
모바일에서 요청하신 것과 마찬가지로, 이 테마 컴포넌트에는 추가할 수 없는 좀 더 복잡한 편집이 필요합니다. 하지만 angus와 spirobel이 제시한 로직을 따르며 데스크톱용 커스텀 컴포넌트에서는 구현할 수 있을 것입니다.
3개의 좋아요
중앙 정렬과 왼쪽/오른쪽 정렬 버튼을 제거하는 방법은 무엇인가요?
참고로 이 컴포넌트는 정말 좋습니다.
안녕하세요!
테마 또는 컴포넌트에 다음 CSS 줄을 추가할 수 있습니다:
.align_center_button, .align_right_button, .align_justify_button {
display: none;
}
같은 컴포넌트에 왼쪽 정렬이 추가되지 않았으므로, 중앙 정렬 버튼이 아닌 양쪽 정렬 버튼을 의미하신 것 같습니다.
1개의 좋아요
이 새로운 버튼들을 모두 옵션 버튼/메뉴 안으로 이동시킬 수 있을까요?
가능은 하지만, 코드를 조금 더 자세히 살펴봐야 합니다.
Desktop > Head 섹션에서 모든 JavaScript 코드를 확인할 수 있으며, 몇 줄을 수정해야 합니다.
예를 들어, 툴바 버튼의 코드는 다음과 같습니다.
api.onToolbarCreate(toolbar => {
toolbar.addButton({
id: "underline_button",
group: "fontStyles",
icon: "underline",
perform: e => e.applySurround('[u]', '[/u]', 'underline_text')
});
});
다음과 같이 수정해야 합니다.
api.addToolbarPopupMenuOptionsCallback(() => {
return {
action: "underline",
icon: "underline",
label: "underline_button"
};
});
그리고 이 부분에 해당 동작(action)을 추가하세요:
api.modifyClass("controller:composer", {
actions: {
underline() {
this.get("toolbarEvent").applySurround('[u]', '[/u]', "underline_text");
},
floatleft() {
this.get("toolbarEvent").applySurround('[wrap="floatl"]\n', '\n[/wrap]', "float_left_text");
},
columns() {
this.get("toolbarEvent").applySurround('[wrap="columns"]\n', '\n[/wrap]', "columns_text");
}
}
});
번역은 괜찮을 것입니다.
변경 사항을 저장할 때 Discourse가 오류 메시지를 표시하므로, 문제가 있는지 금방 알 수 있을 것입니다.
5개의 좋아요
훌륭한 컴포넌트네요, @Steven
H1, H2, H3도 함께 사용할 수 있으면 정말 좋겠어요
2개의 좋아요
이 테마 컴포넌트에 [color] [/color]를 추가할 수 있을까요? 가능하다면 완벽한 해결책이 될 것 같습니다. 그렇게 되면 공식 디스코urs bbcode+md composer를 사용할 수 있으니까요. 현재는 포맷팅 툴바 + mdcomposer를 사용 중입니다. 물론 CSS로 추가 버튼을 숨길 수는 있지만, 관리자 패널이나 pavilion의 Custom Wizard 플러그인처럼 CSS가 적용되지 않는 부분이 있습니다. 색상 버튼은 매우 자주 사용되거든요.
CSS를 적용했을 때의 모습입니다: (이 상태가 완벽합니다)
CSS를 적용하지 않았을 때의 모습입니다:
1개의 좋아요
플러그인을 원하지 않는 사람들을 위한 컴포넌트를 만들 계획입니다. 하지만 색상 BBCode를 지원하는 브랜치를 따로 만들겠습니다. 시간이 되면 몇 시간 안에 테스트해 보겠습니다. 준비가 되면 설치 방법을 알려드리겠습니다.
아마 그 시간을 활용해 테마 컴포넌트를 재구성할 것 같습니다. 기본적으로 단순한 tc를 선호하기 때문에, 모든 옵션을 서브스크립트 버튼으로 제공하는 all-options 브랜치를 사용하고, 공식 BBCode 플러그인을 사용하는 사람들을 위해 bbcode 브랜치를 따로 만들 예정입니다.
2개의 좋아요
감사합니다. 부분 문자열/위 첨자 버튼은 다른 플러그인이나 테마 구성 요소에서 찾아볼 수 없는, md composer를 계속 사용하게 만드는 이유 중 하나입니다. 공식 bbcode에는 포맷팅 툴바 플러그인에 없는 기능들이 많이 포함되어 있는데, 예를 들어 [spoiler] [/spoiler] 태그가 그렇습니다. 두 가지의 장점을 모두 활용하려면, discourse의 bbcode를 유지하면서 필요한 버튼은 mdcomposer를 통해 추가하는 것이 더 좋다고 생각합니다.
스크립트 버튼이 인기 있다고 생각하지 않아서, 기본 컴포넌트에 그대로 두겠습니다.
몇 가지 브랜치를 만들 예정입니다. 기본 서식 버튼만 있는 간단한 브랜치와, 색상 BBCode를 추가하는 색상 브랜치입니다.
2개의 좋아요
여러분,
md composer에 새로운 color 브랜치가 추가되었음을 알려드립니다. 이제 공식 discourse bbcode 플러그인 + md composer(color 브랜치) + discourse spoiler-alert(스포일러 흐림 처리)를 함께 사용할 수 있습니다. 이 조합이 Discourse의 composer 버튼에 사용할 수 있는 최상의 조합이라고 생각합니다.
또한, 이 무료 라이브러리를 사용하여 색상 선택기를 추가하는 아이디어도 있습니다:
색상 선택기를 추가하는 방법을 아시는 분이 계시다면, Steven을 도와주세요!
2개의 좋아요
이 버튼 중 일부는 완전히 숨기거나 삭제하는 방법이 있을까요? 몇 개만 필요해서 버튼을 삭제해도 해당 항목은 목록에 계속 남아있는 것을 확인했습니다(보이는 아이콘 없이 빈 공간만 남아 있습니다).
가장 좋은 방법은 현재 테마에 몇 줄의 CSS를 추가하는 것입니다.
정렬 버튼에 대해 이 예시를 드렸는데, 이 버튼들을 제거하고 싶으시다면
.align_center_button, .align_right_button, .align_justify_button {
display: none;
}
숨기고 싶은 특정 버튼에 대한 CSS 코드도 드릴 수 있습니다.
5개의 좋아요
스티븐, 안녕하세요! 훌륭한 컴포넌트네요. 공유해 주셔서 감사합니다!
간단한 질문 하나 드릴게요: 비어두는 공백(nbsp, ensp, emsp 등)을 추가하는 버튼을 구현할 수 있을까요? applySurround 대신 무엇을 사용해야 하나요?
커뮤니티의 일부 회원들이 게시글 서식(주로 들여쓰기)에 어려움을 겪고 있어서, 이 기능이 있다면 큰 도움이 될 것 같습니다.
감사합니다!
네, 버튼을 쉽게 추가할 수 있고, applysurround 대신 addText를 사용하고 있습니다.
사용할 수 있는 예전 예제가 하나 있습니다.
api.onToolbarCreate(toolbar => {
toolbar.addButton({
id: "br_button",
group: "extras",
icon: "level-down-alt",
perform: e => e.addText('<br>', 'br_text')
});
});
3개의 좋아요
감사합니다! 그걸로 충분합니다!
음… Discourse Formatting Toolbar에는 취소선 기능이 없는 것 같은데 여기에는 있네요. 저는 다른 모든 기능과 더 많은 기능을 포함하고 있어서 Formatting Toolbar를 선호하지만, 취소선도 옵션으로 가질 수 있으면 좋겠습니다. 이 두 가지 사이에 호환성 문제가 있는 것을 고려할 때, 어떻게 추천하시나요?
플러그인의 도구 모음에 취소선 버튼을 추가할 수 있습니다. 미래에 유용할 수 있습니다.
고려해 보겠습니다. 그 사이, 플러그인을 사용하면서 이 컴포넌트를 추가해 보세요: GitHub - MonDiscourse/discourse-strikethrough: Add a strikethrough button in the composer · GitHub
팝업 메뉴 동작에 취소선 버튼을 추가하며, 해당 플러그인과 호환됩니다.
3개의 좋아요
PR를 제출했습니다: https://github.com/MonDiscourse/md-composer-extras/pull/10
쉼표 위치를 잘못 놓은 것이 아니라면, 다음 문제를 수정해야 합니다.
테스트에서 오류를 방지하려면 `modifyClass` 호출에 `pluginId` 키를 추가하세요. 이렇게 하면 수정 사항이 한 번만 적용되도록 보장됩니다.
2개의 좋아요