freoカスタマイズ集

freoの投稿エディタであるTinyMCEがVer5になったので設定方法について解説します。

TinyMCE5をCDNで設定する

※ファイル構成

freo
 ┣ js ┳ admin.js
 ┃    ┗ tinymce ┳ langs ━ ja.js
 ┃               ┗ plugins ━ （プラグインID） ━ ～（略）～
 ┗ templates ━ internals ━ admin ━ header.html

1. TinyMCEのHPにある「Language Packages」のページより「Japanese」の欄にチェックをし、一番下の「DOWNLOAD」をクリックして tinymce_languages.zip をダウンロードし、解凍してできた langs フォルダの中にある ja.js をfreoの js/tinymce/langs/ の中に保存します。
2. js/tinymce/langs/ja.js の175行目あたりにある

   "Page break": "\u30da\u30fc\u30b8\u533a\u5207\u308a",

   の部分を、
   

   "Page break": "\u7d9a\u304d\u3092\u8aad\u3080\u3092\u633f\u5165",

   に変更（緑字の部分を赤字に）し、「ページ区切り」を「続きを読むを挿入」に変更します。

3. templates/admin/header.htm の
   

   	<script type="text/javascript" src="{$freo.core.http_url}tinymce/tinymce.js"></script> 

   の部分を、
   

   	<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/tinymce@5.4.1/tinymce.min.js" integrity="sha256-Xe2aVl8nT+Zy4PhWHSXCVcIvsy1FHrthEH/0urv92O4=" crossorigin="anonymous"></script>

   に変更（緑字を赤字に）します。
4. js/admin.js の //TinyMCE 以降の部分を、
   

   //TinyMCE
   tinymce.init({
   	language: 'ja',
   	language_url : freo_path + 'js/tinymce/langs/ja.js',
   	selector:'#tiny_mce',
   	entity_encoding : 'raw',
   	extended_valid_elements: 'iframe[*]',
   	height: 500,
   	plugins: [
   		'advlist lists link image charmap preview anchor hr nonbreaking searchreplace visualblocks code fullscreen insertdatetime media table contextmenu textcolor pagebreak help'
   	],
   	toolbar: 'bold underline strikethrough | styleselect | bullist numlist outdent indent | code fullscreen | forecolor backcolor removeformat | link unlink image media charmap pagebreak | searchreplace | undo redo help',
   	toolbar_mode: 'sliding',
   	mobile: {
   		menubar: true,
   		plugins: [ 'image link media table charmap hr pagebreak nonbreaking anchor insertdatetime advlist lists checklist help quickbars advtable' ],
   		toolbar: [ 'bullist numlist styleselect' ]
   	},
   	quickbars_insert_toolbar: 'image media quicktable | hr charmap nonbreaking pagebreak',
   	quickbars_selection_toolbar: 'bold underline strikethrough styleselect | quicklink removeformat',
   	style_formats: [
   		{title: '見出し', items: [
   			{title: '見出し4', format: 'h4'},
   			{title: '見出し5', format: 'h5'},
   			{title: '見出し6', format: 'h6'}
   		]},
   		{title: 'ブロック', items: [
   			{title: '段落', format: 'p'},
   			{title: '引用', format: 'blockquote'},
   			{title: '整形済み', format: 'pre'},
   			{title: 'コード', format: 'code'},
   		]},
   		{title: '配置', items: [
   			{title: '左揃え', icon: 'align-left', format: 'alignleft'},
   			{title: '中央揃え', icon: 'align-center', format: 'aligncenter'},
   			{title: '右揃え', icon: 'align-right', format: 'alignright'},
   			{title: '均等揃え', icon: 'align-justify', format: 'alignjustify'}
   		]},
   	],
   	insertdatetime_formats: ['%Y/%m/%d', '%H:%M:%S'],
   	content_css: [
   		freo_path + 'css/common.css',
   	],
   	convert_urls: false
   });
   

   に書き換えます。【2020/08/08修正】

5. すると、エントリー登録等のTinyMCEの部分が以下のように表示されます。

   

【設定の解説】

• ツールバーに表示されていないボタンは、下段右端のボタンを押すと表示されます。再度ボタンを押すと表示が消えます。
  
  これらのボタンをあらかじめ表示しておきたい場合は、js/admin.js のTinyMCEの設定部分で、

  toolbar_mode: 'sliding',

  の部分を、
  

  toolbar_mode: 'wrap',

  に変更（緑字を赤字に）します。※参考：TinyMCEの解説
  するとこのような表示になります。
  
• 空白行の先頭にカーソルを合わせると、クイック挿入ツールバーが表示されます。
  
  表示させたくない場合は、js/admin.js のTinyMCEの設定で、

  quickbars_insert_toolbar: 'image media quicktable | hr charmap nonbreaking pagebreak',
  

  の部分を、
  

  quickbars_insert_toolbar: false,
  

  に変更（緑字を赤字に）します。
• 文章を選択すると、クイック選択ツールバーが表示されます。
  
  表示させたくない場合は、js/admin.js のTinyMCEの設定で、

  quickbars_selection_toolbar: 'bold underline strikethrough styleselect | quicklink removeformat',
  

  の部分を、
  

  quickbars_selection_toolbar: false,
  

  に変更（緑字を赤字に）します。
