[JSライブラリ][WYSIWYG] TinyMCEを5→6へアップデート OW-2523

[akagane99]

概要

• TinyMCEを5.x系→6.x系にアップデートしました。
• TinyMCEのimageプラグイン（Connect-CMSで改造）にパッチ（5.x系→6.x系）を当てました。
• TinyMCEの日本語言語JSを5.x系→6.x系に上書きしました。

注意

• TinyMCEのimagetoolsプラグイン（画像の回転等）はTinyMCE 6.0のオープンソース版から削除されたため、使えなくなりました。
  • 参考：Image Tools plugin | TinyMCE Documentation
    https://www.tiny.cloud/docs/tinymce/5/editimage/

修正後画面

例）固定記事＞編集

npmライブラリ コマンド

npm i -D tinymce@6

# ライブラリの最新化
npm update

# app.js, app.cssの最新化
npm run prod

簡易テスト

• github actionsで簡易テストを実施しました。
  • https://github.com/opensource-workshop/connect-cms/actions/runs/14808191497/job/41579566697

レビュー完了希望日

なし

関連Pull requests/Issues

• [JSライブラリ][WYSIWYG] TinyMCEを5の最新版へアップデート OW-2523 #2187
• [JSライブラリ][WYSIWYG] TinyMCEのnpmインストール版に切替 OW-2523 #2185

参考

• 移行
  • Migrating from TinyMCE 5 to TinyMCE 6 | TinyMCE Documentation
    https://www.tiny.cloud/docs/tinymce/6/migration-from-5x/#plugin-loading-format-change
• hr プラグインはcoreに移動
  • How to upgrade to TinyMCE 6 | TinyMCE
    https://www.tiny.cloud/blog/upgrade-to-tinymce-6/
• PR表示OFF
  • Premium upgrade promotion | TinyMCE Documentation
    https://www.tiny.cloud/docs/tinymce/6/editor-premium-upgrade-promotion/
    サンプル

tinymce.init({
  selector: "textarea",  // change this value according to your HTML
  promotion: false
});

• 画像アップロード・ハンドラのtinymce6対応
  • https://www.tiny.cloud/docs/tinymce/6/upload-images/#example-using-images_upload_handler
• laravel mixのresources/js/bootstrap.js 参考設定、「Example src/editor.js」よりコピーして編集
  • https://www.tiny.cloud/docs/tinymce/6/vite-es6-npm/#procedures
• tinymceにConnect-CMS独自設定をセットするのに editor.options を利用
  • https://www.tiny.cloud/docs/tinymce/latest/apis/tinymce.editoroptions/

DB変更の有無

無し

チェックリスト

• (DB変更有りの場合) 移行プログラムに影響がない事を確認しました。https://github.com/opensource-workshop/connect-cms/wiki/Pull-requests-check-list---Migration
• プルリクエストにわかりやすいタイトルとラベルを付けました。https://github.com/opensource-workshop/connect-cms/wiki/Pull-requests-Rule