【tinyMCE】【jbimages】tinyMCEのプラグイン"jbimages"を使って、画像をサーバー上にアップロードしたい。
今回は、表題の件について、開拓していきたいと思います。
- 大まかな流れ
- tinyMCEのダウンロード&設置。
- jbimagesのダウンロード&設置。
大まかな流れ
tinyMCE のダウンロード & 設置
tinyMCE v4は、https://www.tiny.cloud/get-tiny/language-packages/
jbimagesのダウンロード&設置
まずは、こちら TinyMCEを設置 | WEBxREAL のサイトを参考に配置しました。
jbimagesは上記サイトにもリンクありましたが、以下GitHubからダウンロード。
GitHub - vikdiesel/justboil.me: Justboil.me — A very simple TinyMCE image upload plugin
↓
↓
なんか出た!『プラグインjbimagesの初期化に失敗しました』
Error: editor.addButton has been removed in tinymce 5x, use editor.ui.registry.addButton or editor.ui.registry.addToggleButton or editor.ui.registry.addSplitButton instead
tinyMCEが新しいバージョンだからかな。
公式ドキュメントにもありました、コレ↓を、HTMLに貼り付けたら、消えました!
Migrating from TinyMCE 4 to TinyMCE 5. | Docs | TinyMCE
<script src="https://cdn.tiny.cloud/1/ここをAPIキーに/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
↓
↓
またなんかエラー出た!
Failed to load plugin: jbimages from url plugins/jbimages/plugin.min.js
Mv @ tinymce.min.js:9
Uv @ tinymce.min.js:9
(anonymous) @ tinymce.min.js:9
(anonymous) @ tinymce.min.js:9
ce @ tinymce.min.js:9
o @ tinymce.min.js:9
(anonymous) @ tinymce.min.js:9
a.onerror @ tinymce.min.js:9:
:
やばばば。。。めっちゃ出てくるんですけど。。
※結局。。。わかりませんでした💦
とりあえず、参考にしたサイト等まとめておきます。今後またトライしてみよう。。
(どのサイトも書いてあることは同じなんですけどね。これマイナーなプラグインなのかな?でもブログシステムとか作るときは必須な気がするんだけど。。)
おそらくの推察ですが、TinyMCE v5バージョンを使っていたからかな?と思います。
- WordPressにも使われているTinyMCEを使用して、Laravel5にリッチエディタを導入してみた。 | メサイア・ワークス
- TinyMCE エディタ上で画像をアップロードしながら貼り付けられる jbimages プラグインを使ってみた - 私と私の猫の他は誰でも隠し事を持っている
- TinyMCEを設置 | WEBxREAL
とりあえずの対処法
公式ドキュメントのImage Pluginのオープンソース?をコピペしたら、別に上記のjbimagesやたらelFinderやたら、要りませんでした。
ただ、そのまま画像情報が入ってしまうので、どうかな。。。というところです。