• 画像を選択すると、クイック画像ツールバーが表示されます。
  
  表示させたくない場合は、js/admin.js のTinyMCEの設定で、
  

  quickbars_image_toolbar: false,
  

  を追加します。

ネタバレ入力プラグインの実装

• こちら からプラグインをダウンロードします。
• ファイル構成

  netabare
   ┣ img ━ netabare.svg
   ┣ langs ┳ en.js
   ┃       ┗ ja.js
   ┣ plugin.js
   ┗ plugin.min.js

1. ダウンロードしたファイルを解凍して netabare フォルダを js/tinymce/plugins/ ディレクトリにアップします。
2. js/admin.js の「//TinyMCE」以降の部分に、
   

   //TinyMCE
   tinymce.init({
   ～（略）～
   	plugins: [
   		'advlist lists link image charmap preview anchor hr nonbreaking searchreplace visualblocks code fullscreen insertdatetime media table contextmenu textcolor pagebreak formatpainter help'
   	],
   	external_plugins:{
   		'netabare': freo_path + 'js/tinymce/plugins/netabare/plugin.min.js',
   	},
   	toolbar: 'bold underline strikethrough | styleselect | bullist numlist outdent indent | code fullscreen | forecolor backcolor removeformat | link unlink image media charmap pagebreak | netabare | searchreplace | undo redo help',
   	toolbar_mode: 'sliding',
   	menu: {
   		tools: { title: 'Tools', items: 'code | netabare' }
   	},
   ～（略）～

   赤字部分を追加します。
3. 導入するとTinyMCEに「ネタバレ」ボタンが追加されます。
   
4. ネタバレの入力方法はv4のものと同じです。

rubyタグ入力プラグインの実装

• こちら からプラグインをダウンロードします。
• ファイル構成

  ruby
   ┣ img ━ ruby.svg
   ┣ langs ┳ en.js
   ┃       ┗ ja.js
   ┣ plugin.js
   ┗ plugin.min.js

1. ダウンロードしたファイルを解凍して ruby フォルダを js/tinymce/plugins/ ディレクトリにアップします。
2. js/admin.js の「//TinyMCE」以降の部分に、
   

   //TinyMCE
   tinymce.init({
   ～（略）～
     plugins: [
   		'advlist lists link image charmap preview anchor hr nonbreaking searchreplace visualblocks code fullscreen insertdatetime media table contextmenu textcolor pagebreak formatpainter help'
   	],
   	external_plugins:{
   		'netabare': freo_path + 'js/tinymce/plugins/netabare/plugin.min.js',
   		'ruby': freo_path + 'js/tinymce/plugins/ruby/plugin.min.js',
   	},
   	toolbar: 'bold underline strikethrough | styleselect | bullist numlist outdent indent | code fullscreen | forecolor backcolor removeformat | link unlink image media charmap pagebreak | netabare ruby | searchreplace | undo redo help',
   	toolbar_mode: 'sliding',
   	menu: {
   		tools: { title: 'Tools', items: 'code | netabare ruby' }
   	},
   ～（略）～

   赤字部分を追加します（上記はネタバレ入力プラグインを追加して更に追加する場合の表記）。
3. 導入するとTinyMCEに「ルビ」ボタンが追加されます。
   
4. rubyタグの入力方法はv4のものと同じです。

脚注タグ入力プラグインの実装

• こちら からプラグインをダウンロードします。
• ファイル構成

  footnote
   ┣ img ━ footnote.svg
   ┣ langs ┳ en.js
   ┃       ┗ ja.js
   ┣ plugin.js
   ┗ plugin.min.js

1. ダウンロードしたファイルを解凍して footnote フォルダを js/tinymce/plugins/ ディレクトリにアップします。
2. js/admin.js の「//TinyMCE」以降の部分に、
   

   //TinyMCE
   tinymce.init({
   ～（略）～
   	plugins: [
   		'advlist lists link image charmap preview anchor hr nonbreaking searchreplace visualblocks code fullscreen insertdatetime media table contextmenu textcolor pagebreak formatpainter help'
   	],
   	external_plugins:{
   		'netabare': freo_path + 'js/tinymce/plugins/netabare/plugin.min.js',
   		'ruby': freo_path + 'js/tinymce/plugins/ruby/plugin.min.js',
   		'footnote': freo_path + 'js/tinymce/plugins/footnote/plugin.min.js',
   	},
   	toolbar: 'bold underline strikethrough | styleselect | bullist numlist outdent indent | code fullscreen | forecolor backcolor removeformat | link unlink image media charmap pagebreak | netabare ruby footnote | searchreplace | undo redo help',
   	toolbar_mode: 'sliding',
   	menu: {
   		tools: { title: 'Tools', items: 'code | netabare ruby footnote' }
   	},
   ～（略）～

   赤字部分を追加します（上記はネタバレ入力プラグイン、rubyタグ入力プラグインを追加して更に追加する場合の表記）。
3. 導入するとTinyMCEに「脚注」ボタンが追加されます（以下ではツールメニューも同時に表示）。
   
4. 脚注タグの使用方法はこちらに掲載しています。