創作サイト向けコンテンツ管理システム freo（フレオ）

ページ・エントリー登録時のタグ挿入について

亜乃 (2016/04/30 14:56)

設置URL ： http://freo.jp/

度々スペースをお借りします。

表題の通り、ページとエントリーの登録をする際、PCからだと自動でタグを挿入できると思いますが、そのタグを増やしたいです。
具体的には、下線、左・中央・右寄せ、h2、h3、divなど。

それから、リンクタグを挿入するとき、タイトルやクラス要素などを追加できますが、これらを段落や見出しタグにも利用することはできないのでしょうか？
毎回htmlソース編集で直接入力しているのですが、ソース内はほとんど改行がされていないので、とても編集がしづらいです。

自分で弄ろうにも、adminファイルを開いてタグ挿入の記述が見つからず、どうすることもできません……。
追加するのは難しいのでしょうか？

• 編集

ccc (2016/04/30 16:03)

URL ： http://cccabinet.jpn.org/

表題の通り、ページとエントリーの登録をする際、PCからだと自動でタグを挿入できると思いますが、そのタグを増やしたいです。

freoには投稿用のWYSIWYGエディタとしてTinyMCEが使われています。
TinyMCEの設定は、js/admin.jsの「//TinyMCE」の欄にあります。

具体的には、下線、左・中央・右寄せ、h2、h3、divなど。

下線、左・中央・右寄せは、js/admin.jsの130～132行目あたりのtheme_advanced_buttons1：～theme_advanced_buttons3：の部分に
underline：下線
justifyleft：左揃え
justifycenter：中央揃え
justifyright：右揃え
を追加して下さい。
※参考：freoに付属しているTinyMceのボタンのカスタマイズ
http://cccabinet.jpn.org/customize.cgi?no=38

見出しのh2、h3は、テンプレートで使用するので、記事本文ではh4～h6を使うように設定されています。
どうしてもh2、h3を使うのなら、js/admin.jsの129行目の

theme_advanced_blockformats: 'p,blockquote,pre,h4,h5,h6',

の部分にh2やh3を追加して下さい。

それから、リンクタグを挿入するとき、タイトルやクラス要素などを追加できますが、これらを段落や見出しタグにも利用することはできないのでしょうか？

段落や見出しタグに追加するクラス要素が決まっているのなら、js/admin.jsの130行目あたりの

theme_advanced_buttons1: 'bold,strikethrough,|,bullist,numlist,|,table,|,formatselect,|,visualaid,visualblocks,code,fullscreen,help',

を

theme_advanced_buttons1: 'bold,strikethrough,|,bullist,numlist,|,table,|,formatselect,styleselect,|,visualaid,visualblocks,code,fullscreen,help',

にし、（styleselect,を追加します）
その上の行に（例：<div class="hoge"></div>を入れたい場合）

style_formats : [
　　　　　　　　{title : 'クラス名', block : 'div', classes : 'hoge' }
　　　],

を追加します。
すると、段落ボックスの隣にスタイルボックスができるので、使用するときはそこを使います。
※参考：freoのTinyMCEにネタバレボタンを追加する方法
http://cccabinet.jpn.org/customize.cgi?no=52

あと色々カスタマイズの方法があるので、freoまとめwikiの投稿エディタ（TinyMCE等）のカスタマイズも参考にしてみてください。
http://freo.wiki.fc2.com/wiki/%E6%8A%95%E7%A8%BF%E3%82%A8%E3%83%87%E3%82%A3%E3%82%BF%EF%BC%88TinyMCE%E7%AD%89%EF%BC%89%E3%81%AE%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%9E%E3%82%A4%E3%82%BA

• 編集

亜乃 (2016/04/30 20:52)

お答えありがとうございます。要素の追加などができました！

もうひとつ、設定できないことが出てきたのですが、
>||theme_advanced_blockformats: 'p,blockquote,pre,h4,h5,h6',||<
の部分に、span要素をdiv要素を追加して
>||theme_advanced_blockformats: 'p,span,div,blockquote,pre,h4,h5,h6',||<
と記述したところ、span部分の項目名が空白で挿入することもできません。
（divについては『div要素』と項目名が出て、挿入もできます）

これは別の部分も設定を変えなければいけないのでしょうか？

• 編集

ccc (2016/04/30 23:03)

URL ： http://cccabinet.jpn.org/

>||theme_advanced_blockformats: 'p,span,div,blockquote,pre,h4,h5,h6',||<
と記述したところ、span部分の項目名が空白で挿入することもできません。
（divについては『div要素』と項目名が出て、挿入もできます）

spanはblock要素じゃないのでこの方法では設定できません。
※参考：TinyMCEのドキュメント（英語）
http://archive.tinymce.com/wiki.php/Configuration3x:theme_advanced_blockformats

spanを挿入する場合はdivのクラスと同様にstyle_formatsで設定することができます。

style_formats : [
　　　　　　　　 {title : '赤文字', inline : 'span', styles : {color : '#ff0000'}},
　　　　　　　　 {title : 'ホゲホゲ', inline : 'span', classes : 'hogehoge'},
　　　],

※参考：TinyMCEのドキュメント（英語）
http://archive.tinymce.com/wiki.php/Configuration3x:style_formats

• 編集

亜乃 (2016/05/01 00:35)

spanはblock要素ではないため指定ができなかったのですね。勉強になりました。ありがとうございます！
無事spanにclassを指定して挿入ができました。これで更新がぐっと楽になります。ご丁寧にありがとうございました！

• 編集