ガレコレ [Garage Collection]
2017年8月5日(土)
HTML5 Editor for PC の総まとめ 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なので、上書きは有効なのでしょう。
--

 丸一日、費やしました。あと一息なのですが、他の仕事に取り掛からないいけないので、ここまでです。残念。
 
お問い合わせ


by Network Communication Note