グループウエアにリッチテキストで(といっても、Bold,アンダーライン、文字色、フォントサイズ等の基本的なもののみ)編集できるようなものはないかと探していたところ、Jqueryには様々なものがあるが、どれも、現在使っているものには合わない。
1ページの中で、ポップアップウインドウをjqueryで入力画面を出しているので、ソースの細かい部分で調整しないと、うまく整合性を保てない。
HTML5が、意外と使いやすくなってきていることを知り、使ってみた。
http://blogs.msdn.com/b/osamum/archive/2014/02/14/html5api-contenteditable.aspx
上記のサイトが参考になりました。
contentEditable という属性により、div要素をリッチテキストとして編集できるので、便利である。
いくつか注意点をあげると
①このままでは、スクロールしないので、スクロールの機能をつける方法をネットで調べると
.scr { overflow: scroll; }
として、div要素のclassをscrとしてやればよいことが判明。
参考サイト:http://www.htmq.com/style/overflow.shtml
②Chromeだと問題ないが、IE11では、行間がかなり広がって、表示がうまくいかない。これも、ネットで解決方法を調べた。
.htmlbox p { margin:0; padding:0; } というスタイルシートにして
広がってしまうdiv要素のclassをhtmlboxとするとよかった。
ただ、この方法は応急処置的という感じもする。IE11は、完全にHTML5に対応してないということだろうか?
HTML5は、便利だが、発展途上といったところだろうか。
参考サイト:http://arinogotokuatumarite.blog19.fc2.com/?no=101&sp
0 件のコメント:
コメントを投稿