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

機能の改善・追加に関するリクエストはこちらにお願いします。

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

投稿記事by polka on 2018年6月08日(金) 14:54

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

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

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

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

以上、ご報告までに。
polka
 
記事: 173
登録日時: 2013年5月20日(月) 08:15
所在地: 大阪府泉大津市二田町1-20-30-2F

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

投稿記事by kamo on 2018年10月22日(月) 09:27

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

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

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

どうぞ、ご検討の程よろしくお願いいたします。
kamo
 
記事: 124
登録日時: 2009年3月25日(水) 15:44

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

投稿記事by inunosinsi on 2018年10月22日(月) 09:54

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

TinyMCE | The Most Advanced WYSIWYG HTML Editor
SOY CMSの操作に関する質問は下記のページのフォームで受け付けています。
https://saitodev.co/soycms/inquiry

京都でフリーのプログラマをしています。
SOY ShopのプラグインやSOY Appの開発のサポートをしています。
http://saitodev.co/soycms(SOY CMSのマニュアルを作成しています)

株式会社京都農販(SOY Shopのサイト)
株式会社コトブキ園(SOY Shop)
inunosinsi
 
記事: 683
登録日時: 2008年6月12日(木) 20:48

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

投稿記事by polka on 2018年10月22日(月) 10:47

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

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

今、TinyMCEで入ってしまう<p>や<br>に固有のclass名を付与する案を思いつきました。
(そのclass付与されたタグをスタイルシートやjQueryで操作)
試してみてうまくいくようならご紹介したいと思います。
polka
 
記事: 173
登録日時: 2013年5月20日(月) 08:15
所在地: 大阪府泉大津市二田町1-20-30-2F

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

投稿記事by kamo on 2018年10月23日(火) 18:37

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で改行、行間調整で対応することになりますが・・・。
kamo
 
記事: 124
登録日時: 2009年3月25日(水) 15:44

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

投稿記事by polka on 2018年10月27日(土) 22:02

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>

指定する要素は他にあると思いますが、とりあえずこれだけ指定しておけば大丈夫ではないかな? と思います。
(他にあるようでしたらご教示いただけると有りがたいです)
polka
 
記事: 173
登録日時: 2013年5月20日(月) 08:15
所在地: 大阪府泉大津市二田町1-20-30-2F


Return to 機能の改善・追加リクエスト

オンラインデータ

このフォーラムを閲覧中のユーザー: なし & ゲスト[2人]