MD Composerの追加機能

[Steven]

このテーマコンポーネントは、エディタにいくつかの書式設定オプション（下線、中央揃え、右揃え、両端揃え、取り消し線）を追加します。各ボタンのテキストを設定でカスタマイズできるため、あらゆる言語に対応可能です。RTL（右から左へ）バージョンも存在し（右揃えを左揃えに変更）、RTL言語のフォーラム向けに最適化されています。

互換性

このテーマコンポーネントは、Discourse Formatting Toolbar の代替手段ですが、両方を同時に使用することは推奨しません。

プラグインのインストールをお勧めしますが、プラグインをインストールしたくない、またはできない場合は、このテーマコンポーネントがエディタに必要なオプションを提供する可能性があります。

また、モバイルデバイスでの利用に合わせて、一部のボタン（箇条書きリスト、リスト、両端揃え）を非表示にしました。これらの機能はモバイルデバイスではあまり役立たないと判断したためです。

RTL言語のフォーラム向けには、以下のRTLバージョンがあります：GitHub - MonDiscourse/md-composer-extras-rtl: Add some formatting option in your discourse composer (rtl version) · GitHub

問題が発生した場合は、お気軽にご連絡ください！

	プレビュー	md-composer-extras - プレビュー
	リポジトリ	md-composer-extras
	インストールガイド	テーマまたはテーマコンポーネントのインストール方法
	Discourse テーマ初心者の方へ	Discourse テーマの使い方の初心者ガイド

[Anatolia]

It becomes like this if I use alignin together with underline.

[Steven]

That’s a limitation of the div align code, you need to add a line between the div align and your text

<div align="center">

[u]underline[/u]
</div>

That’s why I used a bbcode in my formatting toolbar, but I could only use the div in this theme component.

I’ll probably add an extra line by default and a little explanation

[Steven]

I upgraded the component to add those extra lines by default, now, when you use a align button and the underline button, you’ll have something like this

[tophee (Christoph)]

@Steven

I recommend the plugin

What are the disadvantages of using the theme-component?

[Steven]

The plugin is easier to customize, we can choose which buttons will appear or not, and there are some additional options like color or a float button that can do something like this with the image

[jtbayly]

テーマコンポーネントでできることがとても素晴らしいですね！よくできました。

[verilog15 (verilog)]

よくできました
HTML タグを [Center] のようなデフォルトタグに変換し、バックエンドで UI 上の理由により再度変換戻すことは可能だと思いますか？

[Steven]

当時、テーマコンポーネントを使って一部のbbcodeを簡単に作成することはできませんでした。現在も同様かどうかはわかりません。

現時点では、bbcodeのcenterとコンポーザー内のボタンを使用したい場合、最も良い方法は以下のプラグインを利用することです：Formatting toolbar

[Johani (Joe)]

[center] のようなタグには引き続きプラグインが必要ですが、ご指摘の通りです @Steven

このコンポーネントが作成された当時は、HTML の <div> タグを使用する必要がありました。しかし、現在はテーマやコンポーネント内で [wrap="foo"][/wrap] を使用できるようになりました。

詳細については、こちらをご覧ください。

Generic bbcode wrapper for theme components

I added this feature a while back and realised I didn’t post about it. You can now use a special syntax in markdown to have it cooked and usable in theme components without having to write a plugin. // wrapped in div.d-wrap [wrap=baz foo=bar]Content[/wrap] // wrapped in div.d-wrap [wrap=baz foo=bar] Content [/wrap] // wrapped in div.d-wrap [wrap=baz foo=bar] [/wrap] // this one will be rendered as a span.d-wrap instead of a div.d-wrap a [wrap=baz]Content[/wrap] b The name of the component w…

簡単な例を以下に示します。

[wrap="center"] 
中央揃えのテキスト
[/wrap]

投稿がレンダリングされると、このマークアップが生成されます。

<div class="d-wrap" data-wrap="center">
  <p>中央揃えのテキスト</p>
</div>

これにより、CSS 属性セレクタ を使用して以下のようにターゲットを指定できます。

[data-wrap="center"] {
  text-align: center;
}

これにより、作曲プレビューとレンダリングされた投稿の両方で、以下のような表示になります。

または

[wrap="right"] 
右揃えのテキスト
[/wrap]

これにより、以下のレンダリングされたマークアップが生成されます。

<div class="d-wrap" data-wrap="right">
  <p>右揃えのテキスト</p>
</div>

その後、この CSS を追加します。

[data-wrap="right"] {
  text-align: right;
}

これにより、以下のような結果になります。

現在、このコンポーネントは HTML の align 属性を使用しているため、この変更は 100% 下位互換性があります。

お時間があればお試しください。ご質問がございましたら、PM でお知らせください。

[thwright]

wrap コンポーネントのプルリクエストを提出しました。

https://github.com/iunctis/md-composer-extras/pull/1
https://github.com/iunctis/md-composer-extras/pull/2
https://github.com/iunctis/md-composer-extras/pull/3

[thwright]

float 左のプルリクエストを追加し、float 右のための CSS オプション、取り消し線ボタンを太字、イタリック、下線ボタンの隣に移動、そして基本的なカラムボタンを作成しました。最後のものは、単独のコンポーネントにするか、ポップアップメニューに移動させた方がよいかもしれません。

プルリクエストは取り下げました。さらに修正が必要です。また、上付き文字と下付き文字のボタンを追加したいと考えていますが、カレンダーイベント、slick、tiles を追加すると、モバイルの縦型コンポーザーにボタンが多すぎます。横型コンポーザーであれば問題ないはずですが、すべてのボタンをどちらのメニューからもアクセス可能にする必要がある場合、それらはポップアップ内に移動させるべきです。

Steven さん、この件をどのように扱いたいか、ご意見をお聞かせください。

メインの JS ファイルを 2 つのファイルに分割し、レスポンシブ CSS の作成に取り掛かります。

理想的には、必要に応じてボタンを無効化/非表示にする設定も追加すべきです。

---

編集：上記の変更を実装しました（ただし、要素には CSS 以外で非表示にするオプションがありません）。PR を提出する前に変更をテストするだけです。

[thwright]

その PR はこれで問題ないはずです、@Steven。

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

この PR では、レスポンシブ対応、フロート、カラム、上付き文字、下付き文字を実装しました。カラムの仕組みについては README をご覧ください。

[ondrej]

こんにちは、
なぜこのエラーが表示されるのか分かりません。先日アップロードしたばかりです。私は最新バージョンを使用しているはずですが、少なくともそのように表示されています。
よろしくお願いします。

[Steven]

最近アップグレードを適用しましたが、正常に動作するはずです。デスクトップとモバイルの両方でWebサイトを確認しました。

コンポーネントを削除して再インストールしてみてください。あなたのフォーラムでは何らかの問題が起きているようです。

あるいは、フォーマットツールバープラグインも使用していますか？それによってアイコンが重複する可能性があります。

[ondrej]

OK、ありがとうございます。確認して、おっしゃる通り対応します。お誕生日おめでとうございます

[zuker (Matías)]

一部のアイコンを非表示にすることはできますか？

[Steven]

どのものを非表示にしますか？お手伝いします。

[zuker (Matías)]

ストライク、下付き、上付き ありがとう！

[Steven]

最も簡単な方法は、テーマの [共通] > [CSS] に以下の CSS 行を追加することです。

.d-editor-button-bar .strikethrough_button, .d-editor-button-bar .superscript_button, .d-editor-button-bar .subscript_button {
    display: none;
}