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

Commit d8537f7

Browse files
author
peak
committed
- support set line height
- add image upload handler option - disable modules and set order of modules
1 parent 7c7c81f commit d8537f7

12 files changed

+412
-51
lines changed

‎README.md

+31-3
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,6 @@ Vue.use(VueHtml5Editor, {
6969
//config image module
7070
image: {
7171
//Url of the server-side,default null and convert image to base64
72-
//return json data like {ok:false,msg:"unexpected"} or {ok:true,data:"image url"}
7372
server: null,
7473
//the name for file field in multipart request
7574
fieldName: "image",
@@ -80,7 +79,17 @@ Vue.use(VueHtml5Editor, {
8079
//follows are options of localResizeIMG
8180
width: 1600,
8281
height: 1600,
83-
quality: 80
82+
quality: 80,
83+
//handle response data，return image url
84+
uploadHandler(responseText){
85+
//default accept json data like {ok:false,msg:"unexpected"} or {ok:true,data:"image url"}
86+
var json = JSON.parse(responseText)
87+
if (!json.ok) {
88+
alert(json.msg)
89+
} else {
90+
return json.data
91+
}
92+
}
8493
},
8594
//default en-us, en-us and zh-cn are built-in
8695
language: "zh-cn",
@@ -129,11 +138,30 @@ Vue.use(VueHtml5Editor, {
129138
"reset": "重置"
130139
}
131140
},
141+
//the modules you don't want
142+
hiddenModules: [],
143+
//keep only the modules you want and customize the order.
144+
//can be used with hiddenModules together
145+
visibleModules: [
146+
"text",
147+
"color",
148+
"font",
149+
"align",
150+
"list",
151+
"link",
152+
"unlink",
153+
"tabulation",
154+
"image",
155+
"hr",
156+
"eraser",
157+
"undo",
158+
"full-screen",
159+
"info",
160+
],
132161
//extended modules
133162
modules: {
134163
//omit,reference to source code of build-in modules
135164
}
136-
137165
})
138166
```
139167

‎dist/vue-html5-editor.js

+169-25
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/*!
2-
* Vue-html5-editor 0.4.2
2+
* Vue-html5-editor 0.5.0
33
* https://github.com/PeakTai/vue-html5-editor
44
*/
55
(function webpackUniversalModuleDefinition(root, factory) {
@@ -132,6 +132,10 @@ return /******/ (function(modules) { // webpackBootstrap
132132

133133
var _enUs2 = _interopRequireDefault(_enUs);
134134

135+
var _arrayPolyfill = __webpack_require__(126);
136+
137+
var _arrayPolyfill2 = _interopRequireDefault(_arrayPolyfill);
138+
135139
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
136140

137141
/**
@@ -141,6 +145,8 @@ return /******/ (function(modules) { // webpackBootstrap
141145
*/
142146
exports.install = function (Vue, options) {
143147

148+
(0, _arrayPolyfill2.default)();
149+
144150
options = options || {};
145151

146152
//modules
@@ -157,6 +163,32 @@ return /******/ (function(modules) { // webpackBootstrap
157163
modules = modules.concat(arr);
158164
})();
159165
}
166+
//hidden modules
167+
if (Array.isArray(options.hiddenModules)) {
168+
modules = function () {
169+
var arr = [];
170+
modules.forEach(function (m) {
171+
if (!options.hiddenModules.includes(m.name)) {
172+
arr.push(m);
173+
}
174+
});
175+
return arr;
176+
}();
177+
}
178+
//visible modules
179+
if (Array.isArray(options.visibleModules)) {
180+
modules = function () {
181+
var arr = [];
182+
options.visibleModules.forEach(function (name) {
183+
modules.forEach(function (module) {
184+
if (module.name == name) {
185+
arr.push(module);
186+
}
187+
});
188+
});
189+
return arr;
190+
}();
191+
}
160192

161193
var components = {};
162194
modules.forEach(function (module) {
@@ -1053,7 +1085,8 @@ return /******/ (function(modules) { // webpackBootstrap
10531085
exports.default = {
10541086
props: {
10551087
content: {
1056-
twoWay: true,
1088+
//no longer be required
1089+
//twoWay: true,
10571090
type: String,
10581091
required: true,
10591092
default: ""
@@ -1133,6 +1166,9 @@ return /******/ (function(modules) { // webpackBootstrap
11331166
computeDashboardStyle: function computeDashboardStyle() {
11341167
this.dashboardStyle = { 'max-height': this.$els.content.clientHeight + 'px' };
11351168
},
1169+
getContentElement: function getContentElement() {
1170+
return this.$els.content;
1171+
},
11361172
toggleFullScreen: function toggleFullScreen() {
11371173
this.fullScreen = !this.fullScreen;
11381174
},
@@ -1146,11 +1182,11 @@ return /******/ (function(modules) { // webpackBootstrap
11461182
this.dashboard = null;
11471183
},
11481184
getCurrentRange: function getCurrentRange() {
1149-
var selection = window.getSelection();
1150-
return selection.rangeCount ? selection.getRangeAt(0) : null;
1185+
return this.range;
11511186
},
11521187
saveCurrentRange: function saveCurrentRange() {
1153-
var range = this.getCurrentRange();
1188+
var selection = window.getSelection ? window.getSelection() : document.getSelection();
1189+
var range = selection.rangeCount ? selection.getRangeAt(0) : null;
11541190
if (!range) {
11551191
return;
11561192
}
@@ -1159,7 +1195,7 @@ return /******/ (function(modules) { // webpackBootstrap
11591195
}
11601196
},
11611197
restoreSelection: function restoreSelection() {
1162-
var selection = window.getSelection();
1198+
var selection = window.getSelection ? window.getSelection() : document.getSelection();
11631199
selection.removeAllRanges();
11641200
if (this.range) {
11651201
selection.addRange(this.range);
@@ -1202,20 +1238,17 @@ return /******/ (function(modules) { // webpackBootstrap
12021238
component.content = component.$els.content.innerHTML;
12031239
}, false);
12041240

1205-
component.touchHander = function (e) {
1206-
var isInside = component.$els.content.contains(e.target);
1207-
var currentRange = component.getCurrentRange();
1208-
var clear = currentRange && currentRange.startContainer === currentRange.endContainer && currentRange.startOffset === currentRange.endOffset;
1209-
if (!clear || isInside) {
1241+
component.touchHandler = function (e) {
1242+
if (component.$els.content.contains(e.target)) {
12101243
component.saveCurrentRange();
12111244
}
12121245
};
12131246

1214-
window.addEventListener("touchend", component.touchHander, false);
1247+
window.addEventListener("touchend", component.touchHandler, false);
12151248
},
12161249
beforeDestroy: function beforeDestroy() {
12171250
var editor = this;
1218-
window.removeEventListener("touchend", editor.touchHander);
1251+
window.removeEventListener("touchend", editor.touchHandler);
12191252
editor.modules.forEach(function (module) {
12201253
if (typeof module.destroyed == "function") {
12211254
module.destroyed(editor);
@@ -1416,13 +1449,22 @@ return /******/ (function(modules) { // webpackBootstrap
14161449
// </label>
14171450
// <button v-for="size in 7" type="button" @click="setFontSize(size+1)">{{size+1}}</button>
14181451
// </div>
1452+
// <div>
1453+
// <label>
1454+
// {{$parent.locale["line height"]}}:
1455+
// </label>
1456+
// <button v-for="lh in lineHeightList" type="button" @click="setLineHeight(lh)">
1457+
// {{lh}}
1458+
// </button>
1459+
// </div>
14191460
// </div>
14201461
// </template>
14211462
// <script>
14221463
exports.default = {
14231464
data: function data() {
14241465
return {
1425-
nameList: ["Microsoft YaHei", "Helvetica Neue", "Helvetica", "Arial", "sans-serif", "Verdana", "Georgia", "Times New Roman", "Trebuchet MS", "Microsoft JhengHei", "Courier New", "Impact", "Comic Sans MS", "Consolas"]
1466+
nameList: ["Microsoft YaHei", "Helvetica Neue", "Helvetica", "Arial", "sans-serif", "Verdana", "Georgia", "Times New Roman", "Trebuchet MS", "Microsoft JhengHei", "Courier New", "Impact", "Comic Sans MS", "Consolas"],
1467+
lineHeightList: ["1.0", "1.5", "1.8", "2.0", "2.5", "3.0"]
14261468
};
14271469
},
14281470

@@ -1435,6 +1477,48 @@ return /******/ (function(modules) { // webpackBootstrap
14351477
},
14361478
setHeading: function setHeading(heading) {
14371479
this.$parent.execCommand("formatBlock", "h" + heading);
1480+
},
1481+
_contains: function _contains(arr, el) {
1482+
for (var i = 0; i < arr.length; i++) {
1483+
if (arr[i] == el) {
1484+
return true;
1485+
}
1486+
}
1487+
return false;
1488+
},
1489+
setLineHeight: function setLineHeight(lh) {
1490+
var range = this.$parent.getCurrentRange();
1491+
if (!range) {
1492+
return;
1493+
}
1494+
if (!range.collapsed) {
1495+
range.collapse();
1496+
}
1497+
//find parent block element
1498+
var blockNodeNames = ["DIV", "P", "SECTION", "H1", "H2", "H3", "H4", "H5", "H6", "OL", "UL", "LI", "BODY"];
1499+
var container = range.endContainer;
1500+
while (container) {
1501+
if (container.nodeType != 1) {
1502+
container = container.parentNode;
1503+
continue;
1504+
}
1505+
1506+
if (blockNodeNames.includes(container.nodeName)) {
1507+
break;
1508+
}
1509+
container = container.parentNode;
1510+
}
1511+
var contentEl = this.$parent.getContentElement();
1512+
if (contentEl.contains(container)) {
1513+
container.style.lineHeight = lh;
1514+
} else {
1515+
container = range.endContainer;
1516+
var div = document.createElement("div");
1517+
div.innerText = container.innerText || container.textContent;
1518+
div.style.lineHeight = lh;
1519+
container.parentNode.replaceChild(div, container);
1520+
}
1521+
this.$parent.toggleDashboard("font");
14381522
}
14391523
}
14401524
};
@@ -1444,7 +1528,7 @@ return /******/ (function(modules) { // webpackBootstrap
14441528
/* 51 */
14451529
/***/ function(module, exports) {
14461530

1447-
module.exports = "\n<div class=\"dashboard-font\">\n <div>\n <label>{{$parent.locale[\"heading\"]}}:</label>\n <button v-for=\"h in 6\" type=\"button\" @click=\"setHeading(h+1)\">H{{h+1}}</button>\n </div>\n <div>\n <label>\n {{$parent.locale[\"font name\"]}}:\n </label>\n <button v-for=\"name in nameList\" type=\"button\" @click=\"setFontName(name)\">{{name}}</button>\n </div>\n <div>\n <label>\n {{$parent.locale[\"font size\"]}}:\n </label>\n <button v-for=\"size in 7\" type=\"button\" @click=\"setFontSize(size+1)\">{{size+1}}</button>\n </div>\n</div>\n";
1531+
module.exports = "\n<div class=\"dashboard-font\">\n <div>\n <label>{{$parent.locale[\"heading\"]}}:</label>\n <button v-for=\"h in 6\" type=\"button\" @click=\"setHeading(h+1)\">H{{h+1}}</button>\n </div>\n <div>\n <label>\n {{$parent.locale[\"font name\"]}}:\n </label>\n <button v-for=\"name in nameList\" type=\"button\" @click=\"setFontName(name)\">{{name}}</button>\n </div>\n <div>\n <label>\n {{$parent.locale[\"font size\"]}}:\n </label>\n <button v-for=\"size in 7\" type=\"button\" @click=\"setFontSize(size+1)\">{{size+1}}</button>\n </div>\n <div>\n <label>\n {{$parent.locale[\"line height\"]}}:\n </label>\n <button v-for=\"lh in lineHeightList\" type=\"button\" @click=\"setLineHeight(lh)\">\n {{lh}}\n </button>\n </div>\n</div>\n";
14481532

14491533
/***/ },
14501534
/* 52 */
@@ -1987,7 +2071,15 @@ return /******/ (function(modules) { // webpackBootstrap
19872071
compress: true,
19882072
width: 1600,
19892073
height: 1600,
1990-
quality: 80
2074+
quality: 80,
2075+
uploadHandler: function uploadHandler(responseText) {
2076+
var json = JSON.parse(responseText);
2077+
if (!json.ok) {
2078+
alert(json.msg);
2079+
} else {
2080+
return json.data;
2081+
}
2082+
}
19912083
},
19922084
dashboard: _dashboard2.default
19932085
};
@@ -2129,13 +2221,16 @@ return /******/ (function(modules) { // webpackBootstrap
21292221
return;
21302222
}
21312223
component.upload.status = "success";
2132-
var json = JSON.parse(xhr.responseText);
2133-
if (!json.ok) {
2134-
alert(json.msg);
2135-
} else {
2136-
component.$parent.execCommand("insertImage", json.data);
2224+
try {
2225+
var url = config.uploadHandler(xhr.responseText);
2226+
if (url) {
2227+
component.$parent.execCommand("insertImage", url);
2228+
}
2229+
} catch (e) {
2230+
console.error(e);
2231+
} finally {
2232+
component.upload.status = "ready";
21372233
}
2138-
component.upload.status = "ready";
21392234
};
21402235
xhr.onerror = function (e) {
21412236
component.upload.status = "error";
@@ -3967,7 +4062,7 @@ return /******/ (function(modules) { // webpackBootstrap
39674062
exports.default = {
39684063
data: function data() {
39694064
return {
3970-
version: ("0.4.2")
4065+
version: ("0.5.0")
39714066
};
39724067
}
39734068
};
@@ -4030,7 +4125,8 @@ return /******/ (function(modules) { // webpackBootstrap
40304125
"abort": "中断",
40314126
"reset": "重置",
40324127
"hr": "分隔线",
4033-
"undo": "撤消"
4128+
"undo": "撤消",
4129+
"line height": "行高"
40344130
};
40354131

40364132
/***/ },
@@ -4084,7 +4180,55 @@ return /******/ (function(modules) { // webpackBootstrap
40844180
"abort": "abort",
40854181
"reset": "reset",
40864182
"hr": "horizontal rule",
4087-
"undo": "undo"
4183+
"undo": "undo",
4184+
"line height": "line height"
4185+
};
4186+
4187+
/***/ },
4188+
/* 126 */
4189+
/***/ function(module, exports) {
4190+
4191+
'use strict';
4192+
4193+
Object.defineProperty(exports, "__esModule", {
4194+
value: true
4195+
});
4196+
4197+
exports.default = function () {
4198+
if (!Array.prototype.includes) {
4199+
Array.prototype.includes = function (searchElement /*, fromIndex*/) {
4200+
'use strict';
4201+
4202+
if (this == null) {
4203+
throw new TypeError('Array.prototype.includes called on null or undefined');
4204+
}
4205+
4206+
var O = Object(this);
4207+
var len = parseInt(O.length, 10) || 0;
4208+
if (len === 0) {
4209+
return false;
4210+
}
4211+
var n = parseInt(arguments[1], 10) || 0;
4212+
var k;
4213+
if (n >= 0) {
4214+
k = n;
4215+
} else {
4216+
k = len + n;
4217+
if (k < 0) {
4218+
k = 0;
4219+
}
4220+
}
4221+
var currentElement;
4222+
while (k < len) {
4223+
currentElement = O[k];
4224+
if (searchElement === currentElement || searchElement !== searchElement && currentElement !== currentElement) {
4225+
return true;
4226+
}
4227+
k++;
4228+
}
4229+
return false;
4230+
};
4231+
}
40884232
};
40894233

40904234
/***/ }

0 commit comments

Comments
 (0)