pxx-vue-quill 1.0.98 → 1.0.99
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/vue-quill.umd.js
CHANGED
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
*
|
|
8
8
|
* Copyright (c) 2025 Pxx-Team
|
|
9
9
|
* Released under the MIT license
|
|
10
|
-
* Date: 2025-09-
|
|
10
|
+
* Date: 2025-09-10T01:59:09.315Z
|
|
11
11
|
*/
|
|
12
12
|
(function (global, factory) {
|
|
13
13
|
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue')) :
|
|
@@ -18993,11 +18993,11 @@
|
|
|
18993
18993
|
value: true
|
|
18994
18994
|
});
|
|
18995
18995
|
|
|
18996
|
-
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
|
|
18996
|
+
var _createClass$1 = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
|
|
18997
18997
|
|
|
18998
18998
|
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
18999
18999
|
|
|
19000
|
-
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
|
19000
|
+
function _classCallCheck$1(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
|
19001
19001
|
|
|
19002
19002
|
var LEFT_ALIGN = 'left';
|
|
19003
19003
|
var CENTER_ALIGN = 'center';
|
|
@@ -19008,7 +19008,7 @@
|
|
|
19008
19008
|
var _this = this,
|
|
19009
19009
|
_alignments;
|
|
19010
19010
|
|
|
19011
|
-
_classCallCheck(this, DefaultAligner);
|
|
19011
|
+
_classCallCheck$1(this, DefaultAligner);
|
|
19012
19012
|
|
|
19013
19013
|
this.applyStyle = options.aligner.applyStyle;
|
|
19014
19014
|
this.alignAttribute = options.attribute;
|
|
@@ -19036,7 +19036,7 @@
|
|
|
19036
19036
|
}), _alignments);
|
|
19037
19037
|
}
|
|
19038
19038
|
|
|
19039
|
-
_createClass(DefaultAligner, [{
|
|
19039
|
+
_createClass$1(DefaultAligner, [{
|
|
19040
19040
|
key: 'getAlignments',
|
|
19041
19041
|
value: function getAlignments() {
|
|
19042
19042
|
var _this2 = this;
|
|
@@ -19339,190 +19339,182 @@
|
|
|
19339
19339
|
return AlignAction;
|
|
19340
19340
|
}
|
|
19341
19341
|
|
|
19342
|
-
var ResizeAction = {};
|
|
19342
|
+
var ResizeAction$1 = {};
|
|
19343
19343
|
|
|
19344
|
-
|
|
19344
|
+
Object.defineProperty(ResizeAction$1, "__esModule", {
|
|
19345
|
+
value: true
|
|
19346
|
+
});
|
|
19345
19347
|
|
|
19346
|
-
function
|
|
19347
|
-
if (hasRequiredResizeAction) return ResizeAction;
|
|
19348
|
-
hasRequiredResizeAction = 1;
|
|
19348
|
+
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
|
|
19349
19349
|
|
|
19350
|
-
|
|
19351
|
-
value: true
|
|
19352
|
-
});
|
|
19350
|
+
var _Action2 = requireAction();
|
|
19353
19351
|
|
|
19354
|
-
|
|
19352
|
+
var _Action3 = _interopRequireDefault(_Action2);
|
|
19355
19353
|
|
|
19356
|
-
|
|
19354
|
+
var _BlotFormatter = requireBlotFormatter();
|
|
19357
19355
|
|
|
19358
|
-
|
|
19356
|
+
_interopRequireDefault(_BlotFormatter);
|
|
19359
19357
|
|
|
19360
|
-
|
|
19358
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
19361
19359
|
|
|
19362
|
-
|
|
19360
|
+
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
|
19363
19361
|
|
|
19364
|
-
|
|
19362
|
+
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
|
|
19365
19363
|
|
|
19366
|
-
|
|
19364
|
+
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
|
|
19367
19365
|
|
|
19368
|
-
|
|
19366
|
+
var ResizeAction = function (_Action) {
|
|
19367
|
+
_inherits(ResizeAction, _Action);
|
|
19369
19368
|
|
|
19370
|
-
|
|
19369
|
+
function ResizeAction(formatter) {
|
|
19370
|
+
_classCallCheck(this, ResizeAction);
|
|
19371
19371
|
|
|
19372
|
-
|
|
19373
|
-
_inherits(ResizeAction, _Action);
|
|
19372
|
+
var _this = _possibleConstructorReturn(this, (ResizeAction.__proto__ || Object.getPrototypeOf(ResizeAction)).call(this, formatter));
|
|
19374
19373
|
|
|
19375
|
-
|
|
19376
|
-
|
|
19377
|
-
|
|
19378
|
-
|
|
19379
|
-
|
|
19380
|
-
|
|
19381
|
-
if (!(event.target instanceof HTMLElement)) {
|
|
19382
|
-
return;
|
|
19383
|
-
}
|
|
19384
|
-
_this.dragHandle = event.target;
|
|
19385
|
-
_this.setCursor(_this.dragHandle.style.cursor);
|
|
19374
|
+
_this.onMouseDown = function (event) {
|
|
19375
|
+
if (!(event.target instanceof HTMLElement)) {
|
|
19376
|
+
return;
|
|
19377
|
+
}
|
|
19378
|
+
_this.dragHandle = event.target;
|
|
19379
|
+
_this.setCursor(_this.dragHandle.style.cursor);
|
|
19386
19380
|
|
|
19387
|
-
|
|
19388
|
-
|
|
19389
|
-
|
|
19381
|
+
if (!_this.formatter.currentSpec) {
|
|
19382
|
+
return;
|
|
19383
|
+
}
|
|
19390
19384
|
|
|
19391
|
-
|
|
19392
|
-
|
|
19393
|
-
|
|
19394
|
-
|
|
19385
|
+
var target = _this.formatter.currentSpec.getTargetElement();
|
|
19386
|
+
if (!target) {
|
|
19387
|
+
return;
|
|
19388
|
+
}
|
|
19395
19389
|
|
|
19396
|
-
|
|
19390
|
+
var rect = target.getBoundingClientRect();
|
|
19397
19391
|
|
|
19398
|
-
|
|
19399
|
-
|
|
19400
|
-
|
|
19392
|
+
_this.dragStartX = event.clientX;
|
|
19393
|
+
_this.preDragWidth = rect.width;
|
|
19394
|
+
_this.targetRatio = rect.height / rect.width;
|
|
19401
19395
|
|
|
19402
|
-
|
|
19403
|
-
|
|
19404
|
-
|
|
19396
|
+
document.addEventListener('mousemove', _this.onDrag);
|
|
19397
|
+
document.addEventListener('mouseup', _this.onMouseUp);
|
|
19398
|
+
};
|
|
19405
19399
|
|
|
19406
|
-
|
|
19407
|
-
|
|
19408
|
-
|
|
19409
|
-
|
|
19400
|
+
_this.onDrag = function (event) {
|
|
19401
|
+
if (!_this.formatter.currentSpec) {
|
|
19402
|
+
return;
|
|
19403
|
+
}
|
|
19410
19404
|
|
|
19411
|
-
|
|
19412
|
-
|
|
19413
|
-
|
|
19414
|
-
|
|
19405
|
+
var target = _this.formatter.currentSpec.getTargetElement();
|
|
19406
|
+
if (!target) {
|
|
19407
|
+
return;
|
|
19408
|
+
}
|
|
19415
19409
|
|
|
19416
|
-
|
|
19417
|
-
|
|
19410
|
+
var deltaX = event.clientX - _this.dragStartX;
|
|
19411
|
+
var newWidth = 0;
|
|
19418
19412
|
|
|
19419
|
-
|
|
19420
|
-
|
|
19421
|
-
|
|
19422
|
-
|
|
19423
|
-
|
|
19413
|
+
if (_this.dragHandle === _this.topLeftHandle || _this.dragHandle === _this.bottomLeftHandle) {
|
|
19414
|
+
newWidth = Math.round(_this.preDragWidth - deltaX);
|
|
19415
|
+
} else {
|
|
19416
|
+
newWidth = Math.round(_this.preDragWidth + deltaX);
|
|
19417
|
+
}
|
|
19424
19418
|
|
|
19425
|
-
|
|
19419
|
+
var newHeight = _this.targetRatio * newWidth;
|
|
19426
19420
|
|
|
19427
|
-
|
|
19428
|
-
|
|
19421
|
+
target.setAttribute('width', '' + newWidth);
|
|
19422
|
+
target.setAttribute('height', '' + newHeight);
|
|
19429
19423
|
|
|
19430
|
-
|
|
19431
|
-
|
|
19424
|
+
_this.formatter.update();
|
|
19425
|
+
};
|
|
19432
19426
|
|
|
19433
|
-
|
|
19434
|
-
|
|
19435
|
-
|
|
19436
|
-
|
|
19437
|
-
|
|
19427
|
+
_this.onMouseUp = function () {
|
|
19428
|
+
_this.setCursor('');
|
|
19429
|
+
document.removeEventListener('mousemove', _this.onDrag);
|
|
19430
|
+
document.removeEventListener('mouseup', _this.onMouseUp);
|
|
19431
|
+
};
|
|
19438
19432
|
|
|
19439
|
-
|
|
19440
|
-
|
|
19441
|
-
|
|
19442
|
-
|
|
19443
|
-
|
|
19444
|
-
|
|
19445
|
-
|
|
19446
|
-
|
|
19447
|
-
|
|
19448
|
-
|
|
19433
|
+
_this.topLeftHandle = _this.createHandle('top-left', 'nwse-resize');
|
|
19434
|
+
_this.topRightHandle = _this.createHandle('top-right', 'nesw-resize');
|
|
19435
|
+
_this.bottomRightHandle = _this.createHandle('bottom-right', 'nwse-resize');
|
|
19436
|
+
_this.bottomLeftHandle = _this.createHandle('bottom-left', 'nesw-resize');
|
|
19437
|
+
_this.dragHandle = null;
|
|
19438
|
+
_this.dragStartX = 0;
|
|
19439
|
+
_this.preDragWidth = 0;
|
|
19440
|
+
_this.targetRatio = 0;
|
|
19441
|
+
return _this;
|
|
19442
|
+
}
|
|
19449
19443
|
|
|
19450
|
-
|
|
19451
|
-
|
|
19452
|
-
|
|
19453
|
-
|
|
19454
|
-
|
|
19455
|
-
|
|
19456
|
-
|
|
19444
|
+
_createClass(ResizeAction, [{
|
|
19445
|
+
key: 'onCreate',
|
|
19446
|
+
value: function onCreate() {
|
|
19447
|
+
this.formatter.overlay.appendChild(this.topLeftHandle);
|
|
19448
|
+
this.formatter.overlay.appendChild(this.topRightHandle);
|
|
19449
|
+
this.formatter.overlay.appendChild(this.bottomRightHandle);
|
|
19450
|
+
this.formatter.overlay.appendChild(this.bottomLeftHandle);
|
|
19457
19451
|
|
|
19458
|
-
|
|
19459
|
-
|
|
19460
|
-
|
|
19461
|
-
|
|
19462
|
-
|
|
19463
|
-
|
|
19464
|
-
|
|
19465
|
-
|
|
19466
|
-
|
|
19467
|
-
|
|
19468
|
-
|
|
19469
|
-
|
|
19470
|
-
|
|
19471
|
-
|
|
19472
|
-
|
|
19473
|
-
|
|
19474
|
-
|
|
19475
|
-
|
|
19476
|
-
|
|
19477
|
-
|
|
19478
|
-
|
|
19479
|
-
|
|
19452
|
+
this.repositionHandles(this.formatter.options.resize.handleStyle);
|
|
19453
|
+
}
|
|
19454
|
+
}, {
|
|
19455
|
+
key: 'onDestroy',
|
|
19456
|
+
value: function onDestroy() {
|
|
19457
|
+
this.setCursor('');
|
|
19458
|
+
this.formatter.overlay.removeChild(this.topLeftHandle);
|
|
19459
|
+
this.formatter.overlay.removeChild(this.topRightHandle);
|
|
19460
|
+
this.formatter.overlay.removeChild(this.bottomRightHandle);
|
|
19461
|
+
this.formatter.overlay.removeChild(this.bottomLeftHandle);
|
|
19462
|
+
}
|
|
19463
|
+
}, {
|
|
19464
|
+
key: 'createHandle',
|
|
19465
|
+
value: function createHandle(position, cursor) {
|
|
19466
|
+
var box = document.createElement('div');
|
|
19467
|
+
box.classList.add(this.formatter.options.resize.handleClassName);
|
|
19468
|
+
box.setAttribute('data-position', position);
|
|
19469
|
+
box.style.cursor = cursor;
|
|
19470
|
+
|
|
19471
|
+
if (this.formatter.options.resize.handleStyle) {
|
|
19472
|
+
Object.assign(box.style, this.formatter.options.resize.handleStyle);
|
|
19473
|
+
}
|
|
19480
19474
|
|
|
19481
|
-
|
|
19475
|
+
box.addEventListener('mousedown', this.onMouseDown);
|
|
19482
19476
|
|
|
19483
|
-
|
|
19484
|
-
|
|
19485
|
-
|
|
19486
|
-
|
|
19487
|
-
|
|
19488
|
-
|
|
19489
|
-
|
|
19490
|
-
|
|
19491
|
-
|
|
19492
|
-
|
|
19493
|
-
|
|
19494
|
-
|
|
19495
|
-
|
|
19496
|
-
|
|
19497
|
-
|
|
19477
|
+
return box;
|
|
19478
|
+
}
|
|
19479
|
+
}, {
|
|
19480
|
+
key: 'repositionHandles',
|
|
19481
|
+
value: function repositionHandles(handleStyle) {
|
|
19482
|
+
var handleXOffset = '0px';
|
|
19483
|
+
var handleYOffset = '0px';
|
|
19484
|
+
if (handleStyle) {
|
|
19485
|
+
if (handleStyle.width) {
|
|
19486
|
+
handleXOffset = -parseFloat(handleStyle.width) / 2 + 'px';
|
|
19487
|
+
}
|
|
19488
|
+
if (handleStyle.height) {
|
|
19489
|
+
handleYOffset = -parseFloat(handleStyle.height) / 2 + 'px';
|
|
19490
|
+
}
|
|
19491
|
+
}
|
|
19498
19492
|
|
|
19499
|
-
|
|
19500
|
-
|
|
19501
|
-
|
|
19502
|
-
|
|
19503
|
-
|
|
19504
|
-
|
|
19505
|
-
|
|
19506
|
-
|
|
19507
|
-
|
|
19508
|
-
|
|
19509
|
-
|
|
19493
|
+
Object.assign(this.topLeftHandle.style, { left: handleXOffset, top: handleYOffset });
|
|
19494
|
+
Object.assign(this.topRightHandle.style, { right: handleXOffset, top: handleYOffset });
|
|
19495
|
+
Object.assign(this.bottomRightHandle.style, { right: handleXOffset, bottom: handleYOffset });
|
|
19496
|
+
Object.assign(this.bottomLeftHandle.style, { left: handleXOffset, bottom: handleYOffset });
|
|
19497
|
+
}
|
|
19498
|
+
}, {
|
|
19499
|
+
key: 'setCursor',
|
|
19500
|
+
value: function setCursor(value) {
|
|
19501
|
+
if (document.body) {
|
|
19502
|
+
document.body.style.cursor = value;
|
|
19503
|
+
}
|
|
19510
19504
|
|
|
19511
|
-
|
|
19512
|
-
|
|
19513
|
-
|
|
19514
|
-
|
|
19515
|
-
|
|
19516
|
-
|
|
19517
|
-
|
|
19518
|
-
|
|
19505
|
+
if (this.formatter.currentSpec) {
|
|
19506
|
+
var target = this.formatter.currentSpec.getOverlayElement();
|
|
19507
|
+
if (target) {
|
|
19508
|
+
target.style.cursor = value;
|
|
19509
|
+
}
|
|
19510
|
+
}
|
|
19511
|
+
}
|
|
19512
|
+
}]);
|
|
19519
19513
|
|
|
19520
|
-
|
|
19521
|
-
|
|
19514
|
+
return ResizeAction;
|
|
19515
|
+
}(_Action3.default);
|
|
19522
19516
|
|
|
19523
|
-
|
|
19524
|
-
return ResizeAction;
|
|
19525
|
-
}
|
|
19517
|
+
ResizeAction$1.default = ResizeAction;
|
|
19526
19518
|
|
|
19527
19519
|
var DeleteAction = {};
|
|
19528
19520
|
|
|
@@ -19629,7 +19621,7 @@
|
|
|
19629
19621
|
|
|
19630
19622
|
var _AlignAction2 = _interopRequireDefault(_AlignAction);
|
|
19631
19623
|
|
|
19632
|
-
var _ResizeAction =
|
|
19624
|
+
var _ResizeAction = ResizeAction$1;
|
|
19633
19625
|
|
|
19634
19626
|
var _ResizeAction2 = _interopRequireDefault(_ResizeAction);
|
|
19635
19627
|
|
|
@@ -20122,7 +20114,7 @@
|
|
|
20122
20114
|
}
|
|
20123
20115
|
});
|
|
20124
20116
|
|
|
20125
|
-
var _ResizeAction =
|
|
20117
|
+
var _ResizeAction = ResizeAction$1;
|
|
20126
20118
|
|
|
20127
20119
|
Object.defineProperty(exports, 'ResizeAction', {
|
|
20128
20120
|
enumerable: true,
|
|
@@ -20189,7 +20181,7 @@
|
|
|
20189
20181
|
console.warn('移除blotFormatter overlay时出错:', error);
|
|
20190
20182
|
}
|
|
20191
20183
|
};
|
|
20192
|
-
const
|
|
20184
|
+
const handleBlotFormatterClick = (event) => {
|
|
20193
20185
|
var _a;
|
|
20194
20186
|
if (!editor.value)
|
|
20195
20187
|
return;
|
|
@@ -20201,32 +20193,6 @@
|
|
|
20201
20193
|
removeQuillBlotFormatter();
|
|
20202
20194
|
}
|
|
20203
20195
|
};
|
|
20204
|
-
const handleGlobalKeyup = (event) => {
|
|
20205
|
-
var _a;
|
|
20206
|
-
if (event.keyCode !== 46 && event.keyCode !== 8)
|
|
20207
|
-
return;
|
|
20208
|
-
const blotFormatter = (_a = quillRef.value) === null || _a === void 0 ? void 0 : _a.getModule('blotFormatter');
|
|
20209
|
-
if (!blotFormatter || !blotFormatter.currentSpec)
|
|
20210
|
-
return;
|
|
20211
|
-
const target = event.target;
|
|
20212
|
-
if (!editor.value || !editor.value.contains(target)) {
|
|
20213
|
-
event.stopImmediatePropagation();
|
|
20214
|
-
event.preventDefault();
|
|
20215
|
-
return;
|
|
20216
|
-
}
|
|
20217
|
-
const allEditors = document.querySelectorAll('.quill-editor-container');
|
|
20218
|
-
allEditors.forEach(editorElement => {
|
|
20219
|
-
if (editorElement !== editor.value) {
|
|
20220
|
-
const otherQuill = editorElement.__quill;
|
|
20221
|
-
if (otherQuill && otherQuill !== quillRef.value) {
|
|
20222
|
-
const otherBlotFormatter = otherQuill.getModule('blotFormatter');
|
|
20223
|
-
if (otherBlotFormatter && otherBlotFormatter.currentSpec) {
|
|
20224
|
-
otherBlotFormatter.hide();
|
|
20225
|
-
}
|
|
20226
|
-
}
|
|
20227
|
-
}
|
|
20228
|
-
});
|
|
20229
|
-
};
|
|
20230
20196
|
const configureBlotFormatter = () => {
|
|
20231
20197
|
if (!quillRef.value)
|
|
20232
20198
|
return;
|
|
@@ -20291,13 +20257,7 @@
|
|
|
20291
20257
|
blotFormatter: {}
|
|
20292
20258
|
};
|
|
20293
20259
|
};
|
|
20294
|
-
vue.onMounted(() => {
|
|
20295
|
-
window.addEventListener('click', handleGlobalClick, true);
|
|
20296
|
-
window.addEventListener('keyup', handleGlobalKeyup, true);
|
|
20297
|
-
});
|
|
20298
20260
|
vue.onBeforeUnmount(() => {
|
|
20299
|
-
window.removeEventListener('click', handleGlobalClick, true);
|
|
20300
|
-
window.removeEventListener('keyup', handleGlobalKeyup, true);
|
|
20301
20261
|
removeQuillBlotFormatter();
|
|
20302
20262
|
});
|
|
20303
20263
|
const setQuill = (quillInstance) => {
|
|
@@ -20306,9 +20266,7 @@
|
|
|
20306
20266
|
return {
|
|
20307
20267
|
quillRef,
|
|
20308
20268
|
setQuill,
|
|
20309
|
-
|
|
20310
|
-
handleGlobalClick,
|
|
20311
|
-
handleGlobalKeyup,
|
|
20269
|
+
handleBlotFormatterClick,
|
|
20312
20270
|
configureBlotFormatter,
|
|
20313
20271
|
applyImageStyle,
|
|
20314
20272
|
registerBlotFormatter,
|
|
@@ -20374,6 +20332,41 @@
|
|
|
20374
20332
|
};
|
|
20375
20333
|
}
|
|
20376
20334
|
|
|
20335
|
+
function useGlobalClick() {
|
|
20336
|
+
const clickHandlers = vue.ref([]);
|
|
20337
|
+
const handleGlobalClick = (event) => {
|
|
20338
|
+
clickHandlers.value.forEach(handler => {
|
|
20339
|
+
try {
|
|
20340
|
+
handler(event);
|
|
20341
|
+
}
|
|
20342
|
+
catch (error) {
|
|
20343
|
+
console.warn('全局点击事件处理函数执行出错:', error);
|
|
20344
|
+
}
|
|
20345
|
+
});
|
|
20346
|
+
};
|
|
20347
|
+
const addClickHandler = (handler) => {
|
|
20348
|
+
if (typeof handler === 'function' && !clickHandlers.value.includes(handler)) {
|
|
20349
|
+
clickHandlers.value.push(handler);
|
|
20350
|
+
}
|
|
20351
|
+
};
|
|
20352
|
+
const clearClickHandlers = () => {
|
|
20353
|
+
clickHandlers.value = [];
|
|
20354
|
+
};
|
|
20355
|
+
vue.onMounted(() => {
|
|
20356
|
+
window.addEventListener('click', handleGlobalClick);
|
|
20357
|
+
});
|
|
20358
|
+
vue.onBeforeUnmount(() => {
|
|
20359
|
+
window.removeEventListener('click', handleGlobalClick);
|
|
20360
|
+
clearClickHandlers();
|
|
20361
|
+
});
|
|
20362
|
+
return {
|
|
20363
|
+
clickHandlers: clickHandlers.value,
|
|
20364
|
+
addClickHandler,
|
|
20365
|
+
clearClickHandlers,
|
|
20366
|
+
handleGlobalClick
|
|
20367
|
+
};
|
|
20368
|
+
}
|
|
20369
|
+
|
|
20377
20370
|
const boldSVG = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="18" height="18" viewBox="0 0 18 18"><g><g style="opacity:0;"><rect x="0" y="0" width="18" height="18" rx="0" fill="#FFFFFF" fill-opacity="1"/></g><g><path d="M6.794999938146972,7.7800002288818355L9.045000038146974,7.7800002288818355Q9.855000038146972,7.7800002288818355,10.230000038146972,7.442500128881836Q10.605000038146972,7.105000028881836,10.605000038146972,6.505000128881836Q10.605000038146972,6.114999728881836,10.440000038146973,5.860000628881836Q10.275000138146972,5.6050005288818365,9.929999838146973,5.470000228881836Q9.585000038146973,5.335000028881836,9.045000038146974,5.335000028881836L7.139999938146973,5.335000028881836L7.139999938146973,3.385000228881836L9.045000038146974,3.385000228881836Q10.034999838146973,3.385000228881836,10.852499938146973,3.797500608881836Q11.670000038146974,4.2100000388818355,12.142499938146972,4.922500628881836Q12.614999738146974,5.635000228881836,12.614999738146974,6.505000128881836Q12.614999738146974,7.375000028881836,12.142499938146972,8.042500028881836Q11.670000038146974,8.710000028881836,10.860000138146972,9.070000128881837Q10.050000238146973,9.430000328881835,9.045000038146974,9.430000328881835L6.794999938146972,9.430000328881835L6.794999938146972,7.7800002288818355ZM7.139999938146973,12.550000228881835L9.329999938146972,12.550000228881835Q9.900000138146972,12.550000228881835,10.327499838146974,12.354999528881836Q10.755000138146972,12.159999828881835,10.987500238146973,11.807499928881835Q11.219999838146972,11.454999928881836,11.219999838146972,11.020000428881836Q11.219999838146972,10.600000428881836,10.987500238146973,10.232500028881836Q10.755000138146972,9.864999728881836,10.327499838146974,9.647500028881836Q9.900000138146972,9.430000328881835,9.329999938146972,9.430000328881835L6.975000038146972,9.430000328881835L6.975000038146972,7.7800002288818355L9.329999938146972,7.7800002288818355Q10.349999938146972,7.7800002288818355,11.250000038146972,8.200000328881835Q12.149999638146973,8.620000328881837,12.690000538146972,9.362500228881835Q13.229999538146973,10.104999528881836,13.229999538146973,11.034999828881837Q13.229999538146973,11.949999828881836,12.690000538146972,12.752500528881836Q12.149999638146973,13.555000228881836,11.250000038146972,14.027500228881836Q10.349999938146972,14.500000228881836,9.329999938146972,14.500000228881836L7.139999938146973,14.500000228881836L7.139999938146973,12.550000228881835ZM7.064999938146973,14.500000228881836Q6.284999968146972,14.500000228881836,5.872500058146973,14.095000228881837Q5.460000038146973,13.689999228881836,5.460000038146973,12.895000428881836L5.460000038146973,4.989999728881836Q5.460000038146973,4.195000648881836,5.872500058146973,3.789999958881836Q6.284999968146972,3.385000228881836,7.064999938146973,3.385000228881836L7.469999838146973,3.385000228881836L7.469999838146973,14.500000228881836L7.064999938146973,14.500000228881836Z" fill="#555555" fill-opacity="1"/></g></g></svg>`;
|
|
20378
20371
|
const italicSVG = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="18" height="18" viewBox="0 0 18 18"><g><g style="opacity:0;"><rect x="0" y="0" width="18" height="18" rx="0" fill="#FFFFFF" fill-opacity="1"/></g><g><path d="M8,3Q7.9015086,3,7.8049095,3.019214718Q7.7083106,3.038429435,7.6173165,3.076120459Q7.5263224,3.11381148,7.4444296,3.16853037Q7.3625371,3.2232492600000002,7.2928932,3.2928932Q7.2232492,3.36253715,7.1685302,3.4444297600000002Q7.1138113999999995,3.52632231,7.0761204,3.61731648Q7.0384293,3.70831072,7.0192146,3.80490965Q6.99999994,3.90150857,7,4Q6.99999994,4.0984913,7.0192146,4.1950902Q7.0384293,4.291689,7.0761204,4.3826833Q7.1138113999999995,4.4736774,7.1685302,4.5555699Q7.2232492,4.6374626,7.2928932,4.7071065999999995Q7.3625371,4.7767504,7.4444296,4.8314693Q7.5263224,4.8861883,7.6173165,4.9238794Q7.7083106,4.9615704,7.8049096,4.9807851Q7.9015086,4.9999999,8,5L9.137146,5L8,13L7,13Q6.90150857,13,6.80490965,13.019215Q6.70831072,13.038429,6.6173164799999995,13.07612Q6.52632231,13.113811,6.44442973,13.16853Q6.36253715,13.223249,6.2928932,13.292892Q6.22324926,13.362536,6.16853037,13.444429Q6.11381148,13.526321,6.076120459,13.617315Q6.038429435,13.708309,6.019214718,13.804909Q6,13.901508,6,14Q6,14.098491,6.019214718,14.195089Q6.038429435,14.291689,6.076120459,14.382683Q6.11381148,14.473677,6.16853037,14.555569Q6.22324926,14.637462,6.2928932,14.707106Q6.36253715,14.77675,6.44442976,14.831469Q6.52632231,14.886187,6.6173164799999995,14.923878Q6.70831072,14.961569,6.80490965,14.980784Q6.90150857,15,7,15L11,15Q11.0984912,15,11.1950898,14.980784Q11.2916889,14.961569,11.382682800000001,14.923878Q11.473677200000001,14.886187,11.5555696,14.831469Q11.6374626,14.77675,11.7071066,14.707106Q11.7767506,14.637462,11.8314691,14.555569Q11.8861876,14.473677,11.9238791,14.382683Q11.9615698,14.291689,11.9807849,14.195089Q12,14.098491,12,14Q12,13.901508,11.9807849,13.804909Q11.9615698,13.708309,11.9238791,13.617315Q11.8861876,13.526321,11.8314691,13.444428Q11.7767506,13.362536,11.7071066,13.292892Q11.6374626,13.223249,11.5555701,13.16853Q11.473677200000001,13.113811,11.382682800000001,13.07612Q11.2916889,13.038429,11.1950903,13.019215Q11.0984912,13,11,13L9.8626451,13L11,5L12,5Q12.0984907,4.9999999,12.1950893,4.9807851Q12.2916884,4.9615703,12.382682800000001,4.9238793Q12.4736767,4.8861883,12.5555696,4.8314693Q12.6374621,4.7767504,12.7071061,4.7071065999999995Q12.776750100000001,4.6374626,12.831468600000001,4.5555699Q12.8861876,4.4736774,12.9238787,4.3826833Q12.9615698,4.291689,12.9807849,4.1950902Q12.999999500000001,4.0984913,13,4Q12.999999500000001,3.90150857,12.980784400000001,3.80490965Q12.9615698,3.70831072,12.9238787,3.61731648Q12.8861876,3.52632231,12.8314691,3.44442973Q12.7767506,3.36253715,12.7071066,3.2928932Q12.6374626,3.2232492600000002,12.5555696,3.16853037Q12.4736767,3.11381148,12.382682800000001,3.076120459Q12.2916884,3.038429435,12.1950898,3.019214718Q12.0984907,3,12,3L8,3Z" fill-rule="evenodd" fill="#555555" fill-opacity="1"/></g></g></svg>`;
|
|
20379
20372
|
const underlineSVG = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="18" height="18" viewBox="0 0 18 18"><g><g style="opacity:0;"><rect x="0" y="0" width="18" height="18" rx="0" fill="#FFFFFF" fill-opacity="1"/></g><g><path d="M5.000117301940918,14.500022450683593L5.000117301940918,14.500022450683593Q5.000117301940918,14.450777450683594,5.009724660740918,14.402477450683593Q5.019332019940918,14.354177450683594,5.038177530940918,14.308679450683593Q5.057023040940918,14.263182450683594,5.084382488940918,14.222236450683594Q5.111741931940918,14.181290450683594,5.146563901940918,14.146469450683593Q5.181385871940918,14.111646450683594,5.222332181940918,14.084286450683594Q5.263278451940918,14.056927450683594,5.308775541940918,14.038082450683595Q5.354272661940918,14.019237450683594,5.402572121940918,14.009630450683593Q5.450871581940918,14.000022450683593,5.500117301940918,14.000022450683593L12.500117301940918,14.000022450683593Q12.549362201940918,14.000022450683593,12.597661501940918,14.009629450683594Q12.645960801940918,14.019237450683594,12.691457701940918,14.038082450683595Q12.736954701940917,14.056926450683594,12.777901601940918,14.084285450683593Q12.818847701940918,14.111645450683593,12.853670101940917,14.146468450683594Q12.888492101940919,14.181289450683593,12.915851601940918,14.222235450683593Q12.943210601940919,14.263181450683593,12.962056201940918,14.308679450683593Q12.980901701940919,14.354177450683594,12.990509501940917,14.402477450683593Q13.00011680194092,14.450777450683594,13.000117301940918,14.500022450683593L13.000117301940918,14.500022450683593Q13.00011680194092,14.549268450683593,12.990509001940918,14.597566450683594Q12.980901701940919,14.645866450683593,12.962056201940918,14.691363450683594Q12.943210601940919,14.736860450683594,12.915851601940918,14.777807450683595Q12.888492101940919,14.818753450683595,12.853670101940917,14.853575450683593Q12.818847701940918,14.888397450683593,12.777901601940918,14.915756450683594Q12.736954701940917,14.943115450683594,12.691457701940918,14.961960450683593Q12.645960801940918,14.980806450683593,12.597661501940918,14.990413450683594Q12.549362201940918,15.000021450683594,12.500117301940918,15.000022450683593L5.500117301940918,15.000022450683593Q5.450871581940918,15.000021450683594,5.402572121940918,14.990414450683593Q5.354272661940918,14.980806450683593,5.308775541940918,14.961960450683593Q5.263278451940918,14.943115450683594,5.222332161940918,14.915756450683594Q5.181385871940918,14.888397450683593,5.146563901940918,14.853574450683594Q5.111741931940918,14.818752450683593,5.084382488940918,14.777806450683594Q5.057023040940918,14.736860450683594,5.038177530940918,14.691363450683594Q5.019332019940918,14.645866450683593,5.009724660740918,14.597567450683593Q5.000117301940918,14.549268450683593,5.000117301940918,14.500022450683593ZM5.045039176940918,3.548906330683594Q5.045039176940918,3.1015625006835936,5.283039211940918,2.8637809706835937Q5.521039131940918,2.6259994506835938,5.969039081940918,2.6259994506835938L5.997039201940918,2.6259994506835938Q6.445039201940918,2.6259994506835938,6.6830393019409176,2.8637809706835937Q6.921039201940918,3.1015625006835936,6.921039201940918,3.548906330683594L6.921039201940918,9.010000250683593Q6.921039201940918,9.737999950683594,7.180039401940919,10.255999550683594Q7.439039201940918,10.774000150683595,7.908039101940918,11.053999950683593Q8.377039001940918,11.333999650683594,8.993039101940917,11.333999650683594Q9.609039301940918,11.333999650683594,10.085039101940918,11.060999850683594Q10.561039401940917,10.788000150683594,10.820039301940918,10.263000450683593Q11.079039101940918,9.737999950683594,11.079039101940918,9.010000250683593L11.079039101940918,3.548906330683594Q11.079039101940918,3.1015625006835936,11.317039501940918,2.8637809706835937Q11.555039401940917,2.6259994506835938,12.003039401940917,2.6259994506835938L12.031039201940917,2.6259994506835938Q12.479039201940918,2.6259994506835938,12.717039101940918,2.8637809706835937Q12.955039001940918,3.1015625006835936,12.955039001940918,3.548906330683594L12.955039001940918,9.010000250683593Q12.955039001940918,10.144000050683594,12.416039501940919,11.095999750683594Q11.877039901940918,12.048000350683594,10.967039101940918,12.600999850683595Q10.057039301940918,13.154000450683593,8.993039101940917,13.154000450683593Q7.929039001940918,13.154000450683593,7.0190392019409185,12.600999850683595Q6.109039201940918,12.048000350683594,5.577039361940918,11.095999750683594Q5.045039176940918,10.144000050683594,5.045039176940918,9.010000250683593L5.045039176940918,3.548906330683594Z" fill="#555555" fill-opacity="1"/></g></g></svg>`;
|
|
@@ -20473,15 +20466,9 @@
|
|
|
20473
20466
|
const canUseLink = vue.ref(false);
|
|
20474
20467
|
const linkPosition = vue.ref({ top: 0, left: 0 });
|
|
20475
20468
|
const savedRange = vue.ref(null);
|
|
20476
|
-
const { setQuill,
|
|
20469
|
+
const { setQuill, handleBlotFormatterClick, configureBlotFormatter, applyImageStyle, registerBlotFormatter, getBlotFormatterConfig } = useBlotFormatter(editor, props.enableImageResize);
|
|
20477
20470
|
const { setQuill: setLinkQuill, setHandleCustomLink, addLinkClickListener } = useLinkClick(editor);
|
|
20478
|
-
|
|
20479
|
-
initialize();
|
|
20480
|
-
});
|
|
20481
|
-
vue.onBeforeUnmount(() => {
|
|
20482
|
-
removeQuillBlotFormatter();
|
|
20483
|
-
quill = null;
|
|
20484
|
-
});
|
|
20471
|
+
const { addClickHandler } = useGlobalClick();
|
|
20485
20472
|
let quill;
|
|
20486
20473
|
let options;
|
|
20487
20474
|
const editorWrapClass = vue.computed(() => {
|
|
@@ -20579,55 +20566,6 @@
|
|
|
20579
20566
|
}
|
|
20580
20567
|
}
|
|
20581
20568
|
};
|
|
20582
|
-
const initialize = () => {
|
|
20583
|
-
var _a;
|
|
20584
|
-
if (!editor.value)
|
|
20585
|
-
return;
|
|
20586
|
-
if (props.enableImageResize) {
|
|
20587
|
-
registerBlotFormatter();
|
|
20588
|
-
}
|
|
20589
|
-
options = composeOptions();
|
|
20590
|
-
setIcons();
|
|
20591
|
-
quill = new Quill(editor.value, options);
|
|
20592
|
-
setQuill(quill);
|
|
20593
|
-
setLinkQuill(quill);
|
|
20594
|
-
controlToolbarVisible(false);
|
|
20595
|
-
setContents(props.content);
|
|
20596
|
-
quill.on('text-change', handleTextChange);
|
|
20597
|
-
quill.on('selection-change', handleSelectionChange);
|
|
20598
|
-
quill.on('editor-change', handleEditorChange);
|
|
20599
|
-
quill.on('text-change', updateHistoryState);
|
|
20600
|
-
quill.on('selection-change', updateHistoryState);
|
|
20601
|
-
addLinkClickListener();
|
|
20602
|
-
updateHistoryState();
|
|
20603
|
-
const toolbarDom = (_a = quill.getModule('toolbar')) === null || _a === void 0 ? void 0 : _a.container;
|
|
20604
|
-
vue.nextTick(() => {
|
|
20605
|
-
const customLinkBtn = toolbarDom.querySelector('.ql-customLink');
|
|
20606
|
-
if (customLinkBtn) {
|
|
20607
|
-
customLinkBtn.addEventListener('click', (e) => {
|
|
20608
|
-
e.preventDefault();
|
|
20609
|
-
e.stopPropagation();
|
|
20610
|
-
if (canUseLink.value) {
|
|
20611
|
-
handleCustomLink(true);
|
|
20612
|
-
}
|
|
20613
|
-
});
|
|
20614
|
-
}
|
|
20615
|
-
});
|
|
20616
|
-
const tooltipInput = toolbarDom.querySelector('.ql-tooltip input');
|
|
20617
|
-
if (tooltipInput) {
|
|
20618
|
-
vue.nextTick(() => {
|
|
20619
|
-
tooltipInput.setAttribute('placeholder', props.placeholder);
|
|
20620
|
-
});
|
|
20621
|
-
}
|
|
20622
|
-
if (!props.needCollapse && props.toolbarStyle) {
|
|
20623
|
-
applyToolbarStyle();
|
|
20624
|
-
}
|
|
20625
|
-
applyEditorStyle();
|
|
20626
|
-
if (props.enableImageResize) {
|
|
20627
|
-
configureBlotFormatter();
|
|
20628
|
-
}
|
|
20629
|
-
ctx.emit('ready', quill);
|
|
20630
|
-
};
|
|
20631
20569
|
const composeOptions = () => {
|
|
20632
20570
|
const clientOptions = {};
|
|
20633
20571
|
clientOptions.theme = 'snow';
|
|
@@ -20746,9 +20684,6 @@
|
|
|
20746
20684
|
if (isEditorFocus.value) {
|
|
20747
20685
|
controlToolbarVisible(true);
|
|
20748
20686
|
}
|
|
20749
|
-
else {
|
|
20750
|
-
controlToolbarVisible(false);
|
|
20751
|
-
}
|
|
20752
20687
|
ctx.emit('selectionChange', { range, oldRange, source });
|
|
20753
20688
|
};
|
|
20754
20689
|
vue.watch(isEditorFocus, (focus) => {
|
|
@@ -20846,14 +20781,6 @@
|
|
|
20846
20781
|
const focus = () => {
|
|
20847
20782
|
quill === null || quill === void 0 ? void 0 : quill.focus();
|
|
20848
20783
|
};
|
|
20849
|
-
const reinit = () => {
|
|
20850
|
-
vue.nextTick(() => {
|
|
20851
|
-
var _a;
|
|
20852
|
-
if (!ctx.slots.toolbar && quill)
|
|
20853
|
-
(_a = quill.getModule('toolbar')) === null || _a === void 0 ? void 0 : _a.container.remove();
|
|
20854
|
-
initialize();
|
|
20855
|
-
});
|
|
20856
|
-
};
|
|
20857
20784
|
const moreToolbarToolClick = (tool) => {
|
|
20858
20785
|
var _a, _b;
|
|
20859
20786
|
if (!quill)
|
|
@@ -20964,6 +20891,81 @@
|
|
|
20964
20891
|
if (quill)
|
|
20965
20892
|
quill.enable(newValue);
|
|
20966
20893
|
});
|
|
20894
|
+
const initialize = () => {
|
|
20895
|
+
var _a;
|
|
20896
|
+
if (!editor.value)
|
|
20897
|
+
return;
|
|
20898
|
+
if (props.enableImageResize) {
|
|
20899
|
+
registerBlotFormatter();
|
|
20900
|
+
}
|
|
20901
|
+
options = composeOptions();
|
|
20902
|
+
setIcons();
|
|
20903
|
+
quill = new Quill(editor.value, options);
|
|
20904
|
+
setQuill(quill);
|
|
20905
|
+
setLinkQuill(quill);
|
|
20906
|
+
controlToolbarVisible(false);
|
|
20907
|
+
setContents(props.content);
|
|
20908
|
+
quill.on('text-change', handleTextChange);
|
|
20909
|
+
quill.on('selection-change', handleSelectionChange);
|
|
20910
|
+
quill.on('editor-change', handleEditorChange);
|
|
20911
|
+
quill.on('text-change', updateHistoryState);
|
|
20912
|
+
quill.on('selection-change', updateHistoryState);
|
|
20913
|
+
addLinkClickListener();
|
|
20914
|
+
const toolbarClickHandler = (event) => {
|
|
20915
|
+
const target = event.target;
|
|
20916
|
+
if (target.closest('.quill-editor-container')) {
|
|
20917
|
+
return;
|
|
20918
|
+
}
|
|
20919
|
+
controlToolbarVisible(false);
|
|
20920
|
+
};
|
|
20921
|
+
addClickHandler(toolbarClickHandler);
|
|
20922
|
+
addClickHandler(handleBlotFormatterClick);
|
|
20923
|
+
addClickHandler(() => {
|
|
20924
|
+
handleCustomLink(false);
|
|
20925
|
+
});
|
|
20926
|
+
updateHistoryState();
|
|
20927
|
+
const toolbarDom = (_a = quill.getModule('toolbar')) === null || _a === void 0 ? void 0 : _a.container;
|
|
20928
|
+
vue.nextTick(() => {
|
|
20929
|
+
const customLinkBtn = toolbarDom.querySelector('.ql-customLink');
|
|
20930
|
+
if (customLinkBtn) {
|
|
20931
|
+
customLinkBtn.addEventListener('click', (e) => {
|
|
20932
|
+
e.preventDefault();
|
|
20933
|
+
e.stopPropagation();
|
|
20934
|
+
if (canUseLink.value) {
|
|
20935
|
+
handleCustomLink(true);
|
|
20936
|
+
}
|
|
20937
|
+
});
|
|
20938
|
+
}
|
|
20939
|
+
});
|
|
20940
|
+
const tooltipInput = toolbarDom.querySelector('.ql-tooltip input');
|
|
20941
|
+
if (tooltipInput) {
|
|
20942
|
+
vue.nextTick(() => {
|
|
20943
|
+
tooltipInput.setAttribute('placeholder', props.placeholder);
|
|
20944
|
+
});
|
|
20945
|
+
}
|
|
20946
|
+
if (!props.needCollapse && props.toolbarStyle) {
|
|
20947
|
+
applyToolbarStyle();
|
|
20948
|
+
}
|
|
20949
|
+
applyEditorStyle();
|
|
20950
|
+
if (props.enableImageResize) {
|
|
20951
|
+
configureBlotFormatter();
|
|
20952
|
+
}
|
|
20953
|
+
ctx.emit('ready', quill);
|
|
20954
|
+
};
|
|
20955
|
+
const reinit = () => {
|
|
20956
|
+
vue.nextTick(() => {
|
|
20957
|
+
var _a;
|
|
20958
|
+
if (!ctx.slots.toolbar && quill)
|
|
20959
|
+
(_a = quill.getModule('toolbar')) === null || _a === void 0 ? void 0 : _a.container.remove();
|
|
20960
|
+
initialize();
|
|
20961
|
+
});
|
|
20962
|
+
};
|
|
20963
|
+
vue.onMounted(() => {
|
|
20964
|
+
initialize();
|
|
20965
|
+
});
|
|
20966
|
+
vue.onBeforeUnmount(() => {
|
|
20967
|
+
quill = null;
|
|
20968
|
+
});
|
|
20967
20969
|
return {
|
|
20968
20970
|
editor,
|
|
20969
20971
|
editorWrapClass,
|
|
@@ -20995,9 +20997,7 @@
|
|
|
20995
20997
|
render() {
|
|
20996
20998
|
return [
|
|
20997
20999
|
vue.h('div', {
|
|
20998
|
-
class: this.editorWrapClass
|
|
20999
|
-
this.handleCustomLink(false);
|
|
21000
|
-
}
|
|
21000
|
+
class: this.editorWrapClass
|
|
21001
21001
|
}, [
|
|
21002
21002
|
this.$props.needCollapse && this.$props.editorKey && vue.h(MoreToolbar, {
|
|
21003
21003
|
editorKey: String(this.$props.editorKey),
|