いつもお世話になっております。
contenteditableを利用したリッチテキストエディタを実装しています。
その中で、IEのみかつ特定条件でexecCommandの色変更(およびサイズ変更もなのですが...)がワークしないケースがあります。
有識者の方で対応方法をご存知の方がいらっしゃれば教えていただけないでしょうか?
条件
- ブラウザはwin x IE11でのみ観測できました
- カーソルモードの場合(範囲選択でない場合)
- 入力モードが全角入力の場合
上記のケースでのみ文字色の変更がワークしません。
サンプル
以下にサンプルのpenを作成しておきました。ご確認いただけると幸いです。
https://codepen.io/anon/pen/KQpOeP
中身は以下になります
html
1<html lang="ja"> 2 <head></head> 3 <body> 4 <div class="editor" contenteditable="true"></div> 5 <div class="toolBox"> 6 <button type="button" onmousedown="changeColor('red')">red</button> 7 <button type="button" onmousedown="changeColor('green');">green</button> 8 <button type="button" onmousedown="changeColor('blue');">blue</button> 9 </div> 10 </body> 11</html>
css
1.editor{ 2 width: 500px; 3 height: 100px; 4 background-color: #efefef; 5 border: 1px solid #ddd; 6 padding: 10px; 7 float: left; 8} 9.toolBox{ 10 float: left; 11 padding: 10px; 12}
javascript
1function changeColor(color){ 2 document.execCommand('foreColor', false, color) 3 var event = (window.event)? window.event : arguments.callee.caller.arguments[0]; 4 event.preventDefault(); 5 event.stopPropagation(); 6}
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/02/02 01:36