Skip to content
This repository was archived by the owner on May 9, 2022. It is now read-only.

Commit 961078b

Browse files
author
peak
committed
compatible with ie11
1 parent 7e6c494 commit 961078b

File tree

7 files changed

+177
-21
lines changed

7 files changed

+177
-21
lines changed

‎.eslintignore‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,5 @@
22
*.sass
33
*.pcss
44
*.css
5-
*.html
5+
*.html
6+
src/polyfill-ie.js

‎dist/vue-html5-editor.js‎

Lines changed: 87 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/**
22
* Vue-html5-editor 1.0.0
33
* https://github.com/PeakTai/vue-html5-editor
4-
* build at Mon Mar 06 2017 17:49:58 GMT+0800 (CST)
4+
* build at Thu Mar 09 2017 16:42:28 GMT+0800 (CST)
55
*/
66

77
(function (global, factory) {
@@ -27,6 +27,62 @@ function __$styleInject(css, returnValue) {
2727
return returnValue;
2828
}
2929

30+
var polyfill = function () {
31+
// https://tc39.github.io/ecma262/#sec-array.prototype.includes
32+
if (!Array.prototype.includes) {
33+
Object.defineProperty(Array.prototype, 'includes', {
34+
value: function value(searchElement, fromIndex) {
35+
// 1. Let O be ? ToObject(this value).
36+
if (this == null) {
37+
throw new TypeError('"this" is null or not defined')
38+
}
39+
40+
var o = Object(this);
41+
42+
// 2. Let len be ? ToLength(? Get(O, "length")).
43+
var len = o.length >>> 0;
44+
45+
// 3. If len is 0, return false.
46+
if (len === 0) {
47+
return false
48+
}
49+
50+
// 4. Let n be ? ToInteger(fromIndex).
51+
// (If fromIndex is undefined, this step produces the value 0.)
52+
var n = fromIndex | 0;
53+
54+
// 5. If n ≥ 0, then
55+
// a. Let k be n.
56+
// 6. Else n < 0,
57+
// a. Let k be len + n.
58+
// b. If k < 0, let k be 0.
59+
var k = Math.max(n >= 0 ? n : len - Math.abs(n), 0);
60+
61+
// 7. Repeat, while k < len
62+
while (k < len) {
63+
// a. Let elementK be the result of ? Get(O, ! ToString(k)).
64+
// b. If SameValueZero(searchElement, elementK) is true, return true.
65+
// c. Increase k by 1.
66+
// NOTE: === provides the correct "SameValueZero" comparison needed here.
67+
if (o[k] === searchElement) {
68+
return true
69+
}
70+
k++;
71+
}
72+
73+
// 8. Return false
74+
return false
75+
}
76+
});
77+
}
78+
// text.contains()
79+
if (!Text.prototype.contains) {
80+
Text.prototype.contains = function contains(node) {
81+
return this === node
82+
};
83+
}
84+
};
85+
3086
var template = "<div> <button type=\"button\" @click=\"$parent.execCommand('justifyLeft')\"> {{$parent.locale[\"left justify\"]}} </button> <button type=\"button\" @click=\"$parent.execCommand('justifyCenter')\"> {{$parent.locale[\"center justify\"]}} </button> <button type=\"button\" @click=\"$parent.execCommand('justifyRight')\"> {{$parent.locale[\"right justify\"]}} </button> </div>";
3187

3288
/**
@@ -743,6 +799,14 @@ var isInlineElement = function (node) {
743799
return inlineNodeNames.includes(node.nodeName)
744800
};
745801

802+
// for IE 11
803+
if (!Text.prototype.contains) {
804+
Text.prototype.contains = function contains(otherNode) {
805+
return this === otherNode
806+
};
807+
}
808+
809+
746810
/**
747811
* Created by peak on 2017/2/14.
748812
*/
@@ -1143,14 +1207,24 @@ var editor = {
11431207
return this.range
11441208
},
11451209
saveCurrentRange: function saveCurrentRange(){
1210+
var this$1 = this;
1211+
11461212
var selection = window.getSelection ? window.getSelection() : document.getSelection();
1147-
var range = selection.rangeCount ? selection.getRangeAt(0) : null;
1148-
if (!range) {
1213+
if (!selection.rangeCount) {
11491214
return
11501215
}
1151-
if (this.$refs.content.contains(range.startContainer) &&
1152-
this.$refs.content.contains(range.endContainer)) {
1153-
this.range = range;
1216+
var content = this.$refs.content;
1217+
for (var i = 0; i < selection.rangeCount; i++) {
1218+
var range = selection.getRangeAt(0);
1219+
var start = range.startContainer;
1220+
var end = range.endContainer;
1221+
// for IE11 : node.contains(textNode) always return false
1222+
start = start.nodeType === Node.TEXT_NODE ? start.parentNode : start;
1223+
end = end.nodeType === Node.TEXT_NODE ? end.parentNode : end;
1224+
if (content.contains(start) && content.contains(end)) {
1225+
this$1.range = range;
1226+
break
1227+
}
11541228
}
11551229
},
11561230
restoreSelection: function restoreSelection(){
@@ -1194,12 +1268,15 @@ var editor = {
11941268
var content = this.$refs.content;
11951269
content.innerHTML = this.content;
11961270
content.addEventListener('mouseup', this.saveCurrentRange, false);
1197-
content.addEventListener('keyup', this.saveCurrentRange, false);
1198-
content.addEventListener('mouseout', this.saveCurrentRange, false);
11991271
content.addEventListener('keyup', function () {
12001272
this$1.$emit('change', content.innerHTML);
1273+
this$1.saveCurrentRange();
1274+
}, false);
1275+
content.addEventListener('mouseout', function (e) {
1276+
if (e.target === content) {
1277+
this$1.saveCurrentRange();
1278+
}
12011279
}, false);
1202-
12031280
this.touchHandler = function (e) {
12041281
if (content.contains(e.target)) {
12051282
this$1.saveCurrentRange();
@@ -1349,6 +1426,7 @@ function mixin(source, ext) {
13491426
return source
13501427
}
13511428

1429+
polyfill();
13521430
/**
13531431
* Vue html5 Editor
13541432
* @param Vue {Vue}

‎example/basic.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -47,14 +47,14 @@
4747
showModuleName: false,
4848
},
4949
methods: {
50-
updateData(data){
50+
updateData: function (data) {
5151
// sync content to component
5252
this.content = data
5353
},
54-
fullScreen(){
54+
fullScreen: function () {
5555
this.$refs.editor.enableFullScreen()
5656
},
57-
focus(){
57+
focus: function () {
5858
this.$refs.editor.focus()
5959
}
6060
}

‎src/editor.js‎

Lines changed: 19 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -105,13 +105,21 @@ export default {
105105
},
106106
saveCurrentRange(){
107107
const selection = window.getSelection ? window.getSelection() : document.getSelection()
108-
const range = selection.rangeCount ? selection.getRangeAt(0) : null
109-
if (!range) {
108+
if (!selection.rangeCount) {
110109
return
111110
}
112-
if (this.$refs.content.contains(range.startContainer) &&
113-
this.$refs.content.contains(range.endContainer)) {
114-
this.range = range
111+
const content = this.$refs.content
112+
for (let i = 0; i < selection.rangeCount; i++) {
113+
const range = selection.getRangeAt(0)
114+
let start = range.startContainer
115+
let end = range.endContainer
116+
// for IE11 : node.contains(textNode) always return false
117+
start = start.nodeType === Node.TEXT_NODE ? start.parentNode : start
118+
end = end.nodeType === Node.TEXT_NODE ? end.parentNode : end
119+
if (content.contains(start) && content.contains(end)) {
120+
this.range = range
121+
break
122+
}
115123
}
116124
},
117125
restoreSelection(){
@@ -151,12 +159,15 @@ export default {
151159
const content = this.$refs.content
152160
content.innerHTML = this.content
153161
content.addEventListener('mouseup', this.saveCurrentRange, false)
154-
content.addEventListener('keyup', this.saveCurrentRange, false)
155-
content.addEventListener('mouseout', this.saveCurrentRange, false)
156162
content.addEventListener('keyup', () => {
157163
this.$emit('change', content.innerHTML)
164+
this.saveCurrentRange()
165+
}, false)
166+
content.addEventListener('mouseout', (e) => {
167+
if (e.target === content) {
168+
this.saveCurrentRange()
169+
}
158170
}, false)
159-
160171
this.touchHandler = (e) => {
161172
if (content.contains(e.target)) {
162173
this.saveCurrentRange()

‎src/index.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
1+
import polyfill from './polyfill-ie'
12
import buildInModules from './modules/index'
23
import editor from './editor'
34
import i18nZhCn from './i18n/zh-cn'
45
import i18nEnUs from './i18n/en-us'
56
import mixin from './util/mixin'
67

8+
polyfill()
79
/**
810
* Vue html5 Editor
911
* @param Vue {Vue}

‎src/polyfill-ie.js‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
export default () => {
2+
// https://tc39.github.io/ecma262/#sec-array.prototype.includes
3+
if (!Array.prototype.includes) {
4+
Object.defineProperty(Array.prototype, 'includes', {
5+
value(searchElement, fromIndex) {
6+
// 1. Let O be ? ToObject(this value).
7+
if (this == null) {
8+
throw new TypeError('"this" is null or not defined')
9+
}
10+
11+
const o = Object(this)
12+
13+
// 2. Let len be ? ToLength(? Get(O, "length")).
14+
const len = o.length >>> 0
15+
16+
// 3. If len is 0, return false.
17+
if (len === 0) {
18+
return false
19+
}
20+
21+
// 4. Let n be ? ToInteger(fromIndex).
22+
// (If fromIndex is undefined, this step produces the value 0.)
23+
const n = fromIndex | 0
24+
25+
// 5. If n ≥ 0, then
26+
// a. Let k be n.
27+
// 6. Else n < 0,
28+
// a. Let k be len + n.
29+
// b. If k < 0, let k be 0.
30+
let k = Math.max(n >= 0 ? n : len - Math.abs(n), 0)
31+
32+
// 7. Repeat, while k < len
33+
while (k < len) {
34+
// a. Let elementK be the result of ? Get(O, ! ToString(k)).
35+
// b. If SameValueZero(searchElement, elementK) is true, return true.
36+
// c. Increase k by 1.
37+
// NOTE: === provides the correct "SameValueZero" comparison needed here.
38+
if (o[k] === searchElement) {
39+
return true
40+
}
41+
k++
42+
}
43+
44+
// 8. Return false
45+
return false
46+
}
47+
})
48+
}
49+
// text.contains()
50+
if (!Text.prototype.contains) {
51+
Text.prototype.contains = function contains(node) {
52+
return this === node
53+
}
54+
}
55+
}
56+

‎src/range/handler.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,14 @@ import {
88
isInlineElement
99
} from './util'
1010

11+
// for IE 11
12+
if (!Text.prototype.contains) {
13+
Text.prototype.contains = function contains(otherNode) {
14+
return this === otherNode
15+
}
16+
}
17+
18+
1119
/**
1220
* Created by peak on 2017/2/14.
1321
*/

0 commit comments

Comments
 (0)