pxx-vue-quill 1.0.114 → 1.0.116
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 +280 -237
- package/dist/vue-quill.umd.prod.js +2 -2
- package/package.json +1 -1
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-10T04:02:43.706Z
|
|
11
11
|
*/
|
|
12
12
|
(function (global, factory) {
|
|
13
13
|
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue')) :
|
|
@@ -18994,11 +18994,11 @@
|
|
|
18994
18994
|
value: true
|
|
18995
18995
|
});
|
|
18996
18996
|
|
|
18997
|
-
var _createClass
|
|
18997
|
+
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; }; }();
|
|
18998
18998
|
|
|
18999
18999
|
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; }
|
|
19000
19000
|
|
|
19001
|
-
function _classCallCheck
|
|
19001
|
+
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
|
19002
19002
|
|
|
19003
19003
|
var LEFT_ALIGN = 'left';
|
|
19004
19004
|
var CENTER_ALIGN = 'center';
|
|
@@ -19009,7 +19009,7 @@
|
|
|
19009
19009
|
var _this = this,
|
|
19010
19010
|
_alignments;
|
|
19011
19011
|
|
|
19012
|
-
_classCallCheck
|
|
19012
|
+
_classCallCheck(this, DefaultAligner);
|
|
19013
19013
|
|
|
19014
19014
|
this.applyStyle = options.aligner.applyStyle;
|
|
19015
19015
|
this.alignAttribute = options.attribute;
|
|
@@ -19037,7 +19037,7 @@
|
|
|
19037
19037
|
}), _alignments);
|
|
19038
19038
|
}
|
|
19039
19039
|
|
|
19040
|
-
_createClass
|
|
19040
|
+
_createClass(DefaultAligner, [{
|
|
19041
19041
|
key: 'getAlignments',
|
|
19042
19042
|
value: function getAlignments() {
|
|
19043
19043
|
var _this2 = this;
|
|
@@ -19340,182 +19340,190 @@
|
|
|
19340
19340
|
return AlignAction;
|
|
19341
19341
|
}
|
|
19342
19342
|
|
|
19343
|
-
var ResizeAction
|
|
19343
|
+
var ResizeAction = {};
|
|
19344
19344
|
|
|
19345
|
-
|
|
19346
|
-
value: true
|
|
19347
|
-
});
|
|
19345
|
+
var hasRequiredResizeAction;
|
|
19348
19346
|
|
|
19349
|
-
|
|
19347
|
+
function requireResizeAction () {
|
|
19348
|
+
if (hasRequiredResizeAction) return ResizeAction;
|
|
19349
|
+
hasRequiredResizeAction = 1;
|
|
19350
19350
|
|
|
19351
|
-
|
|
19351
|
+
Object.defineProperty(ResizeAction, "__esModule", {
|
|
19352
|
+
value: true
|
|
19353
|
+
});
|
|
19352
19354
|
|
|
19353
|
-
|
|
19355
|
+
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; }; }();
|
|
19354
19356
|
|
|
19355
|
-
|
|
19357
|
+
var _Action2 = requireAction();
|
|
19356
19358
|
|
|
19357
|
-
|
|
19359
|
+
var _Action3 = _interopRequireDefault(_Action2);
|
|
19358
19360
|
|
|
19359
|
-
|
|
19361
|
+
var _BlotFormatter = requireBlotFormatter();
|
|
19360
19362
|
|
|
19361
|
-
|
|
19363
|
+
_interopRequireDefault(_BlotFormatter);
|
|
19362
19364
|
|
|
19363
|
-
|
|
19365
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
19364
19366
|
|
|
19365
|
-
|
|
19367
|
+
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
|
19366
19368
|
|
|
19367
|
-
|
|
19368
|
-
_inherits(ResizeAction, _Action);
|
|
19369
|
+
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; }
|
|
19369
19370
|
|
|
19370
|
-
|
|
19371
|
-
_classCallCheck(this, ResizeAction);
|
|
19371
|
+
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; }
|
|
19372
19372
|
|
|
19373
|
-
|
|
19373
|
+
var ResizeAction$1 = function (_Action) {
|
|
19374
|
+
_inherits(ResizeAction, _Action);
|
|
19374
19375
|
|
|
19375
|
-
|
|
19376
|
-
|
|
19377
|
-
return;
|
|
19378
|
-
}
|
|
19379
|
-
_this.dragHandle = event.target;
|
|
19380
|
-
_this.setCursor(_this.dragHandle.style.cursor);
|
|
19376
|
+
function ResizeAction(formatter) {
|
|
19377
|
+
_classCallCheck(this, ResizeAction);
|
|
19381
19378
|
|
|
19382
|
-
|
|
19383
|
-
return;
|
|
19384
|
-
}
|
|
19379
|
+
var _this = _possibleConstructorReturn(this, (ResizeAction.__proto__ || Object.getPrototypeOf(ResizeAction)).call(this, formatter));
|
|
19385
19380
|
|
|
19386
|
-
|
|
19387
|
-
|
|
19388
|
-
|
|
19389
|
-
|
|
19381
|
+
_this.onMouseDown = function (event) {
|
|
19382
|
+
if (!(event.target instanceof HTMLElement)) {
|
|
19383
|
+
return;
|
|
19384
|
+
}
|
|
19385
|
+
_this.dragHandle = event.target;
|
|
19386
|
+
_this.setCursor(_this.dragHandle.style.cursor);
|
|
19390
19387
|
|
|
19391
|
-
|
|
19388
|
+
if (!_this.formatter.currentSpec) {
|
|
19389
|
+
return;
|
|
19390
|
+
}
|
|
19392
19391
|
|
|
19393
|
-
|
|
19394
|
-
|
|
19395
|
-
|
|
19392
|
+
var target = _this.formatter.currentSpec.getTargetElement();
|
|
19393
|
+
if (!target) {
|
|
19394
|
+
return;
|
|
19395
|
+
}
|
|
19396
19396
|
|
|
19397
|
-
|
|
19398
|
-
document.addEventListener('mouseup', _this.onMouseUp);
|
|
19399
|
-
};
|
|
19397
|
+
var rect = target.getBoundingClientRect();
|
|
19400
19398
|
|
|
19401
|
-
|
|
19402
|
-
|
|
19403
|
-
|
|
19404
|
-
}
|
|
19399
|
+
_this.dragStartX = event.clientX;
|
|
19400
|
+
_this.preDragWidth = rect.width;
|
|
19401
|
+
_this.targetRatio = rect.height / rect.width;
|
|
19405
19402
|
|
|
19406
|
-
|
|
19407
|
-
|
|
19408
|
-
|
|
19409
|
-
}
|
|
19403
|
+
document.addEventListener('mousemove', _this.onDrag);
|
|
19404
|
+
document.addEventListener('mouseup', _this.onMouseUp);
|
|
19405
|
+
};
|
|
19410
19406
|
|
|
19411
|
-
|
|
19412
|
-
|
|
19407
|
+
_this.onDrag = function (event) {
|
|
19408
|
+
if (!_this.formatter.currentSpec) {
|
|
19409
|
+
return;
|
|
19410
|
+
}
|
|
19413
19411
|
|
|
19414
|
-
|
|
19415
|
-
|
|
19416
|
-
|
|
19417
|
-
|
|
19418
|
-
}
|
|
19412
|
+
var target = _this.formatter.currentSpec.getTargetElement();
|
|
19413
|
+
if (!target) {
|
|
19414
|
+
return;
|
|
19415
|
+
}
|
|
19419
19416
|
|
|
19420
|
-
|
|
19417
|
+
var deltaX = event.clientX - _this.dragStartX;
|
|
19418
|
+
var newWidth = 0;
|
|
19421
19419
|
|
|
19422
|
-
|
|
19423
|
-
|
|
19420
|
+
if (_this.dragHandle === _this.topLeftHandle || _this.dragHandle === _this.bottomLeftHandle) {
|
|
19421
|
+
newWidth = Math.round(_this.preDragWidth - deltaX);
|
|
19422
|
+
} else {
|
|
19423
|
+
newWidth = Math.round(_this.preDragWidth + deltaX);
|
|
19424
|
+
}
|
|
19424
19425
|
|
|
19425
|
-
|
|
19426
|
-
};
|
|
19426
|
+
var newHeight = _this.targetRatio * newWidth;
|
|
19427
19427
|
|
|
19428
|
-
|
|
19429
|
-
|
|
19430
|
-
document.removeEventListener('mousemove', _this.onDrag);
|
|
19431
|
-
document.removeEventListener('mouseup', _this.onMouseUp);
|
|
19432
|
-
};
|
|
19428
|
+
target.setAttribute('width', '' + newWidth);
|
|
19429
|
+
target.setAttribute('height', '' + newHeight);
|
|
19433
19430
|
|
|
19434
|
-
|
|
19435
|
-
|
|
19436
|
-
_this.bottomRightHandle = _this.createHandle('bottom-right', 'nwse-resize');
|
|
19437
|
-
_this.bottomLeftHandle = _this.createHandle('bottom-left', 'nesw-resize');
|
|
19438
|
-
_this.dragHandle = null;
|
|
19439
|
-
_this.dragStartX = 0;
|
|
19440
|
-
_this.preDragWidth = 0;
|
|
19441
|
-
_this.targetRatio = 0;
|
|
19442
|
-
return _this;
|
|
19443
|
-
}
|
|
19431
|
+
_this.formatter.update();
|
|
19432
|
+
};
|
|
19444
19433
|
|
|
19445
|
-
|
|
19446
|
-
|
|
19447
|
-
|
|
19448
|
-
|
|
19449
|
-
|
|
19450
|
-
this.formatter.overlay.appendChild(this.bottomRightHandle);
|
|
19451
|
-
this.formatter.overlay.appendChild(this.bottomLeftHandle);
|
|
19434
|
+
_this.onMouseUp = function () {
|
|
19435
|
+
_this.setCursor('');
|
|
19436
|
+
document.removeEventListener('mousemove', _this.onDrag);
|
|
19437
|
+
document.removeEventListener('mouseup', _this.onMouseUp);
|
|
19438
|
+
};
|
|
19452
19439
|
|
|
19453
|
-
|
|
19454
|
-
|
|
19455
|
-
|
|
19456
|
-
|
|
19457
|
-
|
|
19458
|
-
|
|
19459
|
-
|
|
19460
|
-
|
|
19461
|
-
|
|
19462
|
-
|
|
19463
|
-
}
|
|
19464
|
-
}, {
|
|
19465
|
-
key: 'createHandle',
|
|
19466
|
-
value: function createHandle(position, cursor) {
|
|
19467
|
-
var box = document.createElement('div');
|
|
19468
|
-
box.classList.add(this.formatter.options.resize.handleClassName);
|
|
19469
|
-
box.setAttribute('data-position', position);
|
|
19470
|
-
box.style.cursor = cursor;
|
|
19471
|
-
|
|
19472
|
-
if (this.formatter.options.resize.handleStyle) {
|
|
19473
|
-
Object.assign(box.style, this.formatter.options.resize.handleStyle);
|
|
19474
|
-
}
|
|
19440
|
+
_this.topLeftHandle = _this.createHandle('top-left', 'nwse-resize');
|
|
19441
|
+
_this.topRightHandle = _this.createHandle('top-right', 'nesw-resize');
|
|
19442
|
+
_this.bottomRightHandle = _this.createHandle('bottom-right', 'nwse-resize');
|
|
19443
|
+
_this.bottomLeftHandle = _this.createHandle('bottom-left', 'nesw-resize');
|
|
19444
|
+
_this.dragHandle = null;
|
|
19445
|
+
_this.dragStartX = 0;
|
|
19446
|
+
_this.preDragWidth = 0;
|
|
19447
|
+
_this.targetRatio = 0;
|
|
19448
|
+
return _this;
|
|
19449
|
+
}
|
|
19475
19450
|
|
|
19476
|
-
|
|
19451
|
+
_createClass(ResizeAction, [{
|
|
19452
|
+
key: 'onCreate',
|
|
19453
|
+
value: function onCreate() {
|
|
19454
|
+
this.formatter.overlay.appendChild(this.topLeftHandle);
|
|
19455
|
+
this.formatter.overlay.appendChild(this.topRightHandle);
|
|
19456
|
+
this.formatter.overlay.appendChild(this.bottomRightHandle);
|
|
19457
|
+
this.formatter.overlay.appendChild(this.bottomLeftHandle);
|
|
19477
19458
|
|
|
19478
|
-
|
|
19479
|
-
|
|
19480
|
-
|
|
19481
|
-
|
|
19482
|
-
|
|
19483
|
-
|
|
19484
|
-
|
|
19485
|
-
|
|
19486
|
-
|
|
19487
|
-
|
|
19488
|
-
|
|
19489
|
-
|
|
19490
|
-
|
|
19491
|
-
|
|
19492
|
-
|
|
19459
|
+
this.repositionHandles(this.formatter.options.resize.handleStyle);
|
|
19460
|
+
}
|
|
19461
|
+
}, {
|
|
19462
|
+
key: 'onDestroy',
|
|
19463
|
+
value: function onDestroy() {
|
|
19464
|
+
this.setCursor('');
|
|
19465
|
+
this.formatter.overlay.removeChild(this.topLeftHandle);
|
|
19466
|
+
this.formatter.overlay.removeChild(this.topRightHandle);
|
|
19467
|
+
this.formatter.overlay.removeChild(this.bottomRightHandle);
|
|
19468
|
+
this.formatter.overlay.removeChild(this.bottomLeftHandle);
|
|
19469
|
+
}
|
|
19470
|
+
}, {
|
|
19471
|
+
key: 'createHandle',
|
|
19472
|
+
value: function createHandle(position, cursor) {
|
|
19473
|
+
var box = document.createElement('div');
|
|
19474
|
+
box.classList.add(this.formatter.options.resize.handleClassName);
|
|
19475
|
+
box.setAttribute('data-position', position);
|
|
19476
|
+
box.style.cursor = cursor;
|
|
19477
|
+
|
|
19478
|
+
if (this.formatter.options.resize.handleStyle) {
|
|
19479
|
+
Object.assign(box.style, this.formatter.options.resize.handleStyle);
|
|
19480
|
+
}
|
|
19493
19481
|
|
|
19494
|
-
|
|
19495
|
-
Object.assign(this.topRightHandle.style, { right: handleXOffset, top: handleYOffset });
|
|
19496
|
-
Object.assign(this.bottomRightHandle.style, { right: handleXOffset, bottom: handleYOffset });
|
|
19497
|
-
Object.assign(this.bottomLeftHandle.style, { left: handleXOffset, bottom: handleYOffset });
|
|
19498
|
-
}
|
|
19499
|
-
}, {
|
|
19500
|
-
key: 'setCursor',
|
|
19501
|
-
value: function setCursor(value) {
|
|
19502
|
-
if (document.body) {
|
|
19503
|
-
document.body.style.cursor = value;
|
|
19504
|
-
}
|
|
19482
|
+
box.addEventListener('mousedown', this.onMouseDown);
|
|
19505
19483
|
|
|
19506
|
-
|
|
19507
|
-
|
|
19508
|
-
|
|
19509
|
-
|
|
19510
|
-
|
|
19511
|
-
|
|
19512
|
-
|
|
19513
|
-
|
|
19484
|
+
return box;
|
|
19485
|
+
}
|
|
19486
|
+
}, {
|
|
19487
|
+
key: 'repositionHandles',
|
|
19488
|
+
value: function repositionHandles(handleStyle) {
|
|
19489
|
+
var handleXOffset = '0px';
|
|
19490
|
+
var handleYOffset = '0px';
|
|
19491
|
+
if (handleStyle) {
|
|
19492
|
+
if (handleStyle.width) {
|
|
19493
|
+
handleXOffset = -parseFloat(handleStyle.width) / 2 + 'px';
|
|
19494
|
+
}
|
|
19495
|
+
if (handleStyle.height) {
|
|
19496
|
+
handleYOffset = -parseFloat(handleStyle.height) / 2 + 'px';
|
|
19497
|
+
}
|
|
19498
|
+
}
|
|
19499
|
+
|
|
19500
|
+
Object.assign(this.topLeftHandle.style, { left: handleXOffset, top: handleYOffset });
|
|
19501
|
+
Object.assign(this.topRightHandle.style, { right: handleXOffset, top: handleYOffset });
|
|
19502
|
+
Object.assign(this.bottomRightHandle.style, { right: handleXOffset, bottom: handleYOffset });
|
|
19503
|
+
Object.assign(this.bottomLeftHandle.style, { left: handleXOffset, bottom: handleYOffset });
|
|
19504
|
+
}
|
|
19505
|
+
}, {
|
|
19506
|
+
key: 'setCursor',
|
|
19507
|
+
value: function setCursor(value) {
|
|
19508
|
+
if (document.body) {
|
|
19509
|
+
document.body.style.cursor = value;
|
|
19510
|
+
}
|
|
19511
|
+
|
|
19512
|
+
if (this.formatter.currentSpec) {
|
|
19513
|
+
var target = this.formatter.currentSpec.getOverlayElement();
|
|
19514
|
+
if (target) {
|
|
19515
|
+
target.style.cursor = value;
|
|
19516
|
+
}
|
|
19517
|
+
}
|
|
19518
|
+
}
|
|
19519
|
+
}]);
|
|
19514
19520
|
|
|
19515
|
-
|
|
19516
|
-
|
|
19521
|
+
return ResizeAction;
|
|
19522
|
+
}(_Action3.default);
|
|
19517
19523
|
|
|
19518
|
-
|
|
19524
|
+
ResizeAction.default = ResizeAction$1;
|
|
19525
|
+
return ResizeAction;
|
|
19526
|
+
}
|
|
19519
19527
|
|
|
19520
19528
|
var DeleteAction = {};
|
|
19521
19529
|
|
|
@@ -19622,7 +19630,7 @@
|
|
|
19622
19630
|
|
|
19623
19631
|
var _AlignAction2 = _interopRequireDefault(_AlignAction);
|
|
19624
19632
|
|
|
19625
|
-
var _ResizeAction =
|
|
19633
|
+
var _ResizeAction = requireResizeAction();
|
|
19626
19634
|
|
|
19627
19635
|
var _ResizeAction2 = _interopRequireDefault(_ResizeAction);
|
|
19628
19636
|
|
|
@@ -20115,7 +20123,7 @@
|
|
|
20115
20123
|
}
|
|
20116
20124
|
});
|
|
20117
20125
|
|
|
20118
|
-
var _ResizeAction =
|
|
20126
|
+
var _ResizeAction = requireResizeAction();
|
|
20119
20127
|
|
|
20120
20128
|
Object.defineProperty(exports, 'ResizeAction', {
|
|
20121
20129
|
enumerable: true,
|
|
@@ -20166,6 +20174,7 @@
|
|
|
20166
20174
|
var BlotFormatter = /*@__PURE__*/getDefaultExportFromCjs(dist);
|
|
20167
20175
|
|
|
20168
20176
|
function useBlotFormatter(editor, enableImageResize = true) {
|
|
20177
|
+
var _a;
|
|
20169
20178
|
const quillRef = vue.ref(null);
|
|
20170
20179
|
const removeQuillBlotFormatter = () => {
|
|
20171
20180
|
var _a;
|
|
@@ -20242,14 +20251,41 @@
|
|
|
20242
20251
|
return;
|
|
20243
20252
|
}
|
|
20244
20253
|
try {
|
|
20245
|
-
if (
|
|
20246
|
-
|
|
20254
|
+
if (typeof Quill === 'undefined') {
|
|
20255
|
+
console.warn('Quill 未加载,无法注册 BlotFormatter 模块');
|
|
20256
|
+
return;
|
|
20257
|
+
}
|
|
20258
|
+
const existingModule = (_a = Quill.imports) === null || _a === void 0 ? void 0 : _a['modules/blotFormatter'];
|
|
20259
|
+
if (!existingModule) {
|
|
20260
|
+
if (typeof BlotFormatter === 'function' || (BlotFormatter && typeof BlotFormatter.default === 'function')) {
|
|
20261
|
+
const ModuleClass = typeof BlotFormatter === 'function' ? BlotFormatter : BlotFormatter.default;
|
|
20262
|
+
Quill.register('modules/blotFormatter', ModuleClass);
|
|
20263
|
+
console.log('BlotFormatter模块已注册');
|
|
20264
|
+
}
|
|
20265
|
+
else {
|
|
20266
|
+
console.warn('BlotFormatter 不是一个有效的构造函数:', BlotFormatter);
|
|
20267
|
+
}
|
|
20268
|
+
}
|
|
20269
|
+
else {
|
|
20270
|
+
console.log('BlotFormatter模块已存在,跳过注册');
|
|
20247
20271
|
}
|
|
20248
20272
|
}
|
|
20249
20273
|
catch (error) {
|
|
20250
20274
|
console.warn('注册BlotFormatter模块时出错:', error);
|
|
20251
20275
|
}
|
|
20252
20276
|
};
|
|
20277
|
+
if (enableImageResize && typeof Quill !== 'undefined') {
|
|
20278
|
+
try {
|
|
20279
|
+
const existingModule = (_a = Quill.imports) === null || _a === void 0 ? void 0 : _a['modules/blotFormatter'];
|
|
20280
|
+
if (!existingModule && typeof BlotFormatter === 'function') {
|
|
20281
|
+
Quill.register('modules/blotFormatter', BlotFormatter);
|
|
20282
|
+
console.log('BlotFormatter模块已预注册');
|
|
20283
|
+
}
|
|
20284
|
+
}
|
|
20285
|
+
catch (error) {
|
|
20286
|
+
console.warn('预注册BlotFormatter模块时出错:', error);
|
|
20287
|
+
}
|
|
20288
|
+
}
|
|
20253
20289
|
const getBlotFormatterConfig = () => {
|
|
20254
20290
|
if (!enableImageResize) {
|
|
20255
20291
|
return {};
|
|
@@ -20424,7 +20460,7 @@
|
|
|
20424
20460
|
},
|
|
20425
20461
|
enableImageResize: {
|
|
20426
20462
|
type: Boolean,
|
|
20427
|
-
default:
|
|
20463
|
+
default: false,
|
|
20428
20464
|
},
|
|
20429
20465
|
toolbarStyle: {
|
|
20430
20466
|
type: Object,
|
|
@@ -20469,9 +20505,15 @@
|
|
|
20469
20505
|
const canUseLink = vue.ref(false);
|
|
20470
20506
|
const linkPosition = vue.ref({ top: 0, left: 0 });
|
|
20471
20507
|
const savedRange = vue.ref(null);
|
|
20508
|
+
const { addClickHandler } = useGlobalClick();
|
|
20472
20509
|
const { setQuill, handleBlotFormatterClick, configureBlotFormatter, applyImageStyle, registerBlotFormatter, getBlotFormatterConfig } = useBlotFormatter(editor, props.enableImageResize);
|
|
20473
20510
|
const { setQuill: setLinkQuill, setHandleCustomLink, addLinkClickListener } = useLinkClick(editor);
|
|
20474
|
-
|
|
20511
|
+
vue.onMounted(() => {
|
|
20512
|
+
initialize();
|
|
20513
|
+
});
|
|
20514
|
+
vue.onBeforeUnmount(() => {
|
|
20515
|
+
quill = null;
|
|
20516
|
+
});
|
|
20475
20517
|
let quill;
|
|
20476
20518
|
let options;
|
|
20477
20519
|
const editorWrapClass = vue.computed(() => {
|
|
@@ -20569,6 +20611,77 @@
|
|
|
20569
20611
|
}
|
|
20570
20612
|
}
|
|
20571
20613
|
};
|
|
20614
|
+
const initialize = () => {
|
|
20615
|
+
var _a;
|
|
20616
|
+
if (!editor.value)
|
|
20617
|
+
return;
|
|
20618
|
+
if (props.enableImageResize) {
|
|
20619
|
+
registerBlotFormatter();
|
|
20620
|
+
}
|
|
20621
|
+
options = composeOptions();
|
|
20622
|
+
setIcons();
|
|
20623
|
+
quill = new Quill(editor.value, options);
|
|
20624
|
+
setQuill(quill);
|
|
20625
|
+
setLinkQuill(quill);
|
|
20626
|
+
controlToolbarVisible(false);
|
|
20627
|
+
setContents(props.content);
|
|
20628
|
+
quill.on('text-change', handleTextChange);
|
|
20629
|
+
quill.on('selection-change', handleSelectionChange);
|
|
20630
|
+
quill.on('editor-change', handleEditorChange);
|
|
20631
|
+
quill.on('text-change', updateHistoryState);
|
|
20632
|
+
quill.on('selection-change', updateHistoryState);
|
|
20633
|
+
addLinkClickListener();
|
|
20634
|
+
const toolbarClickHandler = (event) => {
|
|
20635
|
+
var _a;
|
|
20636
|
+
const target = event.target;
|
|
20637
|
+
const clickedEditorContainer = target.closest('.quill-editor-container');
|
|
20638
|
+
if (clickedEditorContainer) {
|
|
20639
|
+
const currentEditorContainer = (_a = editor.value) === null || _a === void 0 ? void 0 : _a.closest('.quill-editor-container');
|
|
20640
|
+
if (clickedEditorContainer === currentEditorContainer) {
|
|
20641
|
+
controlToolbarVisible(true);
|
|
20642
|
+
}
|
|
20643
|
+
else {
|
|
20644
|
+
controlToolbarVisible(false);
|
|
20645
|
+
}
|
|
20646
|
+
}
|
|
20647
|
+
else {
|
|
20648
|
+
controlToolbarVisible(false);
|
|
20649
|
+
}
|
|
20650
|
+
};
|
|
20651
|
+
addClickHandler(toolbarClickHandler);
|
|
20652
|
+
addClickHandler(handleBlotFormatterClick);
|
|
20653
|
+
addClickHandler(() => {
|
|
20654
|
+
handleCustomLink(false);
|
|
20655
|
+
});
|
|
20656
|
+
updateHistoryState();
|
|
20657
|
+
const toolbarDom = (_a = quill.getModule('toolbar')) === null || _a === void 0 ? void 0 : _a.container;
|
|
20658
|
+
vue.nextTick(() => {
|
|
20659
|
+
const customLinkBtn = toolbarDom.querySelector('.ql-customLink');
|
|
20660
|
+
if (customLinkBtn) {
|
|
20661
|
+
customLinkBtn.addEventListener('click', (e) => {
|
|
20662
|
+
e.preventDefault();
|
|
20663
|
+
e.stopPropagation();
|
|
20664
|
+
if (canUseLink.value) {
|
|
20665
|
+
handleCustomLink(true);
|
|
20666
|
+
}
|
|
20667
|
+
});
|
|
20668
|
+
}
|
|
20669
|
+
});
|
|
20670
|
+
const tooltipInput = toolbarDom.querySelector('.ql-tooltip input');
|
|
20671
|
+
if (tooltipInput) {
|
|
20672
|
+
vue.nextTick(() => {
|
|
20673
|
+
tooltipInput.setAttribute('placeholder', props.placeholder);
|
|
20674
|
+
});
|
|
20675
|
+
}
|
|
20676
|
+
if (!props.needCollapse && props.toolbarStyle) {
|
|
20677
|
+
applyToolbarStyle();
|
|
20678
|
+
}
|
|
20679
|
+
applyEditorStyle();
|
|
20680
|
+
if (props.enableImageResize) {
|
|
20681
|
+
configureBlotFormatter();
|
|
20682
|
+
}
|
|
20683
|
+
ctx.emit('ready', quill);
|
|
20684
|
+
};
|
|
20572
20685
|
const composeOptions = () => {
|
|
20573
20686
|
const clientOptions = {};
|
|
20574
20687
|
clientOptions.theme = 'snow';
|
|
@@ -20624,6 +20737,11 @@
|
|
|
20624
20737
|
clientOptions.modules = Object.assign({}, clientOptions.modules, blotFormatterConfig.modules);
|
|
20625
20738
|
}
|
|
20626
20739
|
}
|
|
20740
|
+
else {
|
|
20741
|
+
if (clientOptions.modules) {
|
|
20742
|
+
delete clientOptions.modules.blotFormatter;
|
|
20743
|
+
}
|
|
20744
|
+
}
|
|
20627
20745
|
return Object.assign({}, props.globalOptions, props.options, clientOptions);
|
|
20628
20746
|
};
|
|
20629
20747
|
const maybeClone = (delta) => {
|
|
@@ -20784,6 +20902,14 @@
|
|
|
20784
20902
|
const focus = () => {
|
|
20785
20903
|
quill === null || quill === void 0 ? void 0 : quill.focus();
|
|
20786
20904
|
};
|
|
20905
|
+
const reinit = () => {
|
|
20906
|
+
vue.nextTick(() => {
|
|
20907
|
+
var _a;
|
|
20908
|
+
if (!ctx.slots.toolbar && quill)
|
|
20909
|
+
(_a = quill.getModule('toolbar')) === null || _a === void 0 ? void 0 : _a.container.remove();
|
|
20910
|
+
initialize();
|
|
20911
|
+
});
|
|
20912
|
+
};
|
|
20787
20913
|
const moreToolbarToolClick = (tool) => {
|
|
20788
20914
|
var _a, _b;
|
|
20789
20915
|
if (!quill)
|
|
@@ -20894,91 +21020,6 @@
|
|
|
20894
21020
|
if (quill)
|
|
20895
21021
|
quill.enable(newValue);
|
|
20896
21022
|
});
|
|
20897
|
-
const initialize = () => {
|
|
20898
|
-
var _a;
|
|
20899
|
-
if (!editor.value)
|
|
20900
|
-
return;
|
|
20901
|
-
if (props.enableImageResize) {
|
|
20902
|
-
registerBlotFormatter();
|
|
20903
|
-
}
|
|
20904
|
-
options = composeOptions();
|
|
20905
|
-
setIcons();
|
|
20906
|
-
quill = new Quill(editor.value, options);
|
|
20907
|
-
setQuill(quill);
|
|
20908
|
-
setLinkQuill(quill);
|
|
20909
|
-
controlToolbarVisible(false);
|
|
20910
|
-
setContents(props.content);
|
|
20911
|
-
quill.on('text-change', handleTextChange);
|
|
20912
|
-
quill.on('selection-change', handleSelectionChange);
|
|
20913
|
-
quill.on('editor-change', handleEditorChange);
|
|
20914
|
-
quill.on('text-change', updateHistoryState);
|
|
20915
|
-
quill.on('selection-change', updateHistoryState);
|
|
20916
|
-
addLinkClickListener();
|
|
20917
|
-
const toolbarClickHandler = (event) => {
|
|
20918
|
-
var _a;
|
|
20919
|
-
const target = event.target;
|
|
20920
|
-
const clickedEditorContainer = target.closest('.quill-editor-container');
|
|
20921
|
-
if (clickedEditorContainer) {
|
|
20922
|
-
const currentEditorContainer = (_a = editor.value) === null || _a === void 0 ? void 0 : _a.closest('.quill-editor-container');
|
|
20923
|
-
if (clickedEditorContainer === currentEditorContainer) {
|
|
20924
|
-
controlToolbarVisible(true);
|
|
20925
|
-
}
|
|
20926
|
-
else {
|
|
20927
|
-
controlToolbarVisible(false);
|
|
20928
|
-
}
|
|
20929
|
-
}
|
|
20930
|
-
else {
|
|
20931
|
-
controlToolbarVisible(false);
|
|
20932
|
-
}
|
|
20933
|
-
};
|
|
20934
|
-
addClickHandler(toolbarClickHandler);
|
|
20935
|
-
addClickHandler(handleBlotFormatterClick);
|
|
20936
|
-
addClickHandler(() => {
|
|
20937
|
-
handleCustomLink(false);
|
|
20938
|
-
});
|
|
20939
|
-
updateHistoryState();
|
|
20940
|
-
const toolbarDom = (_a = quill.getModule('toolbar')) === null || _a === void 0 ? void 0 : _a.container;
|
|
20941
|
-
vue.nextTick(() => {
|
|
20942
|
-
const customLinkBtn = toolbarDom.querySelector('.ql-customLink');
|
|
20943
|
-
if (customLinkBtn) {
|
|
20944
|
-
customLinkBtn.addEventListener('click', (e) => {
|
|
20945
|
-
e.preventDefault();
|
|
20946
|
-
e.stopPropagation();
|
|
20947
|
-
if (canUseLink.value) {
|
|
20948
|
-
handleCustomLink(true);
|
|
20949
|
-
}
|
|
20950
|
-
});
|
|
20951
|
-
}
|
|
20952
|
-
});
|
|
20953
|
-
const tooltipInput = toolbarDom.querySelector('.ql-tooltip input');
|
|
20954
|
-
if (tooltipInput) {
|
|
20955
|
-
vue.nextTick(() => {
|
|
20956
|
-
tooltipInput.setAttribute('placeholder', props.placeholder);
|
|
20957
|
-
});
|
|
20958
|
-
}
|
|
20959
|
-
if (!props.needCollapse && props.toolbarStyle) {
|
|
20960
|
-
applyToolbarStyle();
|
|
20961
|
-
}
|
|
20962
|
-
applyEditorStyle();
|
|
20963
|
-
if (props.enableImageResize) {
|
|
20964
|
-
configureBlotFormatter();
|
|
20965
|
-
}
|
|
20966
|
-
ctx.emit('ready', quill);
|
|
20967
|
-
};
|
|
20968
|
-
const reinit = () => {
|
|
20969
|
-
vue.nextTick(() => {
|
|
20970
|
-
var _a;
|
|
20971
|
-
if (!ctx.slots.toolbar && quill)
|
|
20972
|
-
(_a = quill.getModule('toolbar')) === null || _a === void 0 ? void 0 : _a.container.remove();
|
|
20973
|
-
initialize();
|
|
20974
|
-
});
|
|
20975
|
-
};
|
|
20976
|
-
vue.onMounted(() => {
|
|
20977
|
-
initialize();
|
|
20978
|
-
});
|
|
20979
|
-
vue.onBeforeUnmount(() => {
|
|
20980
|
-
quill = null;
|
|
20981
|
-
});
|
|
20982
21023
|
return {
|
|
20983
21024
|
editor,
|
|
20984
21025
|
editorWrapClass,
|
|
@@ -21010,7 +21051,9 @@
|
|
|
21010
21051
|
render() {
|
|
21011
21052
|
return [
|
|
21012
21053
|
vue.h('div', {
|
|
21013
|
-
class: this.editorWrapClass
|
|
21054
|
+
class: this.editorWrapClass, onClick: () => {
|
|
21055
|
+
this.handleCustomLink(false);
|
|
21056
|
+
}
|
|
21014
21057
|
}, [
|
|
21015
21058
|
this.$props.needCollapse && this.$props.editorKey && vue.h(MoreToolbar, {
|
|
21016
21059
|
editorKey: String(this.$props.editorKey),
|