【jQuery】リッチテキストエディタっぽいもの

HTML5のcontentEditableを使うと

リッチテキストエディタっぽい

ものができる。
MSのサイトにサンプルがあった。
でも、このままではちょっと使いにくいし、ガリガリ書かないといけないので・・・
jQueryっぽくし手直しHTMLファイルの
<div class=”rtEditMenu” id=”rtEditMenu1″ >
・・・
</div>
の中に

<select class=”rtEditMenuSelect” id=”{document.execCommandのコマンド}“>

<img class=”rtEditMenuButton” id=”{document.execCommandのコマンド}” src=”img/{ボタンの絵(※要透明色指定)}.png”    />

※透明色指定の画像はMS-Office365のEXCELに画像を挿入し、画像をダブルクリックすると、ツールバーの「色」から「透明色を指定」、画像の背景をクリックすると背景が透明に、Webページ(*.htm)で保存。
を追記するダケで
機能を増やせる様にしてみた。
使える(ハズの)コマンドはコメントで書いておいたので
好きなだけ機能を盛り込む
のも・・・
そう難しく無いだろう。
SUPSUBは、document.execCommand に対応したコマンドが無かった。
※フォントサイズの設定はクセがある様で1~7の範囲外は無効らしい。
※色は表示を工夫しないと文字色と背景色が区別できない。
※本来はcontentEditable=true時にはCtrl+BやCtrl+Iのショートカットが使えるらしいが、ブラウザのショートカットと重なっているので、この辺は調整しないといけない様だ。(要検討。
※メニュー設定のUIが欲しい。
※localstrageでいいから、メニィー設定の永続化が欲しい。インポートとエクスポートも欲しい。
※編集したものをインポートやエクスポートもしたい。
※HTMLファイルを読み込んで、サクっと編集できるようにしたい。
※最後にHLなどのタグが入ってしまうと、末端にカーソルが移動しない
などと考えていると
これで暫く遊べそうだ。
 
 
 
 




コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA