回答編集履歴
3
関数の順番を修正しました
answer
CHANGED
|
@@ -16,6 +16,10 @@
|
|
|
16
16
|
}
|
|
17
17
|
}
|
|
18
18
|
|
|
19
|
+
function changeColorExec(color) {
|
|
20
|
+
document.execCommand('foreColor', false, color);
|
|
21
|
+
}
|
|
22
|
+
|
|
19
23
|
function changeColorExecIE(color) {
|
|
20
24
|
var selection = document.getSelection();
|
|
21
25
|
var range = selection.getRangeAt(0);
|
|
@@ -30,14 +34,10 @@
|
|
|
30
34
|
selection.addRange(range);
|
|
31
35
|
}
|
|
32
36
|
|
|
33
|
-
function changeColorExec(color) {
|
|
34
|
-
document.execCommand('foreColor', false, color);
|
|
35
|
-
}
|
|
36
|
-
|
|
37
37
|
function getElementNode(node) {
|
|
38
38
|
return node.nodeType === Node.ELEMENT_NODE ? node : node.parentNode;
|
|
39
39
|
}
|
|
40
40
|
```
|
|
41
41
|
|
|
42
|
-
- [Selection](https://developer.mozilla.org/docs/Web/API/Selection)
|
|
42
|
+
- [Selection - Web API インターフェイス | MDN](https://developer.mozilla.org/docs/Web/API/Selection)
|
|
43
|
-
- [Range](https://developer.mozilla.org/docs/Web/API/Range)
|
|
43
|
+
- [Range - Web API インターフェイス | MDN](https://developer.mozilla.org/docs/Web/API/Range)
|
2
insertNodeをsurroundContentsに修正しました
answer
CHANGED
|
@@ -24,7 +24,7 @@
|
|
|
24
24
|
}
|
|
25
25
|
var newNode = document.createElement('font');
|
|
26
26
|
newNode.setAttribute('color', color);
|
|
27
|
-
range.
|
|
27
|
+
range.surroundContents(newNode);
|
|
28
28
|
range.selectNodeContents(newNode);
|
|
29
29
|
selection.removeAllRanges();
|
|
30
30
|
selection.addRange(range);
|
1
IE以外はexecCommandを使用するように修正しました
answer
CHANGED
|
@@ -1,32 +1,42 @@
|
|
|
1
|
-
どうやらexecCommandでは難しそうなので、execCommandにあたる処理をselectionとrangeで行うのはいかがでしょうか。
|
|
1
|
+
どうやらexecCommandでは難しそうなので、IEを判定した上で、execCommandにあたる処理をselectionとrangeで行うのはいかがでしょうか。
|
|
2
2
|
|
|
3
3
|
[https://codepen.io/anon/pen/YeyYPN](https://codepen.io/anon/pen/YeyYPN)
|
|
4
4
|
|
|
5
5
|
```javascript
|
|
6
|
+
var ie = 0 <= navigator.userAgent.toLowerCase().indexOf('trident');
|
|
7
|
+
|
|
6
8
|
function changeColor(color){
|
|
7
9
|
var event = window.event ? window.event : arguments.callee.caller.arguments[0];
|
|
8
10
|
event.preventDefault();
|
|
9
11
|
event.stopPropagation();
|
|
12
|
+
if (ie) {
|
|
13
|
+
changeColorExecIE(color);
|
|
14
|
+
} else {
|
|
15
|
+
changeColorExec(color);
|
|
16
|
+
}
|
|
17
|
+
}
|
|
18
|
+
|
|
10
|
-
|
|
19
|
+
function changeColorExecIE(color) {
|
|
11
20
|
var selection = document.getSelection();
|
|
12
21
|
var range = selection.getRangeAt(0);
|
|
13
|
-
if (
|
|
22
|
+
if (getElementNode(range.commonAncestorContainer).getAttribute('color') === color) {
|
|
14
|
-
// 同じ色の場合は何もしない
|
|
15
23
|
return;
|
|
16
24
|
}
|
|
17
25
|
var newNode = document.createElement('font');
|
|
18
26
|
newNode.setAttribute('color', color);
|
|
19
27
|
range.insertNode(newNode);
|
|
20
28
|
range.selectNodeContents(newNode);
|
|
21
|
-
// rangeを更新
|
|
22
29
|
selection.removeAllRanges();
|
|
23
30
|
selection.addRange(range);
|
|
24
31
|
}
|
|
25
32
|
|
|
26
|
-
// 親をたどり、最初に見つかったElementNodeを返す
|
|
27
|
-
function
|
|
33
|
+
function changeColorExec(color) {
|
|
28
|
-
|
|
34
|
+
document.execCommand('foreColor', false, color);
|
|
29
35
|
}
|
|
36
|
+
|
|
37
|
+
function getElementNode(node) {
|
|
38
|
+
return node.nodeType === Node.ELEMENT_NODE ? node : node.parentNode;
|
|
39
|
+
}
|
|
30
40
|
```
|
|
31
41
|
|
|
32
42
|
- [Selection](https://developer.mozilla.org/docs/Web/API/Selection)
|