カテゴリー詳細表示プラグインのエディタに関して

[polka]

いつもありがとうございます。

CMSのカテゴリー詳細表示プラグインのエディタにおいて、
改段落（<p></p>）として一行アケて、その下にテキストを追加すると
意図しない改行（<br />）が追加されて、見た目は二行アキになってしまいます。

▽このようになります。
<p></p><br />
<p></p>

HTMLで<br />を取り除いて入力しても、
また余計な<br />が追加されます。

以上、ご報告までに。

[kamo]

kamoです。
私もこの現象でカテゴリーページに文章を追加しようとして
苦戦しています。

エディタで入力した部分は
<div>・・・・・</div>
で囲まれてその中のHTMLタグが行ごとに<br />が最後に付与され
ソースコード側のHTMLで<br />を取り除いて入力しても、
公開ページでは余計な<br />が追加されます。

リストを<li></li>で横並びにしたいと思っても余計な<br />が入るため
うまくレイアウトが機能しません。
しかたなく<li></li>はやめてソースコード側で<span>で記載して対応していますが
<h2>タグなどでは大きく行間が空いてしまうので
なんとか改善を頂けると助かります。

どうぞ、ご検討の程よろしくお願いいたします。

[inunosinsi]

エディタの個所はTinyMCEというオープンソースをそのまま利用しているものでして、
私の方でHTMLの出力の修正を行うことは難しいです。

TinyMCE | The Most Advanced WYSIWYG HTML Editor

[polka]

とあるブログで紹介されていますが、
https://www.oikawa-sekkei.com/web/desig ... nyMCE.html
TinyMCEをカスタマイズすれば、余計な<p>を入れずにすみそうです。

が、上記を実行すると、全てのエディタに影響を与えるでしょうし、
エディタ切り替えプラグインのように、機能のON/OFF切り替えができないと、
かえって使いにくくなるのかもしれない、と思ったり。

今、TinyMCEで入ってしまう<p>や<br>に固有のclass名を付与する案を思いつきました。
（そのclass付与されたタグをスタイルシートやjQueryで操作）
試してみてうまくいくようならご紹介したいと思います。

[kamo]

kamoです。

polka 様の投稿をヒントにCSSで対応を試みました。
以下のようにcssでbrを無効化したら、行間の不要な間隔と
liの横並びも表現できるようになりました。
ヒントありがとうございました。
当面、この方法で対応することにします。

----CSSでやったことを参考に記載しておきます------------
<div b_block:id="category_description"></div>
としていた部分の<div>にclassを付け
例：<div class="label-info" b_block:id="category_description"></div>
そのclass内のbrはdisplay:noneとCSSで設定
<style>
.label-info br{ display:none;}
.label-info li {display:inline-block;}
または
.label-info ul {
display: flex;
flex-wrap: wrap;
-webkit-box-pack: justify;
justify-content: center;
}
.label-info li a{display:block;}
</style>
※今回はliを横並びにしたかったのでliのスタイルも追加。

この方法で、</h2>や</p><ul></ul></li>など、タグの後ろに勝手に付与される
余計なbrをブラウザ表示では実質無効化できました。
ただしこれによって意図的に挿入したbrの行内改行も機能しませんので、
そこはbrでなくpで改行、行間調整で対応することになりますが・・・。

[polka]

kamo様

サンプルありがとうございます。
CSSで指定する方がレイアウトを操作しやすいでしょうね。

一応、他の方法としてjQueryのサンプルを挙げたいと思います。

jQueryの基本ライブラリを読み込んだ後に次のように記述します。

<script>
$(function(){
$("#hoge").ready(function(){
// 兄弟要素（次に並んで記述されてしまう要素）としての<br />を削除
$("section,aside,div,p,ol,ul,li,table,caption,thead,tfoot,tbody,tr,th,td,blockquote",this).next("br").remove();
// 子要素（内側にはいりこんで記述されてしまう要素）としての<br />を削除
$("ol,ul,table,thead,tfoot,tbody,tr",this).children("br").remove();
});
});
</script>

<div id="hoge">
<!-- b_block:id="category_description" /-->
</div>

指定する要素は他にあると思いますが、とりあえずこれだけ指定しておけば大丈夫ではないかな？　と思います。
（他にあるようでしたらご教示いただけると有りがたいです）