refirio.org

TinyMCEは高機能なエディタですが、ファイルをアップロードする機能はありません。つまり本文に画像などを掲載したければ、あらかじめFTPなどでアップロードされたファイルのURLを指定する必要があります。

ですが、公式プラグインのMCImageManager（シェアウェア）を導入すれば、直接画像をアップロードして本文に掲載することができます。

以降はTinyMCEにMCImageManagerを導入するメモです。

準備

あらかじめTinyMCEを導入し、MCImageManagerも購入しておきます。

MCImageManagerの設定と設置

tiny_mce/plugins/ 内に、購入した imagemanager をアップロードします。

tiny_mce/plugins/imagemanager/files/ のパーミッションを 707 に設定します。（files/ 内に元々あるファイルはサンプルなので、削除しても大丈夫です。）

tinymce/tiny_mce/plugins/imagemanager/config.php でファイルのパスを設定します。22行目あたりにある

$mcImageManagerConfig['preview.wwwroot'] = ''; // absolute or relative from this script path, try to leave blank system figures it out.
$mcImageManagerConfig['preview.urlprefix'] = "{proto}://{host}/"; // domain name

この部分を、一例ですが以下のように変更します。（imagemanager への / からのパスと http:// からのパスを、環境に合わせて設定します。）

$mcImageManagerConfig['preview.wwwroot'] = '/var/www/html/tiny_mce/plugins/imagemanager/'; // absolute or relative from this script path, try to leave blank system figures it out.
$mcImageManagerConfig['preview.urlprefix'] = "http://www.example.com/tiny_mce/plugins/imagemanager/"; // domain name

tinymce/tiny_mce/plugins/imagemanager/login_session_auth.php で認証情報を設定します。4行目あたりにある

$username = "demo";
$password = ""; // Change the password to something suitable

この部分に、MCImageManagerにアクセスするためのユーザー名とパスワードを設定します。半角英数字で任意の値を設定します。

TinyMCEの設定

TinyMCEの plugins に imagemanager を追加します。例えば

plugins: 'advimage,advlink,contextmenu,inlinepopups,table',

と設定されている場合、以下のように ,imagemanager を追加します。

plugins: 'advimage,advlink,contextmenu,inlinepopups,table,imagemanager',

日本語化

MCImageManagerの画面は英語で表示されますが、日本語での表示にすることができます。

Languages for "MCImageManager" から「Japanese」をダウンロードします。

ダウンロードした ja.xml を tiny_mce/plugins/imagemanager/language/im/ 内にアップロードします。

tinymce/tiny_mce/plugins/imagemanager/config.php の16行目あたりにある

$mcImageManagerConfig['general.language'] = "en"; // en, sv

この部分を以下のように変更します。（en を ja に変更。）

$mcImageManagerConfig['general.language'] = "ja"; // en, sv

これで、MCImageManagerが日本語で表示されます。

起動方法

MCImageManagerを導入すると、TinyMCEの「画像を挿入/編集」画面の「画像のURL」の隣に「閲覧」アイコンが表示され、それをクリックするとMCImageManagerが起動します。login_session_auth.php で設定したユーザー名とパスワードを入力して認証します。

ThickBoxで作ったiframe内部から、TinyMCEの本文へデータを挿入する仕組みでハマったのでメモ。iframe内で色々操作すると、IEではTinyMCEのカーソル位置がリセットされてしまうことがあります。つまり、意図した位置にデータが挿入されないことがあります。

IEの場合はどうにもならないのかなぁ…と思ったけど、WordPressにあるファイル挿入機能ではカーソル位置を正しく記憶しているので、WordPressではどうやって処理しているのかコードを調べてみた。

大量のコードから該当箇所を突き止めるのに時間がかかったけど、どうやらIEの場合のみ、カーソル位置を別途保持しておく必要があるみたい。

↓ThickBoxオープン時にカーソル位置を記憶。

$(document).ready(function() {
  $('a.thickbox').click(function() {
    if (tinymce.isIE) {
      tinyMCE.get('tiny_mce').focus();
      tinyMCE.activeEditor.windowManager.bookmark = tinyMCE.activeEditor.selection.getBookmark();
    }
  });
});

↓データ挿入時にカーソル位置を復元。

$(document).ready(function() {
  $('a.insert').click(function() {
    if (parent.tinymce.isIE) {
      parent.tinyMCE.activeEditor.focus();
      parent.tinyMCE.activeEditor.selection.moveToBookmark(parent.tinymce.EditorManager.activeEditor.windowManager.bookmark);
    }
    parent.tinyMCE.activeEditor.execCommand('mceInsertContent', false, '挿入したいデータ');
    parent.tb_remove();
  });
});

a.thickbox や a.insert という値は一例なので、実際のアプリケーションに合わせて適当に変更します。

TinyMCEは高機能なエディタですが、ファイル管理機能がありません。（プラグインとして作成されてはいますがシェアウェアです。）

そこで「freo側で管理しているファイルをTinyMCEの本文へ挿入できれば、ファイル管理のプラグインが無くても大丈夫そう」と思って、本文へ画像タグを挿入する方法を調べたのでメモ。

ちなみに「TinyMCEのツールバーにあるアイコンをクリックすると画像を挿入できる」という方法ではなく、「画面上のボタンやリンクをクリックしたときに画像を挿入できる」という方法です。（前者は、emotionsプラグインとか参考にすれば何とかなりそう。）

以下のコードで、本文に画像タグを挿入できました。

tinyMCE.execCommand(
  'mceInsertContent',
  false,
  '<img src="http://www.example.com/test.jpg" alt="テスト" width="200" height="150" />'
);

これをonclickなどのイベントが実行されたときに呼び出すようにすればOK。上の例は画像タグの挿入ですが、テーブルタグでも定型句でも、何でも挿入できます。

色々な事に応用できそうです。

標準機能にはしないと思いますが、現在このブログにはTinyMCEを導入しています。なので、以下のような画面で記事の入力が可能です。

TinyMCEは設定をいじれば色々できそうですが、解りやすい解説サイトが見当たらないので忘れないうちに自分用にメモ。導入方法の解説ページはたくさんあるんだけど…。

現在の設定

tinyMCE.init({
  language: 'ja',
  mode: 'exact',
  elements: 'tiny_mce',
  entities: '38,amp,60,lt,62,gt',
  content_css: '～CSSファイルへのパス～',
  convert_urls: false,
  dialog_type: 'modal',
  plugins: 'advimage,advlink,autosave,contextmenu,fullscreen,inlinepopups,searchreplace,table',
  theme: 'advanced',
  theme_advanced_blockformats: 'p,pre,h4,h5,h6',
  theme_advanced_buttons1: 'bold,italic,strikethrough,|,bullist,numlist,|,table,|,formatselect,|,visualaid,code,fullscreen,help',
  theme_advanced_buttons2: 'forecolor,backcolor,removeformat,|,link,unlink,image,charmap,|,search,replace,|,undo,redo',
  theme_advanced_buttons3: '',
  theme_advanced_toolbar_location: 'top',
  theme_advanced_toolbar_align: 'left',
  theme_advanced_statusbar_location: 'bottom',
  theme_advanced_resizing: true
});

備考

Enterキーを押したら段落…ではなく、ただの改行を入力したい

force_br_newlines: true,
force_p_newlines: false,

… を入力したら … に変換して記録されるなど、余計な変換をしないように

entities: '38,amp,60,lt,62,gt',

URLを http:// から入力したとき、勝手に相対パスに変換されないように

convert_urls: false,