エントリー

freoにTinyMCE5を導入する

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

TinyMCE5をCDNで設定する

※ファイル構成

freojsadmin.js
 ┃    ┗ tinymcelangsja.js
 ┃               ┗ plugins ━ (プラグインID) ━ ~(略)~
 ┗ templatesinternalsadminheader.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の部分が以下のように表示されます。

    103-1.jpg
【設定の解説】
  • ツールバーに表示されていないボタンは、下段右端のボタンを押すと表示されます。再度ボタンを押すと表示が消えます。
    103-2.jpg
    これらのボタンをあらかじめ表示しておきたい場合は、js/admin.js のTinyMCEの設定部分で、
    toolbar_mode: 'sliding',
    の部分を、
    toolbar_mode: 'wrap',
    に変更(緑字赤字に)します。※参考:TinyMCEの解説
    するとこのような表示になります。
    103-3.jpg
  • 空白行の先頭にカーソルを合わせると、クイック挿入ツールバーが表示されます。
    103-4.jpg
    表示させたくない場合は、js/admin.js のTinyMCEの設定で、
    quickbars_insert_toolbar: 'image media quicktable | hr charmap nonbreaking pagebreak',
    
    の部分を、
    quickbars_insert_toolbar: false,
    
    に変更(緑字赤字に)します。
  • 文章を選択すると、クイック選択ツールバーが表示されます。
    103-5.jpg
    表示させたくない場合は、js/admin.js のTinyMCEの設定で、
    quickbars_selection_toolbar: 'bold underline strikethrough styleselect | quicklink removeformat',
    
    の部分を、
    quickbars_selection_toolbar: false,
    
    に変更(緑字赤字に)します。
  • 画像を選択すると、クイック画像ツールバーが表示されます。
    103-6.jpg
    表示させたくない場合は、js/admin.js のTinyMCEの設定で、
    quickbars_image_toolbar: false,
    
    を追加します。

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

  • こちら からプラグインをダウンロードします。
  • ファイル構成
    netabare
    imgnetabare.svg
    langsen.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に「ネタバレ」ボタンが追加されます。
    103-7.jpg
  4. ネタバレの入力方法はv4のものと同じです。

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

  • こちら からプラグインをダウンロードします。
  • ファイル構成
    ruby
    imgruby.svg
    langsen.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に「ルビ」ボタンが追加されます。
    103-8.jpg
  4. rubyタグの入力方法はv4のものと同じです。

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

  • こちら からプラグインをダウンロードします。
  • ファイル構成
    footnote
    imgfootnote.svg
    langsen.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に「脚注」ボタンが追加されます(以下ではツールメニューも同時に表示)。
    103-9.jpg
  4. 脚注タグの使用方法はこちらに掲載しています。

ページ移動

関連エントリー

コメント

ろき

お世話になっています。
今回もアップデートしてみましたが、コピペできない仕様でした。
過去のフォーラムなんかも覗いてみましたが、なしのつぶてでした。

何とかならないものでしょうか?

  • 2020/09/15 09:34:55

ccc

ろきさんこんにちは。

今回もアップデートしてみましたが、コピペできない仕様でした。

普段からショートカットキーを使用しているので、編集メニューの貼り付けができないとは知りませんでした。

ショートカットキーで対応するしかないような気がします。
ただ、ctrl+V だと書式なども同時にペーストされるので、プレーンテキストとしてペーストしたい場合は shift+ctrl+V で貼り付けてください。

有料のPowerPasteプラグインなら対応しているのかもしれませんね。
https://www.tiny.cloud/docs/plugins/powerpaste/

  • 2020/09/16 22:16:55

コメント登録

  • コメントを入力してください。
  • 一旦登録したコメントは、あとで編集できませんのでご注意下さい。
登録フォーム

基本的には「全体に公開」されますが、内容によっては管理人の方で公開を制限する場合がありますので、その旨ご了承下さい。

ユーティリティ

2024年03月

- - - - - 1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31 - - - - - -

キーワード検索

キーワード検索フォーム

ユーザー

  • cccのアバター

新着画像

ブログパーツ

Twitter

Twilogを見る

Feed