2017年7月27日(木)
HTML5 Editor for PC のまとめ #HTML5&CSS3&JavaScript

　Safari または Google Chromeで、ご利用下さい。

※Mozilla Firefoxは、編集エリア内にカーソルが無い時に、[Back Space]キーで、前のページに戻ります。about:configの設定で変更できますが、動作保証の対象外になります。

※Microsoft EdgeおよびIE11は、CSS3に完全対応しておらず、HTML5で廃止になったレガシータグで記述してしまうので、あまりお勧めできません。

※IE11は、多くのexecCommand()に対応しておらず、今回の試作品のレベルでも、execCommand("insertText")で文字挿入が出来ません。旧方法では可能なのですが、今後のプログラミングの足かせとなりますので、対象外とさせて頂きました。



P.S.0 まとめと言っておきながら、P.S.が長くなってしまいました。技術的なことなので、無視して下さい。


P.S. 『改行』に関して、修正完了しました。複雑な手順で出来るには出来たのですが、シンプルな方法はないかと模索した結果、IE11を含めたすべてのブラウザに有効な手段がありました。

--
document.getElementById("id_text").innerText
= document.getElementById("id_text").innerText;
--

　同じものに、同じものを代入しているのですが、これでHTMLタグが削除され、改行だけが<br>として残るようです。もしかしてと、偶然に発見して、少し興奮気味です（＾＾）

　<div></div>で記述されていた部分が、<br>になってしまうのですが、表示には問題無いので、この方法で行きます。

--
・Safari
・Google Chrome（[enter]でdiv改行）
あいう<div>え<span style="color: red;">お</span></div>
　↓
あいう<br>えお<br>

・Google Chrome（[shift]+[enter]で改行）
あいう<br>え<span style="color: red;">お</span>
　↓
あいう<br>えお

・Mozilla Firefox
あいう<br>え<span style="color: red;">お</span>
　↓
あいう<br>えお<br>

・Microsoft Edge（[enter]でdiv改行）
<div>あいう</div><div>え<font color="red">お</font></div>
　↓
あいう<br>えお

・Microsoft Edge（[shift]+[enter]で改行）
あいう<br>え<font color="red">お</font>
　↓
あいう<br>えお

・IE11（[enter]で段落改行）
<p>あいう</p><p>え<font color="red">お</font></p>
　↓
あいう<br><br>えお

・IE11（[shift]+[enter]で改行）
あいう<br>え<font color="red">お</font>
　↓
あいう<br>えお
--


P.S.1-2 IE11以外のブラウザにおいて、[Rich TEXT]の編集エリアが表示されていない場合、[HTML tags]から[Plain TEXT]にしたら<br>が入らないようですね。

　[HTML tags]では[Plain TEXT]が選択不可にして、[HTML tags]から[Rich TEXT]に切り替えてから[Plain TEXT]が選択可能にして、回避できています。

　実際の運用では、[HTML tags]は無く、[Plain TEXT] ←→ [Rich TEXT]なので問題無いのですが、もしかしたらブラウザのバクを利用した方法なのかもしれません。
http://neconote.jp/prg/editor_pc.html