Steven
2020 年 3 月 4 日午後 8:46
148
そのようなことはできないと思います。プラグインを作成した当時、FontAwesome5 はまだ使われておらず、右揃えのアイコンが見つからなかったのです。もしあなたが
ただし、デフォルトのボタンを変更したい場合は、以下の 2 つの方法があります。
以下の CSS で左揃えボタンを非表示にします。
/* FLOAT LEFT BUTTON */
.d-editor-button-bar .floatl_ui_button {
display: none;
}
そして、floatr ボタンを追加するテーマコンポーネントをインポートします。
例えば、discourse-floatr.zip (1.2 KB) を使用できます。
これは、かつての floatl と同じアイコンを持つ floatr ボタンを追加するために、Discourse Theme で私が作成したばかりのテーマコンポーネントです。
https://theme-creator.discourse.org/theme/Steven/floatr
「いいね！」 1
jord8on
2020 年 3 月 8 日午前 4:54
149
スティーブン！あなたは天才ですね！この追加作業をしてくださり、本当にありがとうございます🙏
プラグインをフォークして修正する方法が全くわからなかったので、オプション2を選びました！
すべて完璧に動作し、今ではそのボタンがまさに望んだ通りに機能しています！
「いいね！」 1
jord8on
2020 年 3 月 8 日午前 4:56
150
もう一つ質問があります。メインバーから特定のボタンを移動し、歯車アイコンのメニューに隠す簡単な方法はありますか？
例えば、
このプラグインのすべてのツールが気に入っていますが、ほとんどのユーザーはリッチな書式設定オプションを利用しないと思うので、ユーザーのために簡素化したいと考えています。投稿を作成する際にクリックが一つ増えることには問題ありません。ユーザーにとってよりクリーンでシンプルな体験になるのであれば、その方が良いでしょう。
Steven
2020 年 3 月 8 日午後 1:35
151
簡単な方法はありません。floatr ボタンのように、ある程度の修正が必要です。
プラグインをフォークして編集するか、ツールバーのポップアップメニューオプションでそれらを非表示にして再作成する必要があります。
このメニューにオプションを追加する方法については、私のテーマコンポーネントを例として参照してください。または、私が作成した floatr コンポーネントを編集して、このボタンをポップアップメニューオプションに追加することもできます。その後、あなたは簡単に作業を完了できます。
This theme component adds few formatting options in the composer : underline, align center, align right, justify and strikethrough. You can customize the text of each button in the settings, making it compatible with every languages. Exist in rtl version (change align right to align left).
https://github.com/iunctis/md-composer-extras
jord8on
2020 年 3 月 9 日午後 2:52
152
まず第一に、floatr ボタンの調整をしてくださり、改めてありがとうございます。すでに半ダースほど使っており、floatl から floatr へ切り替える必要がなくなったことに大喜びしています！本当にありがとうございます！！！
いつか、プラグインの編集や作成方法を学び、もっと深く理解したいと考えています。このコミュニティで、あなたのような方々が素晴らしい開発を進めてくださっていることに恩返しし、貢献したいと強く願っています。
もし可能であれば、その追加ボタンをギアアイコンの「ポップアップメニュー」に追加していただければ、平均的なユーザーが目にするオプションを減らすことができます。私は CSS やブラウザ要素の検査に精通しており、変更したいクラスや ID を特定できます。あなたの「コンポーネント」についても同様に、コードの構文を確認し、メニューに含めたいボタンや、メニューから外してバーに戻したいボタンを簡単に選定することは可能でしょうか？それとも、もう少し複雑な仕組みになっているのでしょうか？
Steven
2020 年 3 月 9 日午後 4:42
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
jord8on
2020 年 3 月 13 日午前 4:14
154
あなたは本当に素晴らしいです、@Steven ！この詳細な回答をありがとうございます。コミュニティがすべてのオプションをどう扱うかを見て、もし混乱しているという声が聞こえたら、ここでは2つ目のアプローチ、つまりテーマコンポーネントを使う方法を採用しようと思います。そのアプローチは私にとって非常に明確に思えます。
また、この素晴らしいプラグインをサポートしてくださり、お手伝いいただきありがとうございます。余談ですが…デフォルトのフローティングボタンを「右」に変更するのを手伝っていただき、本当に感謝してもしきれません。とても素晴らしいです！
neounix
2020 年 4 月 8 日午後 12:13
155
簡単な質問です：テーマ内の api.onToolbarCreate コードで、コンポーザーの異なるボタンアクションのために何を変更すればよいでしょうか？
基本的には、マルチラインのコードブロックの周りに以下の Markdown を追加する新しいコンポーザーボタンを追加したいと考えています。
```text
```
api.onToolbarCreate(toolbar => {
toolbar.addButton({
id: "code_button",
group: "fontStyles",
icon: "code",
perform: e => e.applySurround('\n```text\n', '\n```\n', 'code_text')
});
});
つまり、各行に新しいアクションを追加するのではなく、マルチラインのコードブロック全体を囲むようにしたいのです。
ボタンのアクション前：
ボタンのアクション後：
マルチラインのテキストブロックに適用される e.applySurround 以外のメソッドがあるのではないかと推測していますが、サイト内や Google で検索しても見つからず、30 分ほど検索した後に質問を投稿することにしました。
また、https://docs.discourse.org/ で様々なキーワードを検索しましたが、これも成功しませんでした。
よろしくお願いします。
neounix
2020 年 4 月 8 日午後 12:39
156
Google 検索で 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 } )
});
});
これで準備完了です。ありがとうございました。
もし間違っていたら指摘してくださいが、公式の Discourse の bbcode はすでに最新版にパッケージされています。このプラグインをインストールすると競合しますか？私がこの書式設定ツールバーを希望する主な理由は、ボタンでテキストの色を変更できるオプションが欲しいからです。
Steven
2020 年 7 月 24 日午後 4:31
159
Discourse の BBCode プラグインは、コアに同梱されていない外部プラグインのようです。
2 つの選択肢があります：
公式プラグインを使用する場合は、2 つ目のオプションが最適です。テーマコンポーネントは、アップグレードが必要な場合に簡単に無効化できます。
フォーマットツールバーが破損したり、Discourse コアと競合したりすることはありません。
「いいね！」 1
以前は、公式の BBCode プラグイン付きの md composer テーマコンポーネントを使用していました。しかし、このプラグインにはあるテキストの色を変更するボタンがありません。理想的にはカラーピッカーがあると良いのですが、それは不可能だと思います。
Steven
2020 年 7 月 24 日午後 7:03
161
ああ、わかりました。そのコンポーネントはコアに用意されている要素のみを使用しており、カラー BB コードにはご存知の通りプラグインが必要です。コンポーネント内のボタンを編集（または GitHub でフォーク）するのはそれほど難しくはありませんが、あなたのケースではおっしゃる通り、このプラグインが最良の選択です。
このプラグインをインストールすることはできますが、マークダウンエンジンでの競合を避けるため、公式の BB コードプラグインも同時にアンインストールすることをお勧めします。
カラーピッカーについては、正直なところ私は優れたプログラマーではありません。コミュニティと共有するために利用可能なツールをいくつか使っただけです。このプラグインをより良くするためのプルリクエストを喜んで受け付けます。
「いいね！」 1
私は自分でプラグインを作成するため、コンポーザーにボタンを追加する方法を学ぶことになるでしょう。しかし、Discourse を最近始めたばかりなので、カラーピッカーを追加するプルリクエストを送るのにふさわしい人物かどうかはわかりません。
はい、公式の bbcode プラグインはアンインストールしました。オートコンプリート機能を持つ「awesome bbcode」というプラグインもありましたが、カラーボタンの有無を考えると、Discourse に不慣れで bbcode を知らない一般的なユーザーにとっては、こちらの方が良いと思います。
このプラグインに「画像を挿入」ボタンがもう一つ含まれていることに気づきました。元のボタンでも添付ファイルや URL リンクが可能なので、本当に必要なのでしょうか。それ以外のフォーマットボタンは気に入っています。ただ、コンポーザーに画像アイコンが 2 つあるのは少し奇妙に見えるので気になりました。もし削除できない場合、マークダウンコンポーザーと公式の BB コードに戻さざるを得ません。
「いいね！」 1
neounix
2020 年 7 月 26 日午前 4:18
164
CSS を使用して、コンポーザーツールバーから非表示にしたいボタンや項目を簡単に隠すことができます。
または、別の代替案として:
コンポーザーツールバーに表示したくないボタンを削除するようにプラグインを簡単に修正できます。
Steven
2020 年 7 月 26 日午後 2:23
165
これは主に、外部リンクに大きく依存するフォーラムのフローティングボタンや配置に使用するために追加されました。主に内部アップロードの画像を使用する場合は、これを非表示にできます。
行をコメントアウトすれば、そのボタンを削除するのに十分でしょうか？
https://github.com/iunctis/discourse-formatting-toolbar/blob/master/assets/javascripts/discourse/initializers/formattingtlb-ui.js.es6#L18L25
# version: 3.2
# authors: Steven, iunctis.fr - Thanks to ZogStrip, eviltrout, cpradio and Sam Saffron
# url: https://github.com/iunctis/discourse-formatting-toolbar.git
# transpile_js: true
enabled_site_setting :formattingtlb_enabled
register_asset 'stylesheets/formatting.scss'
register_svg_icon "underline" if respond_to?(:register_svg_icon)
register_svg_icon "indent" if respond_to?(:register_svg_icon)
register_svg_icon "far-image" if respond_to?(:register_svg_icon)
register_svg_icon "align-left" if respond_to?(:register_svg_icon)
register_svg_icon "align-center" if respond_to?(:register_svg_icon)
register_svg_icon "align-right" if respond_to?(:register_svg_icon)
register_svg_icon "align-justify" if respond_to?(:register_svg_icon)
register_svg_icon "palette" if respond_to?(:register_svg_icon)
register_svg_icon "font" if respond_to?(:register_svg_icon)
Steven
2020 年 7 月 26 日午後 3:23
167
テーマにいくつかの CSS を追加するのが最適です
/* 画像ボタン */
.d-editor-button-bar .addimg_ui_button {
display: none;
}
「いいね！」 1
