よしまさのウェブサイト

TinyMCEで画像をアップロードする

ブログカテゴリー
システムやプログラムのメモ・雑感
投稿日時

いつもリッチテキストエディターはCKEditorを使っていて、画像アップロードは無料のKCFinderを使っていた。
が、今回は気まぐれでTinyMCEを使ってみた。
ここに深い理由はない。

で、CKEditorでもそうなんだけど、大体の人にとって最大の問題になるのは画像のアップロードではなかろうか?
CKEditorにはCKFinderというプラグインがあるけど、こいつは有料なのでダメ。
同じくTinyMCEにもMoxieManagerなるものがあるらしいんだが、こっちは$10/月という恐ろしさ。
でも、TinyMCEってマニュアルを読んでると標準pluginだけで画像アップロードができそう。
しかし、どこにもTinyMCEの標準機能で画像アップロード機能を作ったって話がない(英語でも、日本語でも)。

というわけで、作ってみましたよ、と。
ここまで前置き。

まぁ、細かいことは言わないから、ソースだけ置いておく。
Laravel5.5環境内で開発したので、Laravel専用関数がいくつか入ってるけど、そこら辺は適宜なおしてください。
多分、Request $requestとpublic_path()、throwあたりを直せばLaravelじゃなくても動くでしょう。

1. htmlファイル

2. PostAcceptor.php

$accepted_origins = array("http://localhost", "http://192.168.1.1", 'http://example.com'); // http://example.comを自サイトのURLに書き換え

$imageFolder = $_POST['path'];

$file = head($_FILES);
if (is_uploaded_file($file[' tmp_name '])){
    if (isset($_SERVER['HTTP_ORIGIN'])) {
        if (in_array($_SERVER['HTTP_ORIGIN'], $accepted_origins)) {
            header('Access-Control-Allow-Origin: ' . $_SERVER['HTTP_ORIGIN']);
        } else {
            header("HTTP/1.0 403 Origin Denied");
            return;
        }
    }

    if (preg_match("/([^wsd-_~,;:[]().])|([.]{2,})/", $file['name'])) {
        header("HTTP/1.0 500 Invalid file name.");
        return;
    }

    if (preg_match('/^image/.+$/', $file [‘type’] ) === 0)
    {
        header("HTTP/1.0 500 Invalid file type.");
        return;
    }

    $filetowrite = $_SERVER[' DOCUMENT_ROOT '].$imageFolder.$file['name'];
    move_uploaded_file($file[' tmp_name '], $filetowrite);

    echo json_encode(array('location' => $imageFolder.$file['name']));
} else {
    header("HTTP/1.0 500 Server Error");
    return
}
?>

あとは、1. で保存した画像のアップロード先になるpathディレクトリに書き込みパーミッションを与えればOK。
開発はLaravelで行ったので、上記のものはそれを書き直したものだから間違ってるところはあるかもしれない。
まぁそれは適宜修正してください。