先日の宣言通り、WYSIWIGエディタの開発に取り掛かります。
すでに公開されているツールは先日紹介したとおりなので、それらも大いに参考にできるハズです。
そんでもって、このツールは仕事で利用することを目的にしているので、半分は仕事、半分は興味本位の開発で、
休日返上して作っているので、個人開発のライブラリとして開発して、それを仕事で流用してしまおうという、
いつものユゲ式仕事スタイルで作業したいと思います。
こんなことしているから、365日ずっと仕事してるんだろうな・・・
WYSIWIGの基本は、"designMode"
そもそも、WYSIWIGっていうモードがHTMLにあるわけではなく、designMode（デザインモード）というのがHTMLの属性には存在します。
これを"ON"にすることで、要素の中が書き込み可能な状態になります。
※デモとして下記のエリアの中に書き込めます。
iframeの内部コンテンツに対して、下記のようにdesignModeプロパティを"ON"にセットするだけで、書き込みが可能になる。
<iframe></iframe>
# script
document.querySelector("iframe").contentDocument.designMode="on"
単なるテキストエリアとは違って、画像のコピペもできるし、ホームページのスタイルなどもそのまま貼り付けることができる。
designModeの深掘り
参考 :
MDN : Document: designMode プロパティ
想定されているインターネットブラウザはほぼ対応しているので、対象ブラウザなどに気を使うことはないですね。
そして、この機能はiframeタグ限定の機能であるという事がどういうことかというと、
既存のページのスタイルシートやjavascriptなどに影響を及さずに、仮想のエディタを作ることに適しているという事がわかります。
通常iframeは、urlをセットして、外部のHTMLを読み込む機能ですが、このdesignModeは、独自のページを作ることに適しているので、
世の中のブラウザツールのエディタ系は、この機能を採用しているモノが多いということにも気がつくようになります。
ここから先の開発の話
さて、WYSIWIGのエディタベースの話は、これでいいとして、実際にこれを使ってどうやってWYSIWIGエディタを作るのかというと、
内部に書き込まれた文字列（DOM要素）に対して、任意のタグを追加したり、装飾を変える処理をしたり、画像をサーバにアップロードしてそれをiframe内に配置するという機能を盛り込むのが、エディタとしての目的になります。
さらに、そのエディタ内のHTMLソースを最終的には出力して、システムに受け渡すことで、それを表示するだけで簡単にホームページが作れるということもできます。
最近のWebページ制作で当たり前のようにオーダーされる、レスポンシブデザインなども、セットできるような仕様にすると、他に無いほぼクソ便利なエディタになりますからね。
また、カルーセル処理や、特殊なスタイルシート、JS処理なども盛り込むと、唯一無二のメチャンコ便利なNO-CODEエディタができあがるはずですが、
夢はそこまでにしておいて、とりあえず、必要最低限の挙動ができるようにコツコツと仕上げていきましょう。
あとがき
今回は、WYSIWIGのはじめの一歩ですが、この先高い壁がたくさん待ち受けています。
単純であろう「文字を太字にする」程度のことも、かなり難易度が高い操作になることは容易に想定できますし、
画像登録なんて、サーバーのデータ保存をするので、サーバー環境や、CGIにも依存する処理をセットしないといけません。
そもそもの、ベーススタイルシートの適用やら、それらをハックする仕様はまだ考えてもいませんが、この先に必ず襲いかかってくるハードルになります。
でも、ひとつずつ中ボスを倒していくことで、最終的なラスボスに辿り着く事ができるハズなので、いつものように、ちょっとずつ開発を進めていきたいと思います。
0 件のコメント:
コメントを投稿