リッチエディタの作成

2018年3月19日

みなさんこんにちはタカモリです。

前回でサムネイル一覧表の大まかな作成も終了したので、データベースとブログとの連携という部分については大分成り立ってきたと思う。

しかし!サムネイル一覧表なんていうのは、それだけがあったところで何の役にもたたない。

ただ自分のアップロードした画面が眺めれる、ただそれだけの機能だ。

そんなものはあったところで全く意味がない。つまり何が言いたいかと言うと、その一覧表の画像から、投稿画面に選んだ画像を張り付けれるようなシステムが欲しいのだ。

まぁ欲しい欲しいと言ったところで、どうにもならないので、自分でこのシステムを構築していかなければならない。

そしてこの機能を実現できるのがJavaScriptなのだ。しかし困ったことがある。

このブログを始めて以来、未だJaVascriptを触ったことがないので未だにこの言語については知識がphpよりもはるかに少ない。

ということで、本当に一から勉強する為に、youtube・教科書などをかなり見て参考にしようと思ってはいたが、全くちんぷんかんぷんだ。

 

とは言いながらも、とりあえずわかってきたこともあるので書いていく。

まず、自分がしていた大きな間違いについて。

投稿画面のテキストエディタはブログ更新には不向きである。ということだ。

これのこと。

何故なら、formタグで作った投稿フォームは画像を貼りつけることが調べてみると不可能らしい。

てっきり、方法があると思いこんでいたのでformで作ってしまった。

「じゃぁどうやって作るの?」ということだが、これは同じくHTMLのiframeタグを使用すればいいみたいだ。

iframeとゆうのは、HTML画面の中に更に別のHTMLを表示するときに使われるらしいのだが、正直詳しくはわからない。

そしてこのiframeタグをJavaScriptのDOMで呼び出して、その属性にdesiginmode = onというのを付けてやると、そのフレームの中が編集できるようになるとのことだ。

これをリッチエディタというらしい。

初めは全く意味がわからなかったが、半日かけてようやくなんとなくイメージできるくらいにはなってきた。

ちなみにDOMというのは、簡単に言うとJavascriptでHTMLのタグを指定して、その中身を変更したり、内容を追加できるような機能だ。

まぁ、とりあえず、そんなこんなでできたSrcがこれだ。

まぁ言わなくてもわかるとは思うが、ほぼコピペだ!!

これをブラウザで表示させるとこのようにフレーム内に文字と画像を張り付けれるようになる。

ということで、今回はここまでできたという経過報告だ。

正直document.getElementById();なんていう関数が出てきたときにはもうおしまいかと思った。

一応Srcの内容は理解はしているが、どう応用していけばいいのかほとんどわかっていない。

このフレームも画像は貼りつけることはできるが、削除できなかったりで不便であるうえ、フレームはフォームと違ってサブミットボタンでPOSTできないので、どうやってphpと連携させるかを模索中だ。

ということで、もう少し進歩があればまた投稿していきたいと思う。