Laravelでリッチテキストエディタで使いやすい画像アップロード機能を実装（TinyMCE）

TinyMCEとは

リッチテキストエディタのJavaScriptライブラリです。

WordPressクラシックエディタで標準で搭載されている点からも、安心して使用できるライブラリかと思います

TinyMCEの無料利用について、CDNと自己ホスティングの違い

公式サイトによると、API経由で提供されるCDNクラウドホスティングは商用利用ができず、月に1000回の回数制限があります。

他にプランはないかと探してみると、セルフホスト（自分のサーバーに直接ダウンロード）の方法では回数制限もなく、商用利用も可能なようです！

TinyMCEの公式サイトのフッターにあるリンクのGet TinyMCE Free（https://www.tiny.cloud/get-tiny/）からセルフホスティングについてのページにいけます

「Download now」ボタンから入手できます

Laravel10とTinyMCEでブログ作成＆画像のアップロードができるか調査した
https://laranote.jp/laravel10-tinymce-blog-image-upload-investigation

画像ファイルのアップロードについて

下記リンクのドキュメントは、TinyMCE（リッチテキストエディター）での画像とファイル処理についての公式ガイドです

「images_upload_handler では、アップロード処理を Promise として実装します」とあります

画像とファイルのオプション
https://www.tiny.cloud/docs/tinymce/latest/file-image-upload

TinyMCE 日本語化

下記リンクより言語ファイル（ja.js）をダウンロード

public/
└── js/
    └── tinymce/
        └── ja/
        └── langs/
            └── ja.js  ← これ！

TinyMCE の初期化で日本語を指定

tinymce.init({
  selector: '#body',
  plugins: 'image',
  toolbar: 'image',
  language: 'ja', // ← 言語コード
  language_url: '/js/tinymce/ja/langs/ja.js', // ← ここで明示的にファイルを指定

  // 必要に応じて画像アップロードなどの設定も続ける
});

Language Packages
https://www.tiny.cloud/get-tiny/language-packages

php artisan storage:link の仕様

Laravel では、storage/app/public に保存されたファイルを Webからアクセスできるようにするために、public/storage にシンボリックリンクを作成します。

※storage 以外にも 柔軟なファイル保存先の指定や公開方法が可能

参考サイト

【検証中】Laravel 10 で TinyMCE を使用する
https://www.shimizuya.free-hit.online/wp/laravel/%E3%80%90%E6%A4%9C%E8%A8%BC%E4%B8%AD%E3%80%91laravel-10-%E3%81%A7-tinymce-%E3%82%92%E4%BD%BF%E7%94%A8%E3%81%99%E3%82%8B/?utm_source=chatgpt.com

Laravel 10 + TinyMCE で画像アップロード
https://zenn.dev/dainaka/articles/867b59bea4d010?utm_source=chatgpt.com

Laravel10とTinyMCEでブログ作成＆画像のアップロードができるか調査した
https://laranote.jp/laravel10-tinymce-blog-image-upload-investigation/?utm_source=chatgpt.com

Laravel とリッチテキストエディタ
https://biz.addisteria.com/category/wisiwyg