MD Composerの追加機能

ビルド投票オプション(デスクトップ版)を「その他」メニューから移動させ、他の書式設定ボタンの隣に配置することは可能ですか?

あなたのモバイルでのリクエストと同様に、これにはもう少し複雑な編集が必要で、このテーマコンポーネントでは追加できません。しかし、angus と spirobel が提示したロジックに従えば、デスクトップ用のカスタムコンポーネントで実装可能はずです。

「いいね!」 3

センターを削除し、左右のボタンを左揃えと右揃えにするにはどうすればよいでしょうか?

ちなみに、このコンポーネントは素晴らしいですね。

こんにちは!

テーマまたはコンポーネントに以下の CSS 行を追加できます。

.align_center_button, .align_right_button, .align_justify_button {
    display: none;
}

左揃えボタンが同じコンポーネントに追加されていないため、おそらく「justify ボタン」のことかと思われます。

「いいね!」 1

これらの新しいボタンをすべて「オプション」ボタン/メニュー内に移動することは可能ですか?

可能です。ただし、コードを少し掘り下げる必要があります。

デスクトップ > ヘッダーにはすべての 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"
  };
});

そして、以下の部分にアクションを追加します。

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] タグをこのテーマコンポーネントに追加することはできますか?もし可能であれば、公式の Discourse bbcode+md コンポーザーを使用できるようになり、完璧です。現在、フォーマットツールバーと mdcomposer を併用しています。確かに CSS で余分なボタンを非表示にすることもできますが、管理パネルや Pavilion の Custom Wizard プラグインなど、CSS が適用されない場所もあります。color ボタンは非常に頻繁に使用されています。

CSS を使用した場合の状態(これは完璧です):
image

CSS を使用しない場合の状態:
image

「いいね!」 1

プラグインが不要な人のためのコンポーネントを用意する予定です。ただし、カラー BB コードを含むブランチも作成します。時間があれば数時間以内に試してみます。準備ができ次第、インストール方法も含めてお知らせします。

その時間はテーマコンポーネントの再構成に充てる予定です。デフォルトではシンプルな TC を採用し、公式 BB コードプラグインを持っている人のために、すべてのオプションを含むブランチと下付き文字ボタン、BB コード専用のブランチを用意します。

「いいね!」 2

ありがとうございます。下付き/上付きのボタンは、他のプラグインやテーマコンポーネントにはない機能であり、md composerを使い続ける理由の一つです。公式のbbcodeには、フォーマットツールバープラグインには含まれていない[spoiler][/spoiler]のような多くの機能が含まれています。両方の利点を活かすためには、Discourseのbbcodeを維持し、mdcomposerを通じて必要なボタンを追加するのが良いと思います。

スクリプトボタンが人気があるとは思いませんでしたが、ベースコンポーネントに残しておきます。

いくつかのブランチを作成します。基本的な書式設定ボタンだけのシンプルなブランチと、カラーの BB コードを追加するカラーブランチです。

「いいね!」 2

みなさん、こんにちは

md コンポーザーに新しい color ブランチが追加されたことをお知らせします。これで、公式の Discourse bbcode プラグイン + md コンポーザー(color ブランチ)+ Discourse spoiler-alert(ネタバレのぼかし)を組み合わせることができるようになりました。Discourse のコンポーザーボタンとしては、これが現時点で最良の組み合わせだと考えています。

また、以下の無料ライブラリを使ってカラーピッカーを追加するというアイデアもあります。

カラーピッカーの追加方法をご存じで、お手伝いいただける方がいらっしゃれば、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 の方が好みですが、打ち消し線もオプションとして利用したいです。これら 2 つの互換性に問題があることを考えると、どうすることをお勧めしますか?

プラグインのツールバーに打ち消し線ボタンを追加することもできます。将来的に関連性があるかもしれません。

検討しますが、それまでの間、プラグインを使用してこのコンポーネントを追加できます: GitHub - MonDiscourse/discourse-strikethrough: Add a strikethrough button in the composer

これにより、ポップアップメニューのアクションに打ち消し線ボタンが追加され、プラグインと互換性があります。

「いいね!」 3

プルリクエストを送信しました: https://github.com/MonDiscourse/md-composer-extras/pull/10
コンマなどを間違えていない限り、以下を修正するはずです。

To prevent errors in tests, add a `pluginId` key to your `modifyClass` call. This will ensure the modification is only applied once.
「いいね!」 2