回答編集履歴
3
関数の順番を修正しました
test
CHANGED
|
@@ -34,6 +34,14 @@
|
|
|
34
34
|
|
|
35
35
|
|
|
36
36
|
|
|
37
|
+
function changeColorExec(color) {
|
|
38
|
+
|
|
39
|
+
document.execCommand('foreColor', false, color);
|
|
40
|
+
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
|
|
44
|
+
|
|
37
45
|
function changeColorExecIE(color) {
|
|
38
46
|
|
|
39
47
|
var selection = document.getSelection();
|
|
@@ -62,14 +70,6 @@
|
|
|
62
70
|
|
|
63
71
|
|
|
64
72
|
|
|
65
|
-
function changeColorExec(color) {
|
|
66
|
-
|
|
67
|
-
document.execCommand('foreColor', false, color);
|
|
68
|
-
|
|
69
|
-
}
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
73
|
function getElementNode(node) {
|
|
74
74
|
|
|
75
75
|
return node.nodeType === Node.ELEMENT_NODE ? node : node.parentNode;
|
|
@@ -80,6 +80,6 @@
|
|
|
80
80
|
|
|
81
81
|
|
|
82
82
|
|
|
83
|
-
- [Selection](https://developer.mozilla.org/docs/Web/API/Selection)
|
|
83
|
+
- [Selection - Web API インターフェイス | MDN](https://developer.mozilla.org/docs/Web/API/Selection)
|
|
84
84
|
|
|
85
|
-
- [Range](https://developer.mozilla.org/docs/Web/API/Range)
|
|
85
|
+
- [Range - Web API インターフェイス | MDN](https://developer.mozilla.org/docs/Web/API/Range)
|
2
insertNodeをsurroundContentsに修正しました
test
CHANGED
|
@@ -50,7 +50,7 @@
|
|
|
50
50
|
|
|
51
51
|
newNode.setAttribute('color', color);
|
|
52
52
|
|
|
53
|
-
range.
|
|
53
|
+
range.surroundContents(newNode);
|
|
54
54
|
|
|
55
55
|
range.selectNodeContents(newNode);
|
|
56
56
|
|
1
IE以外はexecCommandを使用するように修正しました
test
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
どうやらexecCommandでは難しそうなので、execCommandにあたる処理をselectionとrangeで行うのはいかがでしょうか。
|
|
1
|
+
どうやらexecCommandでは難しそうなので、IEを判定した上で、execCommandにあたる処理をselectionとrangeで行うのはいかがでしょうか。
|
|
2
2
|
|
|
3
3
|
|
|
4
4
|
|
|
@@ -8,6 +8,10 @@
|
|
|
8
8
|
|
|
9
9
|
```javascript
|
|
10
10
|
|
|
11
|
+
var ie = 0 <= navigator.userAgent.toLowerCase().indexOf('trident');
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
11
15
|
function changeColor(color){
|
|
12
16
|
|
|
13
17
|
var event = window.event ? window.event : arguments.callee.caller.arguments[0];
|
|
@@ -16,15 +20,27 @@
|
|
|
16
20
|
|
|
17
21
|
event.stopPropagation();
|
|
18
22
|
|
|
23
|
+
if (ie) {
|
|
24
|
+
|
|
25
|
+
changeColorExecIE(color);
|
|
26
|
+
|
|
27
|
+
} else {
|
|
28
|
+
|
|
29
|
+
changeColorExec(color);
|
|
30
|
+
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
|
|
36
|
+
|
|
19
|
-
|
|
37
|
+
function changeColorExecIE(color) {
|
|
20
38
|
|
|
21
39
|
var selection = document.getSelection();
|
|
22
40
|
|
|
23
41
|
var range = selection.getRangeAt(0);
|
|
24
42
|
|
|
25
|
-
if (get
|
|
43
|
+
if (getElementNode(range.commonAncestorContainer).getAttribute('color') === color) {
|
|
26
|
-
|
|
27
|
-
// 同じ色の場合は何もしない
|
|
28
44
|
|
|
29
45
|
return;
|
|
30
46
|
|
|
@@ -38,8 +54,6 @@
|
|
|
38
54
|
|
|
39
55
|
range.selectNodeContents(newNode);
|
|
40
56
|
|
|
41
|
-
// rangeを更新
|
|
42
|
-
|
|
43
57
|
selection.removeAllRanges();
|
|
44
58
|
|
|
45
59
|
selection.addRange(range);
|
|
@@ -48,11 +62,17 @@
|
|
|
48
62
|
|
|
49
63
|
|
|
50
64
|
|
|
51
|
-
|
|
65
|
+
function changeColorExec(color) {
|
|
52
66
|
|
|
53
|
-
|
|
67
|
+
document.execCommand('foreColor', false, color);
|
|
54
68
|
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
|
|
72
|
+
|
|
73
|
+
function getElementNode(node) {
|
|
74
|
+
|
|
55
|
-
return node.nodeType ===
|
|
75
|
+
return node.nodeType === Node.ELEMENT_NODE ? node : node.parentNode;
|
|
56
76
|
|
|
57
77
|
}
|
|
58
78
|
|