[s2If current_user_can(access_s2member_level1)]

PROPERは表示と編集画面が一体化したWYSIWYGエディタ。

[/s2If]

PROPERはJavaScript/jQuery製のオープンソース・ソフトウェア。ブログやCMSなどのテキストを中心としたWebサイトでユーザ画面で確認した時にはじめてミスに気付くことがある。そして慌てて管理画面に入ってコンテンツを修正した、なんて経験はないだろうか。

Screen-shot 550.png

その場でコンテンツ編集を行うエディタ

そのコンテンツ修正もテキストエリアで見ると実際の見た目が分かりづらいし、WYSIWYGなエディタを使っても実際の内容とは異なって表示されてしまう。そんな問題を解決してくれるエディタがPROPERだ。

PROPERを使ってWebサイトを表示したとしても、見た目は普通のWebサイトだ。しかしコンテンツをクリックするとその場に枠が表示され、さらにツールバーが出てくる。リストやインデント、太字/イタリック、リンクやコードの埋め込みをサポートする簡易的なツールバーだ。

Screen-shot 551.png

右側に編集結果のHTMLが表示されている

そしてその場でコンテンツの編集ができる。変更を完了してフォーカスを外せばまた、通常のコンテンツとして表示されるので後は内容をサーバ側で受け取れば良い。テキストをその場で編集可能にしつつ、見た目は維持するというユニークなソフトウェアだ。

Screen-shot 552.png

表示モード。編集時と変わらない

MOONGIFTはこう見る

WYSIWYGとは見たままに作成、編集できるという意味だが、それでもWebサイト全体とは一定の距離がある存在だった。だがPROPERはWebサイトの中に埋め込まれていると言っていい。JavaScriptで編集可能にするコンテンツのIDを指定するだけというのも手軽だ。

jQueryライブラリなのでPROPERのツールバー部分だけを変更するというのはさほど難しくないだろう。それによって独自のタグを追加することも容易にできそうだ。利用場面は多いと思われるので覚えておきたい。

PROPER™ - Semantic Richtext Editor

michael/proper - GitHub