ガレコレ
［トップページ］
News,blog & history 
【HTML5&CSS3&JavaScript】
【Mozilla Firefox, Google Chrome, Safari, Opera】
・ほぼ同じように、ご利用いただけます。
・CSSに完全対応。
【Microsoft Edge】
・CSSに未対応の部分があります。
【IE11】
・CSSに未対応の部分があります。
・[enter]では、<p></p>段落改行になります。
・[shift]+[enter]で、<br>改行になります。
・Charactorsの文字挿入機能は、ご利用いただけません。
P.S. Network Communication Note『子猫の手 Ver.3（三毛）』およびその他のシステムに、このエディタ機能を付加します。お楽しみに。
P.S.2 改行タグを<br>に統一したのですが、左寄せ、中央揃え、右寄せした行で改行すると、<br>だけが挿入されるのではなく、新たに<div></div>囲いが発生して、一行余分に改行してしまうバグを確認しました。
insertBrOnReturnがサポートされているFirefoxでは、上手に<br>だけ挿入されています。いろいろ検討しましたが、<br>を挿入した時点で、自動的に<div></div>囲いが発生することが分かり、どうしようもありません。今回は、改行を<br>で統一することは諦めて、insertBrOnReturnがサポートされるのを待つことにします。
P.S.2-2 dispatchEvent()を使って、[enter]を[shift]+[enter]に出来るようでしたが、上手くいきません。きっと、document.createEvent("Event")で記述のあった当時は機能したのでしょう。
--
(1) 仮のイベントオブジェクトを作成します。
$event = document.createEvent("KeyboardEvent");
(2) パラメーターを設定します。
$event.initKeyboardEvent("keypress",true,true,・・・);
このメソッドは不確定要素ということで、各ブラウザごとに仕様が異なっていました。
この部分を研究しましたが、どうしてもkeyCodeに相当するパラメーターを探し当てれません。
なお、個別では設定できませんでした。おそらく、read onlyですね。
×$event.keyCode = 13;
×$event.shiftKey = true;
(3) 現在のイベントに上書きします。
document.dispatchEvent($event);
この戻り値がtrueなので、上書きは有効なのでしょう。
--
丸一日、費やしました。あと一息なのですが、他の仕事に取り掛からないいけないので、ここまでです。残念。
・ほぼ同じように、ご利用いただけます。
・CSSに完全対応。
【Microsoft Edge】
・CSSに未対応の部分があります。
【IE11】
・CSSに未対応の部分があります。
・[enter]では、<p></p>段落改行になります。
・[shift]+[enter]で、<br>改行になります。
・Charactorsの文字挿入機能は、ご利用いただけません。
P.S. Network Communication Note『子猫の手 Ver.3（三毛）』およびその他のシステムに、このエディタ機能を付加します。お楽しみに。
P.S.2 改行タグを<br>に統一したのですが、左寄せ、中央揃え、右寄せした行で改行すると、<br>だけが挿入されるのではなく、新たに<div></div>囲いが発生して、一行余分に改行してしまうバグを確認しました。
insertBrOnReturnがサポートされているFirefoxでは、上手に<br>だけ挿入されています。いろいろ検討しましたが、<br>を挿入した時点で、自動的に<div></div>囲いが発生することが分かり、どうしようもありません。今回は、改行を<br>で統一することは諦めて、insertBrOnReturnがサポートされるのを待つことにします。
P.S.2-2 dispatchEvent()を使って、[enter]を[shift]+[enter]に出来るようでしたが、上手くいきません。きっと、document.createEvent("Event")で記述のあった当時は機能したのでしょう。
--
(1) 仮のイベントオブジェクトを作成します。
$event = document.createEvent("KeyboardEvent");
(2) パラメーターを設定します。
$event.initKeyboardEvent("keypress",true,true,・・・);
このメソッドは不確定要素ということで、各ブラウザごとに仕様が異なっていました。
この部分を研究しましたが、どうしてもkeyCodeに相当するパラメーターを探し当てれません。
なお、個別では設定できませんでした。おそらく、read onlyですね。
×$event.keyCode = 13;
×$event.shiftKey = true;
(3) 現在のイベントに上書きします。
document.dispatchEvent($event);
この戻り値がtrueなので、上書きは有効なのでしょう。
--
丸一日、費やしました。あと一息なのですが、他の仕事に取り掛からないいけないので、ここまでです。残念。
タグ属性contentEditable="true"を記述すると、そのタグに挟まれた部分が、編集できるようになる。
細かいことであるが、改行で[enter]を打ったら、<div></div>になるところを、<br>にしたい。
将来的には、execCommand("insertBrOnReturn")でできるようになるのだろうが、現在対応しているブラウザはFirefoxのみである。
キーボードを検知する方法、および<br>を挿入する方法は分かっていたが、[enter]の元々の動作をキャンセルする方法を知らなかった。
event.returnValue = false;で簡単にキャンセルできた。対応しているブラウザは、丁度うまい具合に、Firefoxのみ対応していないが、IE11を含む主要ブラウザで対応している。
-- 抜粋 --
<head>
<script>
window.onload = _setup;
function _setup(){
document.getElementById("id_text").addEventListener("keypress",_break);
}
function _break(){
if(event.keyCode===13){
document.execCommand("insertHTML",false,"<br>");
event.returnValue = false;
}
}
</script>
</head>
<body>
<div id="id_text" contentEditable="true">Edit area</div>
</body>
--
[enter]でも、[shift]+[enter]でも、<br>が記述される。
細かいことであるが、改行で[enter]を打ったら、<div></div>になるところを、<br>にしたい。
将来的には、execCommand("insertBrOnReturn")でできるようになるのだろうが、現在対応しているブラウザはFirefoxのみである。
キーボードを検知する方法、および<br>を挿入する方法は分かっていたが、[enter]の元々の動作をキャンセルする方法を知らなかった。
event.returnValue = false;で簡単にキャンセルできた。対応しているブラウザは、丁度うまい具合に、Firefoxのみ対応していないが、IE11を含む主要ブラウザで対応している。
-- 抜粋 --
<head>
<script>
window.onload = _setup;
function _setup(){
document.getElementById("id_text").addEventListener("keypress",_break);
}
function _break(){
if(event.keyCode===13){
document.execCommand("insertHTML",false,"<br>");
event.returnValue = false;
}
}
</script>
</head>
<body>
<div id="id_text" contentEditable="true">Edit area</div>
</body>
--
[enter]でも、[shift]+[enter]でも、<br>が記述される。
execCommand()でサポートされているコマンド名をdocument.queryCommandSupported("コマンド名")で調べることができます。
Firefoxは、paste以外のすべてのコマンド名が利用できます。そのpasteもuser.jsと設定ファイルで有効にできますが、その他のブラウザの対応がまちまちなので使わない方が良いでしょう。そもそも、パソコンではショートカットキー[ctrl]+[v]で貼り付けが機能します。
IE11のみ、insertHTMLとinsertTextが利用できません。古い方法で同様の機能が作れますが、致命的ですね。IEは古いブラウザなので、切り捨てます。後継のEdgeの進化を見守りましょう。
Edgeは、styleWithCSSが利用できません。HTML5で排除されたレガシータグで記述される部分があります。Edge自体お勧めできませんが、ほとんどのブラウザでレガシータグの表示をサポートしていますので、今のところは問題ありません。
insertBrOnReturnは、Firefoxのみサポートされています。<div></div>より<br>に統一できた方が、プログラミング的には有難いですね。
removeFormatは、すべてのブラウザでサポートされています。選択した部分のみ、修飾が解除されます。
--
コマンド名
Firefox,Chrome,Safari,Opera,Edge,IE11
1. backColor
○,○,○,○,○,○
2. bold
○,○,○,○,○,○
3. contentReadOnly
○,×,×,×,×,×
4. copy
○,○,○,○,○,○
5. createLink
○,○,○,○,○,○
6. cut
○,○,○,○,○,○
7. decreaseFontSize
○,×,×,×,×,×
8. delete
○,○,○,○,○,○
9. enableInlineTableEditing
○,×,×,×,×,×
10. enableObjectResizing
○,×,×,×,×,×
11. fontName
○,○,○,○,○,○
12. fontSize
○,○,○,○,○,○
13. foreColor
○,○,○,○,○,○
14. formatBlock
○,○,○,○,○,○
15. forwardDelete
○,○,○,○,○,×
16. heading
○,×,×,×,×,×
17. hiliteColor
○,○,○,○,○,○
18. increaseFontSize
○,×,×,×,×,×
19. indent
○,○,○,○,○,○
20. insertBrOnReturn
○,×,×,×,×,×
21. insertHorizontalRule
○,○,○,○,○,○
22. insertHTML
○,○,○,○,○,×
23. insertImage
○,○,○,○,○,○
24. insertOrderedList
○,○,○,○,○,○
25. insertUnorderedList
○,○,○,○,○,○
26. insertParagraph
○,○,○,○,○,○
27. insertText
○,○,○,○,○,×
28. italic
○,○,○,○,○,○
29. justifyCenter
○,○,○,○,○,○
30. justifyFull
○,○,○,○,○,○
31. justifyLeft
○,○,○,○,○,○
32. justifyRight
○,○,○,○,○,○
33. outdent
○,○,○,○,○,○
34. paste
×,○,×,○,×,○
35. redo
○,○,○,○,○,○
36. removeFormat
○,○,○,○,○,○
37. selectAll
○,○,○,○,○,○
38. strikeThrough
○,○,○,○,○,○
39. subscript
○,○,○,○,○,○
40. superscript
○,○,○,○,○,○
41. underline
○,○,○,○,○,○
42. undo
○,○,○,○,○,○
43. unlink
○,○,○,○,○,○
44. useCSS
○,○,○,○,×,×
45. styleWithCSS
○,○,○,○,×,×
--
P.S. Operaの検証を追加しました。
Firefoxは、paste以外のすべてのコマンド名が利用できます。そのpasteもuser.jsと設定ファイルで有効にできますが、その他のブラウザの対応がまちまちなので使わない方が良いでしょう。そもそも、パソコンではショートカットキー[ctrl]+[v]で貼り付けが機能します。
IE11のみ、insertHTMLとinsertTextが利用できません。古い方法で同様の機能が作れますが、致命的ですね。IEは古いブラウザなので、切り捨てます。後継のEdgeの進化を見守りましょう。
Edgeは、styleWithCSSが利用できません。HTML5で排除されたレガシータグで記述される部分があります。Edge自体お勧めできませんが、ほとんどのブラウザでレガシータグの表示をサポートしていますので、今のところは問題ありません。
insertBrOnReturnは、Firefoxのみサポートされています。<div></div>より<br>に統一できた方が、プログラミング的には有難いですね。
removeFormatは、すべてのブラウザでサポートされています。選択した部分のみ、修飾が解除されます。
--
コマンド名
Firefox,Chrome,Safari,Opera,Edge,IE11
1. backColor
○,○,○,○,○,○
2. bold
○,○,○,○,○,○
3. contentReadOnly
○,×,×,×,×,×
4. copy
○,○,○,○,○,○
5. createLink
○,○,○,○,○,○
6. cut
○,○,○,○,○,○
7. decreaseFontSize
○,×,×,×,×,×
8. delete
○,○,○,○,○,○
9. enableInlineTableEditing
○,×,×,×,×,×
10. enableObjectResizing
○,×,×,×,×,×
11. fontName
○,○,○,○,○,○
12. fontSize
○,○,○,○,○,○
13. foreColor
○,○,○,○,○,○
14. formatBlock
○,○,○,○,○,○
15. forwardDelete
○,○,○,○,○,×
16. heading
○,×,×,×,×,×
17. hiliteColor
○,○,○,○,○,○
18. increaseFontSize
○,×,×,×,×,×
19. indent
○,○,○,○,○,○
20. insertBrOnReturn
○,×,×,×,×,×
21. insertHorizontalRule
○,○,○,○,○,○
22. insertHTML
○,○,○,○,○,×
23. insertImage
○,○,○,○,○,○
24. insertOrderedList
○,○,○,○,○,○
25. insertUnorderedList
○,○,○,○,○,○
26. insertParagraph
○,○,○,○,○,○
27. insertText
○,○,○,○,○,×
28. italic
○,○,○,○,○,○
29. justifyCenter
○,○,○,○,○,○
30. justifyFull
○,○,○,○,○,○
31. justifyLeft
○,○,○,○,○,○
32. justifyRight
○,○,○,○,○,○
33. outdent
○,○,○,○,○,○
34. paste
×,○,×,○,×,○
35. redo
○,○,○,○,○,○
36. removeFormat
○,○,○,○,○,○
37. selectAll
○,○,○,○,○,○
38. strikeThrough
○,○,○,○,○,○
39. subscript
○,○,○,○,○,○
40. superscript
○,○,○,○,○,○
41. underline
○,○,○,○,○,○
42. undo
○,○,○,○,○,○
43. unlink
○,○,○,○,○,○
44. useCSS
○,○,○,○,×,×
45. styleWithCSS
○,○,○,○,×,×
--
P.S. Operaの検証を追加しました。
お問い合わせby Network Communication Note