MD Composerの追加機能

ご提案いただいた通り、不要なものを次のように非表示にしました。

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

Stevenさん、こんにちは。

非常に良いコンポーネントですが、軽微なバグを見つけました。上付き文字に軽微なエラーがあります。以下を参照してください。

/sup の代わりに /sub で閉じています。

「いいね!」 2

ちょっとした考えですが、高度なバージョンで設定トグルを使用するオールインワンを作成できるかもしれません。

つまり、bbcodeプラグインを使用している場合はトグルがあり、どちらのブランチでもボタンを非表示にしたり、バーにボタンを追加したりするオプションがあります。管理者が:gear:ドロップダウンでオプションを除外したい場合も同様です。

私はまだCSSを学習中で、かなり初心者です。しかし、補完的なコンポーネントを作成して、カスケードドロップダウンでドロップダウンを整理するための追加の装飾を施すことができるでしょう。

つまり、カラーオプションピッカー付きのメインドロップダウンギアです。

:gear: .
投票を挿入
表を挿入
テキストカラー。 >
オレンジ

他の書式設定オプションをドロップダウンやツールバーにグループ化して、書式設定オプションを選択するメニューを作成することもできるかもしれません。

「いいね!」 1

ありがとうございます。この問題の修正をプッシュしました。

「いいね!」 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サイトに掲載する予定のためです。

16進数はあなたが持っていたものではありません。それは、それが何であったかの参照としてそれを置いただけです。

私はまだ初心者なので、githubを作成してプルリクエストの方法を学ぶ必要があります。

このシンプルで機能豊富なコンポーネントをありがとうございます!大変感謝しております。

そして、ささやかな提案ですが、より冗長な<s></s>の慣習の代わりに、Markdownの~~これ~~という慣習を打ち消し線に使用することは可能でしょうか?

「いいね!」 1

この件についてコメントします :slight_smile:

MDコンポーザーの追加機能を特定のグループにのみ表示するネイティブなオプションがあると素晴らしいと思います。私たちの場合は、現時点ではスタッフのみに余分なボタンをテストしたいと考えています。

今のところ、nathanのコードに body:not(.staff) を追加して非表示にしています。

// スタッフ以外のユーザーからMDコンポーザーの追加機能の不要なボタンを非表示にする
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

このテーマコンポーネントよりもプラグインに利点があるという状況は、まだ変わりませんか?

プラグインの方がまだ良いと思いますが、ここに提示された選択肢でよろしければ、それで結構です。

「いいね!」 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;
            }
        }
    }
}

これで役立ちますか?

ちなみに、このコンポーネントにも興味があるかもしれません。

Arkshineさん、それは確かに役立ちます!しかし、IMOでは、各ボタンにCSSクラス md-composer-extras を追加する方がより効率的なアプローチになるでしょう。そうすれば、すべての要素を非表示にするCSSマークアップは非常にシンプルになります :slight_smile:

ありがとうございます!実際にもう使用しています :wink: