Formatting toolbar

커스터마이징 플러그인
148

그런 일을 할 수 있을 것 같지 않습니다. 플러그인을 만들 당시에는 FontAwesome5를 사용하지 않았고, 들여쓰기 오른쪽(indent right)에 사용할 적절한 아이콘을 찾지 못했습니다. 만약 여러분이

하지만 기본 버튼을 변경하고 싶다면 두 가지 해결책이 있습니다:

다음 CSS를 사용하여 왼쪽 정렬(float left) 버튼을 숨길 수 있습니다.

/* FLOAT LEFT BUTTON */
.d-editor-button-bar .floatl_ui_button {
    display: none;
}

그리고 floatr 버튼을 추가하는 테마 컴포넌트를 가져오면 됩니다.

discourse-floatr.zip (1.2 KB) 파일을 사용할 수 있습니다.

이것은 제가 방금 Discourse Theme에서 만든 테마 컴포넌트로, 이전 floatl과 동일한 아이콘을 가진 floatr 버튼을 추가합니다.

https://theme-creator.discourse.org/theme/Steven/floatr

1개의 좋아요
149

스티븐! 당신 정말 천재야! 이 작업에 대한 추가 수고 정말 감사해 :folded_hands:

플러그인을 포크해서 수정하는 방법을 전혀 모르기 때문에 옵션 2를 선택했어!

모든 게 완벽하게 작동했고, 이제 그 버튼이 우리가 원하는 대로 정확히 작동해!

1개의 좋아요
150

여기서 한 가지 더 질문이 있는데… 메인 바의 특정 버튼을 기어 아이콘 메뉴로 이동시키고 숨기는 간단한 방법이 있을까요?

예를 들어,

image
image956×417 105 KB

이 플러그인의 모든 도구를 좋아하지만, 대부분의 사용자는 풍부한 서식 옵션을 많이 활용하지 않을 것 같아서 사용자 경험을 더 단순화하고 싶습니다. 글 작성 시 클릭이 한 번 더 필요하더라도, 사용자들에게 더 깔끔하고 단순한 경험을 제공한다면 괜찮습니다.

151

쉬운 방법은 아닙니다. floatr 버튼처럼 일부 수정이 필요합니다.

플러그인을 포크해서 수정하거나, 기존 버튼을 숨긴 뒤 도구 모음 팝업 메뉴 옵션에서 다시 생성하는 방법 중 하나를 선택해야 합니다.

이 메뉴에 옵션을 추가하는 방법에 대한 예시로 제가 만든 테마 컴포넌트를 참고할 수 있습니다. 아니면 제가 만든 floatr 컴포넌트를 수정해서 팝업 메뉴 옵션에 이 버튼을 추가해 드릴 수 있고, 그러면 이후 작업을 쉽게 마무리할 수 있을 것입니다.

https://github.com/iunctis/md-composer-extras

152

우선, floatr 버튼에 대해 해준 그 수정에 다시 한번 감사드립니다. 이미 반 다스(여섯 번) 정도 사용했는데, floatl에서 floatr로 전환할 필요가 없다는 점이 정말 좋습니다. 감사합니다!!!

언젠가는 더 많이 배우고, 플러그인을 편집하고 만들 수 있는 방법을 알고 싶습니다. 이 커뮤니티에서 여러분 같은 분들의 훌륭한 개발에 보답하고 기여하고 싶습니다.

일반 사용자가 보는 옵션을 줄이기 위해, 기어 아이콘 "팝업 메뉴"에 그 추가 버튼들을 넣어주시면 좋겠습니다. 저는 CSS와 브라우저 요소 검사로 수정하고 싶은 클래스/ID를 찾는 데 능숙합니다. 그러면 당신의 "컴포넌트"도 같은 방식으로 코드의 구문을 보고, 어떤 버튼을 메뉴에 넣고 싶은지, 또는 메뉴에서 빼서 다시 바에 올리고 싶은지 쉽게 결정할 수 있을까요? 아니면 그보다 좀 더 복잡한가요?

153

같은 JavaScript를 사용하지 않기 때문에 더 복잡합니다.

간단한 예시를 만들어 봤는데, 작성기에 취소선 버튼을 추가하려면 다음 JavaScript를 사용해야 합니다.

api.onToolbarCreate(toolbar => {
    toolbar.addButton({
        id: "strike_button",
        group: "fontStyles",
        icon: "strikethrough",
	perform: e => e.applySurround('<s>', '</s>', 'strike_text')
    });
});

하지만 툴바 메뉴 옵션의 경우 완전히 다릅니다.

