エントリー

freoにTinyMCE4を導入する

  • 更新
  • カテゴリーTinyMCE4
【重要】2017/09/03に公開されたfreo1.20.0にTinyMCE4.6.6が同梱されていますので、まだの方はバージョンアップされることをお勧めします。

【2016/06/16 TinyMCEのHPのデザイン変更に伴い修正しました】

freoの投稿エディタであるTinyMCEから新しくVer4がリリースされたので、導入してみました。
TinyMCE4は従来のTinyMCE3.xよりファイル数も少なくなって容量も軽くなり、アイコンボタンも画像からWebフォントに変更され、メニューバーもついたことからタッチパネルでも一応使えるような仕様になりました。
ファイル 79-1.jpg

【追記2014/08/31】

※FirefoxでTiny_MCE4を使うと投稿時に本文が消えてしまう場合、一旦アドオンを無効にしてセーフモードで再起動し、サイド通常モードで再起動すると直るようです。

TinyMCE4をサーバにアップして使用する場合

※変更/追加するファイル構成(赤字が追加するファイル/ディレクトリ)

freojsadmin.jstemplatesinternalsadminheader.htmltinymce ┳ ~(略)~ 
            ┗ langsja.js
  1. TinyMCE4のダウンロードページ のページにある「Download TinyMCE Community」にある「DOWNLOAD」からダウンロードします(メールアドレスを登録せよというポップアップが出ますが無視してもOK)。
  2. 次に同じページの左側メニューにある「Languages Packages」をクリックし、「Japanese」の欄にチェックをし、横の「DOWNLOAD」をクリックして tinymce_languages.zip をダウンロードします。
  3. tinymce_4.x.x.zip を解凍して、tinymce/js/ 内の tinymce/ を取り出します。
  4. tinymce_languages.zip を解凍してできた langs/ の中にある ja.js を3.で取り出した tinymce/langs/ の中に貼り付けます。
  5. 取り出した tinymce/ をfreoのあるサーバーにアップします。
    ※今まで使用していた tiny_mce/ は必要がないので削除しても構いません。
  6. templates/admin/header.html
      <script type="text/javascript" src="{$freo.core.http_url}tiny_mce/tiny_mce.js"></script>

    の部分を、

      <script type="text/javascript" src="{$freo.core.http_url}tinymce/tinymce.min.js"></script>
    に変更(緑字赤字に)します。
  7. js/admin.js//TinyMCE 以降の部分を、
    //TinyMCE4
    tinymce.init({
      language: 'ja',
      selector: "#tiny_mce",
      entity_encoding : "raw",
      extended_valid_elements: "iframe[*]",
      content_css: freo_path + 'css/common.css',
      convert_urls: false,
      plugins: "advlist image link autosave contextmenu fullscreen pagebreak searchreplace table lists charmap code media textcolor",
      menubar: "file edit insert format table tools",
      menu: {
        file: {title: 'File', items: 'newdocument'},
        edit: {title: 'Edit', items: 'undo redo | cut copy paste | selectall searchreplace'}, 
        insert: {title: 'Insert', items: 'link | image media | pagebreak charmap template'}, 
        format: {title: 'Format', items: 'bold underline strikethrough superscript subscript | formats | removeformat'}, 
        table: {title: 'Table', items: 'inserttable | itableprops deletetable cell row column'}, 
        tools: {title: 'Tools', items: 'code fullscreen'} 
      },
      toolbar1: "bold strikethrough | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | styleselect | code fullscreen",
      toolbar2: "forecolor backcolor removeformat | link unlink image media charmap pagebreak | searchreplace | undo redo |",
      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: "alignleft", format: "alignleft"},
          {title: "中央揃え", icon: "aligncenter", format: "aligncenter"},
          {title: "右揃え", icon: "alignright", format: "alignright"},
          {title: "均等揃え", icon: "alignjustify", format: "alignjustify"}
        ]},
        {title: "ネタバレ", items: [
          {title : "ネタバレ", block : "div", classes : "hidearea"},
          {title : "ネタバレ段落", inline : "p" }
        ]},
      ],
    });
    に書き換えます。
    ※ネタバレボタンを使わないならオレンジ色の部分は削除して下さい。

    【2013.9.1追記】TinyMCE4ではelement_formatがデフォルトで"html"になっており、HTMLモードにすると、imgタグの最後が />にならないせいか、エントリーギャラリー表示プラグインで画像が表示されなくなってしまうため、「element_format = "xhtml",」を追加しました。【2013.11.18削除しました】

    【2013.9.30追記】新規で投稿する際、以前の記事の内容が表示されたり、iPadではキーボードが表示されないなどの不具合があるので、メニューバーにファイル ⇒ 新規ドキュメントを追加するため太字部分を追加しました。新規で投稿する場合は、ファイル ⇒ 新規ドキュメント(Ctrl+N)を使用して下さい。

