IEでcontenteditableの色変更が、特定条件で行われない
解決済
回答 1
投稿
- 評価
- クリップ 1
- VIEW 1,818
いつもお世話になっております。
contenteditableを利用したリッチテキストエディタを実装しています。
その中で、IEのみかつ特定条件でexecCommandの色変更（およびサイズ変更もなのですが...）がワークしないケースがあります。
有識者の方で対応方法をご存知の方がいらっしゃれば教えていただけないでしょうか？
条件
- ブラウザはwin x IE11でのみ観測できました
- カーソルモードの場合（範囲選択でない場合）
- 入力モードが全角入力の場合
上記のケースでのみ文字色の変更がワークしません。
サンプル
以下にサンプルのpenを作成しておきました。ご確認いただけると幸いです。
https://codepen.io/anon/pen/KQpOeP
中身は以下になります
<html lang="ja">
<head></head>
<body>
<div class="editor" contenteditable="true"></div>
<div class="toolBox">
<button type="button" onmousedown="changeColor('red')">red</button>
<button type="button" onmousedown="changeColor('green');">green</button>
<button type="button" onmousedown="changeColor('blue');">blue</button>
</div>
</body>
</html>.editor{
width: 500px;
height: 100px;
background-color: #efefef;
border: 1px solid #ddd;
padding: 10px;
float: left;
}
.toolBox{
float: left;
padding: 10px;
}function changeColor(color){
document.execCommand('foreColor', false, color)
var event = (window.event)? window.event : arguments.callee.caller.arguments[0];
event.preventDefault();
event.stopPropagation();
}-
気になる質問をクリップする
クリップした質問は、後からいつでもマイページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
クリップを取り消します
-
良い質問の評価を上げる
以下のような質問は評価を上げましょう
- 質問内容が明確
- 自分も答えを知りたい
- 質問者以外のユーザにも役立つ
評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。
質問の評価を上げたことを取り消します
-
評価を下げられる数の上限に達しました
評価を下げることができません
- 1日5回まで評価を下げられます
- 1日に1ユーザに対して2回まで評価を下げられます
質問の評価を下げる
teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。
- プログラミングに関係のない質問
- やってほしいことだけを記載した丸投げの質問
- 問題・課題が含まれていない質問
- 意図的に内容が抹消された質問
- 過去に投稿した質問と同じ内容の質問
- 広告と受け取られるような投稿
評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します
この機能は開放されていません
評価を下げる条件を満たしてません
質問の評価を下げる機能の利用条件
この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
-
メールアドレスの認証
メールアドレスの認証
-
質問評価に関するヘルプページの閲覧
質問評価に関するヘルプページの閲覧
checkベストアンサー
0
どうやらexecCommandでは難しそうなので、IEを判定した上で、execCommandにあたる処理をselectionとrangeで行うのはいかがでしょうか。
https://codepen.io/anon/pen/YeyYPN
var ie = 0 <= navigator.userAgent.toLowerCase().indexOf('trident');
function changeColor(color){
var event = window.event ? window.event : arguments.callee.caller.arguments[0];
event.preventDefault();
event.stopPropagation();
if (ie) {
changeColorExecIE(color);
} else {
changeColorExec(color);
}
}
function changeColorExec(color) {
document.execCommand('foreColor', false, color);
}
function changeColorExecIE(color) {
var selection = document.getSelection();
var range = selection.getRangeAt(0);
if (getElementNode(range.commonAncestorContainer).getAttribute('color') === color) {
return;
}
var newNode = document.createElement('font');
newNode.setAttribute('color', color);
range.surroundContents(newNode);
range.selectNodeContents(newNode);
selection.removeAllRanges();
selection.addRange(range);
}
function getElementNode(node) {
return node.nodeType === Node.ELEMENT_NODE ? node : node.parentNode;
}投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
15分調べてもわからないことは、teratailで質問しよう！
- ただいまの回答率 88.37%
- 質問をまとめることで、思考を整理して素早く解決
- テンプレート機能で、簡単に質問をまとめられる
2018/02/02 10:36
現実装に入れ込んで、もう少し調べてみます！