api.addToolbarPopupMenuOptionsCallback(() => {
  return {
    action: "strike",
    icon: "strikethrough",
    label: "strike_button"
  };
});

api.modifyClass("controller:composer", {
  actions: {
    strike() {
      this.get("toolbarEvent").applySurround("<s>", "</s>", "strike_prompt");
    },
  }
});

툴바 옵션 등에 필요한 번역은 추가하지 않았습니다. 하지만 원리는 이해하셨을 것입니다.

저는 툴바와 메뉴 옵션 사이에서 선택지를 추가하고 JavaScript를 조정할 만큼 지식이 부족합니다. 일부 버튼의 활성화/비활성화를 위한 옵션을 추가하려는 시도는 한동안 잘 작동했지만, 최근에는 문제가 발생했고 어떻게 수정해야 할지 정확히 모르겠습니다. 그래서 대부분의 사용자를 위해 선택을 할 수밖에 없었습니다.

어쨌든, bbcode를 유지하면서 버튼들을 메뉴 옵션으로 이전하고 싶다면, 플러그인을 유지하고 CSS로 버튼을 숨긴 뒤 테마 구성 요소를 사용하여 메뉴 옵션에 버튼을 추가하는 것이 가장 좋은 방법이라고 생각합니다. 플로팅 버튼에 대해 비슷한 작업을 수행했던 적이 있으므로 완전히 가능합니다. 시간이 좀 걸리지만, 이 주제에서 막막하다면 도움을 드릴 수 있습니다.

테마 구성 요소를 사용할 때는 Discourse Theme를 사용하는 것이 좋습니다. 구성 요소에 설정, 번역, 코드를 추가하고 미리 볼 수 있습니다. 크리에이터를 위한 정말 훌륭한 도구입니다.

2개의 좋아요
154

정말 대단하세요, @Steven! 이렇게 꼼꼼한 답변을 주셔서 감사합니다. 커뮤니티가 모든 옵션을 어떻게 다루는지 먼저 지켜보고, 혼란스럽다는 피드백이 들어오면 말씀하신 두 번째 방법인 테마 컴포넌트를 사용하겠습니다. 그 접근 방식이 제게는 매우 명확해 보입니다.

다시 한번 도움과 이 훌륭한 플러그인에 대한 지원을 해주셔서 감사합니다. 참고로… 기본 플로팅 버튼을 "오른쪽"으로 변경해 주신 데 대해 아무리 감사하다고 해도 부족할 정도입니다. 정말 훌륭했습니다!

155

간단한 질문입니다: 이 api.onToolbarCreate 코드를 테마에서 어떻게 수정해야 합니까? 컴포저에서 다른 버튼 동작을 위해 말이죠.

기본적으로, 여러 줄의 코드 블록 주위에 이 MD를 추가하는 새로운 컴포저 버튼을 추가하려고 합니다:

```text

```

api.onToolbarCreate(toolbar => {
    toolbar.addButton({
        id: "code_button",
        group: "fontStyles",
        icon: "code",
        perform: e => e.applySurround('\n```text\n', '\n```\n', 'code_text')
    });
});

이렇게 하면 각 줄에 새로운 동작을 추가하는 대신, 여러 줄의 코드 블록 주위에 결과가 적용되도록 할 수 있을까요?

버튼 동작 전:

Screen Shot 2020-04-08 at 7.02.47 PM
Screen Shot 2020-04-08 at 7.02.47 PM860×209 11.8 KB

버튼 동작 후:

Screen Shot 2020-04-08 at 7.02.53 PM
Screen Shot 2020-04-08 at 7.02.53 PM2048×858 130 KB

여러 줄의 텍스트 블록에 적용되는 e.applySurround와 다른 메서드가 있다고 가정합니다. 하지만 사이트와 구글에서 검색해 보아도 아무것도 나오지 않아서, 30분간 검색한 끝에 질문을 올리게 되었습니다.

또한 https://docs.discourse.org/에서 다양한 키워드로 검색해 보았지만 운이 좋지 않았습니다.

감사합니다,

156

multiline: false라는 메서드/파라미터를 구글링을 더 해서 찾았네요…

perform: e => e.applySurround('\n```text\n', '\n```\n', 'code_text', { multiline: false } )

});
api.onToolbarCreate(toolbar => {
    toolbar.addButton({
        id: "code_button",
        group: "fontStyles",
        icon: "code",
        perform: e => e.applySurround('\n```text\n', '\n```\n', 'code_text', { multiline: false } )
    });
});

그래서 이제 준비가 끝났습니다. 감사합니다.

157