TinyMCE4をサーバにアップせずCDNで使用する場合

※変更/追加するファイル構成(赤字が追加するファイル/ディレクトリ)
【2013.9.30追記】tinymce関連のファイルの保存場所を js/ から js/tinymce/ に変更しました。
言語ファイルとプラグインファイルをそれぞれ別ディレクトリに分けるように変更しました。

freojsadmin.js
 ┃    ┗ tinymcelangsja.js
(┃               ┗ plugins(プラグインID) ━ ~(略)~)
 ┗ templatesinternalsadminheader.html
  1. TinyMCEのHPにある「Languages for TinyMCE 4」のページより「Japanese」の欄にチェックをし、一番下の「DOWNLOAD」をクリックして tinymce_languages.zip をダウンロードし、解凍してできた langs フォルダの中にある ja.js をfreoの js/ の中に tinymce/langs/ を作り、その中にアップします。
  2. templates/admin/header.html
      <script type="text/javascript" src="{$freo.core.http_url}tiny_mce/tiny_mce.js"></script>

    の部分を、

      <script type="text/javascript" src="https://cdn.tinymce.com/4/tinymce.min.js"></script>
    に変更(緑字赤字に)します。
    ※【追記2016/06/16】常に最新版を使用できるようCDNを変更にしました。
  3. js/admin.js//TinyMCE 以降の部分を、
    //TinyMCE4
    tinymce.init({
      language: 'ja',
      language_url : freo_path +  'js/tinymce/langs/ja.js',
      selector: "#tiny_mce",
      entity_encoding : "raw",
      extended_valid_elements: "iframe[*]",
      content_css: freo_path + 'css/common.css',
      convert_urls: false,
      plugins: "advlist image link autosave contextmenu fullscreen pagebreak searchreplace table lists charmap code media textcolor",
      menubar: "file edit insert format table tools",
      menu: {
        file: {title: 'File', items: 'newdocument'},
        edit: {title: 'Edit', items: 'undo redo | cut copy paste | selectall searchreplace'}, 
        insert: {title: 'Insert', items: 'link | image media | pagebreak charmap template'}, 
        format: {title: 'Format', items: 'bold underline strikethrough superscript subscript | formats | removeformat'}, 
        table: {title: 'Table', items: 'inserttable | itableprops deletetable cell row column'}, 
        tools: {title: 'Tools', items: 'code fullscreen'} 
      },
      toolbar1: "bold strikethrough | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | styleselect | code fullscreen",
      toolbar2: "forecolor backcolor removeformat | link unlink image media charmap pagebreak | searchreplace | undo redo |",
      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: "alignleft", format: "alignleft"},
          {title: "中央揃え", icon: "aligncenter", format: "aligncenter"},
          {title: "右揃え", icon: "alignright", format: "alignright"},
          {title: "均等揃え", icon: "alignjustify", format: "alignjustify"}
        ]},
        {title: "ネタバレ", items: [
          {title : "ネタバレ", block : "div", classes : "hidearea"},
          {title : "ネタバレ段落", inline : "p" }
        ]},
      ],
    });

    に書き換えます。
    ※ネタバレボタンを使わないならオレンジ色の部分は削除して下さい。
    【2013.9.1追記】TinyMCE4ではelement_formatがデフォルトで"html"になっており、HTMLモードにすると、imgタグの最後が />にならないせいか、エントリーギャラリー表示プラグインで画像が表示されなくなってしまうため、「element_format = "xhtml",」を追加しました。【2013.11.18削除しました】
    【2013.9.30追記】新規で投稿する際、以前の記事の内容が表示されたり、iPadではキーボードが表示されないなどの不具合があるので、メニューバーにファイル ⇒ 新規ドキュメントを追加するため太字部分を追加しました。新規で投稿する場合は、ファイル ⇒ 新規ドキュメント(Ctrl+N)を使用して下さい。
    【2016.7.17追記】追加プラグインで日本語が読めない原因が js/admin.jslanguage : 'ja', が抜けていることを判明したので追加しました。

    ※今まで使用していた tiny_mce/ は必要がないので削除しても構いません。
    なお、標準以外のプラグインを使う場合は、freoの js/tinymce/plugins/ の中にプラグインをアップして js/admin.jsplugins: の部分の下に、

      external_plugins:{
        "(プラグインID)": freo_path + "js/tinymce/plugins/(プラグインID)/plugin.min.js",
      },
    を追加すると使えるようになるようです。

ページ移動

関連エントリー

コメント

高橋

TinyMCE4を導入するをやってみましたが、どうしてもできません、バージョンはTinyMCE 4.0.10です。
js/admin.jsとtemplates/internals/admin/header.htmlの変更には間違いないと思います。

  • 2013/11/18 15:20:00

ccc

追記
element_format = "xhtml",
と言う行を削除したら使えるようになりました、やはりバージョンのせいでしょうか?

  • 2013/11/18 16:01:00

ccc

element_format = "xhtml",
と言う行を削除したら使えるようになりました

そうですね"xhtml"がデフォルトになっているようなので、その部分は削除しておきます。
ご迷惑をお掛けしまして申し訳ございませんでしたm(__)m

  • 2013/11/18 16:17:00

高橋

で、エントリーイメージー表示プラグインでの表示ができないみたいです。何か対処方法ありますか?
プラグインのほうの対応でしょうか?

  • 2013/11/18 17:27:00

TADA-C

新規で投稿する際の、以前の記事の内容が表示される件ですが、結構やっかいですね。
「ファイル」⇒「新規ドキュメント」をわざわざしないで、最初っから新規ドキュメントになる方法ってありますか?

  • 2013/11/18 17:48:00

ccc

高橋さん

エントリーイメージー表示プラグインでの表示ができないみたいです。何か対処方法ありますか?

個人的に設置しているところでは特に問題はないのですが、どうしてもというのならlibs/freo/plugins/display.entry_gallery.phpの184行目辺りにある
//メディア取得
の部分にある3箇所の

preg_match('/<img[^>]+src="([^"]+)"[^>]+¥/>/'


preg_match('/<img[^>]+src="([^"]+)"[^>]+>/'

にすればよかったと思います(昔試したけどうろ覚えで申し訳ありません)。

TADA-Cさん

最初っから新規ドキュメントになる方法ってありますか?

方法があればもうすでにやってるんですけど(^^ゞ
しかも調べてみるとこれってどうもTinyMCEのバグではないようでして(autosaveプラグインのせいでもありません)...じゃなんなのかそこまでの英語の読解力がないのでよくわかりません(^^ゞ
参考:http://www.tinymce.com/develop/bugtracker_view.php?id=6485
「ファイル」⇒「新規ドキュメント」が面倒なら、admin.jsのtoolbar1に「newdocument」を加入すれば、「新規ドキュメント」のボタンができるので、一段階楽になるかと...m(__)m

  • 2013/11/18 19:57:00

コメント登録

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

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

ユーティリティ

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