제가 틀렸다면 알려주세요. 공식 Discourse BBCode가 이미 최신 Discourse에 포함되어 있다면, 이 플러그인을 설치했을 때 충돌이 발생합니까? 이 서식 툴바를 원하는 주된 이유는 버튼으로 텍스트 색상을 변경할 수 있는 옵션을 갖고 싶기 때문입니다.

158

전혀 충돌이 없습니다.

159

Discourse BBCode 플러그인은 여전히 외부 플러그인이며, 코어에 포함되지 않습니다.

두 가지 옵션이 있습니다:

  • 엔진에 BBCode를 추가하고 툴바에 몇 가지 버튼을 추가하는 이 플러그인
  • 공식 BBCode 플러그인 + Composer extras (툴바에 몇 가지 버튼을 추가하는 선택적 테마 컴포넌트).

공식 플러그인을 선호한다면 두 번째 옵션이 가장 좋습니다. 업그레이드가 필요한 경우 테마 컴포넌트는 쉽게 비활성화할 수 있습니다.

포맷팅 툴바가 깨지거나 Discourse 코어와 충돌을 일으켜서는 안 됩니다.

1개의 좋아요
160

이전에는 공식 BBCode 플러그인과 함께 md composer 테마 컴포넌트를 사용했습니다. 하지만 이 플러그인에 있는 텍스트 색상 변경 버튼이 없습니다. 이상적으로는 색상 선택기가 있으면 좋겠지만, 가능하지 않을 것 같습니다.

161

아, 알겠습니다. 해당 컴포넌트는 코어에서 사용할 수 있는 요소만 사용하고, 컬러 BBCode는 아시다시피 플러그인 하나가 필요하죠. 컴포넌트에서 버튼을 수정하는 것(또는 GitHub에서 포크하는 것)은 그렇게 어렵지 않지만, 당신의 경우에는 맞습니다. 이 플러그인이 최선의 선택입니다.

이 플러그인을 설치할 수 있지만, 마크다운 엔진에서 충돌이 발생하지 않도록 공식 BBCode 플러그인을 동시에 제거하는 것을 권장합니다.

컬러 피커에 관해서는, 솔직히 저는 코딩에 능숙하지 않습니다. 커뮤니티와 공유할 수 있는 몇 가지 도구를 사용한 것뿐이며, 이 플러그인을 더 좋게 만들 수 있는 풀 리퀘스트는 기꺼이 받아들일 것입니다.

1개의 좋아요
162

제가 직접 플러그인을 만들 예정이라, composer에 버튼을 추가하는 방법을 배우면서 진행할 가능성이 높습니다. 다만, 제가 최근에야 Discourse를 배우기 시작한 터라, 컬러 피커를 추가하는 pull request를 보내는 것이 적절한지 확신이 서지 않습니다.

그리고 네, 공식 bbcode 플러그인은 이미 제거했습니다. 자동완성 기능이 있는 awesome bbcode도 있었지만, 컬러 버튼 덕분에 Discourse를 처음 접하거나 bbcode에 익숙하지 않은 일반 사용자에게는 이 쪽이 더 나은 것 같습니다.

163

image

이 플러그인에는 또 다른 “이미지 삽입” 버튼이 포함되어 있는 것을 확인했습니다. 원래 버튼이 첨부 파일이나 URL 링크를 허용하는 점을 고려하면, 정말로 필요한가요? 그 외의 서식 버튼들은 마음에 듭니다. 작성기에 이미지 아이콘이 두 개 있는 것이 좀 이상해서 궁금합니다. 제거할 수 없다면 md 작성기 + 공식 bbcode 사용을 다시 고려해야 할 것 같습니다.

1개의 좋아요
164

CSS를 사용하면 컴포저 도구 모음에서 숨기고 싶은 버튼이나 항목을 쉽게 숨길 수 있습니다.

또는 다른 대안으로:

플러그인을 수정하여 컴포저 도구 모음에 표시하지 않을 버튼을 쉽게 제거할 수 있습니다.

165

이 기능은 주로 플로팅 버튼이나 외부 링크에 크게 의존하는 포럼 정렬과 함께 사용하기 위해 추가되었습니다. 주로 내부 업로드 이미지를 사용하신다면 이 기능을 숨길 수 있습니다.

166

주석을 달면 그 버튼을 제거하는 데 충분한가요?

https://github.com/iunctis/discourse-formatting-toolbar/blob/master/assets/javascripts/discourse/initializers/formattingtlb-ui.js.es6#L18L25

167

테마에 일부 CSS를 추가하는 것이 가장 좋습니다

/* IMAGE BUTTON */
.d-editor-button-bar .addimg_ui_button {
    display: none;
}
1개의 좋아요