vue-editify 0.1.44 → 0.1.45
Sign up to get free protection for your applications and to get access to all the features.
- package/examples/App.vue +1 -1
- package/lib/editify/props.d.ts +1 -1
- package/lib/editify.es.js +121 -61
- package/lib/editify.umd.js +1 -1
- package/lib/index.d.ts +1 -1
- package/lib/style.css +1 -1
- package/package.json +2 -2
- package/src/editify/editify.less +6 -0
- package/src/editify/editify.vue +124 -57
- package/src/editify/props.ts +1 -1
- package/src/icon/iconfont.ttf +0 -0
- package/src/icon/iconfont.woff +0 -0
- package/src/index.ts +1 -1
package/examples/App.vue
CHANGED
@@ -45,7 +45,7 @@
|
|
45
45
|
<script setup lang="ts">
|
46
46
|
import { h, ref } from 'vue'
|
47
47
|
import { AlexElement, MenuConfigType, Editify, attachment, PluginType, mathformula, ToolbarConfigType, getMatchElementsByRange } from '../src/index'
|
48
|
-
const val = ref<string>('<table><tbody><tr><td><br></td><td><br></td><td><br></td><td><br></td><td><br></td></tr><tr><td><br></td><td><br></td><td><br></td><td><br></td><td><br></td></tr><tr><td><br></td><td><br></td><td><br></td><td><br></td><td><br></td></tr><tr><td><br></td><td><br></td><td><br></td><td><br></td><td><br></td></tr><tr><td><br></td><td><br></td><td><br></td><td><br></td><td><br></td></tr></tbody></table>')
|
48
|
+
const val = ref<string>('<img src="https://www.ling0523.cn/images/image_1_1701871044699.jpg" /><table><colgroup><col width="10000px" /><col/><col/><col/><col/></colgroup><tbody><tr><td><br></td><td><br></td><td><br></td><td><br></td><td><br></td></tr><tr><td><br></td><td><br></td><td><br></td><td><br></td><td><br></td></tr><tr><td><br></td><td><br></td><td><br></td><td><br></td><td><br></td></tr><tr><td><br></td><td><br></td><td><br></td><td><br></td><td><br></td></tr><tr><td><br></td><td><br></td><td><br></td><td><br></td><td><br></td></tr></tbody></table>')
|
49
49
|
|
50
50
|
const editify = ref<InstanceType<typeof Editify> | null>(null)
|
51
51
|
const menuConfig = ref<MenuConfigType>({
|
package/lib/editify/props.d.ts
CHANGED
@@ -3,7 +3,7 @@ import { PluginType, MenuConfigType, ObjectType, ToolbarConfigType } from '../co
|
|
3
3
|
import { AlexElement } from 'alex-editor';
|
4
4
|
import { LocaleType } from '../locale';
|
5
5
|
|
6
|
-
export type
|
6
|
+
export type EditifyResizeParamsType = {
|
7
7
|
element: AlexElement | null;
|
8
8
|
start: number;
|
9
9
|
};
|
package/lib/editify.es.js
CHANGED
@@ -2786,17 +2786,17 @@ const setRecentlyPoint = function(point) {
|
|
2786
2786
|
const nextElement = this.getNextElementOfPoint(point);
|
2787
2787
|
const block = point.element.getBlock();
|
2788
2788
|
const inblock = point.element.getInblock();
|
2789
|
-
if (previousElement &&
|
2789
|
+
if (previousElement && inblock && inblock.isContains(previousElement)) {
|
2790
2790
|
point.moveToEnd(previousElement);
|
2791
|
-
} else if (nextElement &&
|
2791
|
+
} else if (nextElement && inblock && inblock.isContains(nextElement)) {
|
2792
2792
|
point.moveToStart(nextElement);
|
2793
|
-
} else if (previousElement &&
|
2793
|
+
} else if (previousElement && block.isContains(previousElement)) {
|
2794
2794
|
point.moveToEnd(previousElement);
|
2795
|
-
} else if (nextElement &&
|
2795
|
+
} else if (nextElement && block.isContains(nextElement)) {
|
2796
2796
|
point.moveToStart(nextElement);
|
2797
|
-
} else if (previousElement
|
2797
|
+
} else if (previousElement) {
|
2798
2798
|
point.moveToEnd(previousElement);
|
2799
|
-
} else if (nextElement
|
2799
|
+
} else if (nextElement) {
|
2800
2800
|
point.moveToStart(nextElement);
|
2801
2801
|
}
|
2802
2802
|
};
|
@@ -4200,6 +4200,9 @@ class AlexEditor {
|
|
4200
4200
|
if (child.isEmpty()) {
|
4201
4201
|
continue;
|
4202
4202
|
}
|
4203
|
+
if (!child.isText() && AlexElement.VOID_NODES.includes(child.parsedom)) {
|
4204
|
+
continue;
|
4205
|
+
}
|
4203
4206
|
if (child.isText() || child.isClosed()) {
|
4204
4207
|
el = child;
|
4205
4208
|
break;
|
@@ -4217,6 +4220,9 @@ class AlexEditor {
|
|
4217
4220
|
if (nextElement.isEmpty()) {
|
4218
4221
|
return fn(nextElement);
|
4219
4222
|
}
|
4223
|
+
if (!nextElement.isText() && AlexElement.VOID_NODES.includes(nextElement.parsedom)) {
|
4224
|
+
return fn(nextElement);
|
4225
|
+
}
|
4220
4226
|
if (nextElement.isText() || nextElement.isClosed()) {
|
4221
4227
|
return nextElement;
|
4222
4228
|
}
|
@@ -4552,7 +4558,7 @@ class AlexEditor {
|
|
4552
4558
|
event$1.off(this.$el, "beforeinput.alex_editor compositionstart.alex_editor compositionupdate.alex_editor compositionend.alex_editor keydown.alex_editor cut.alex_editor paste.alex_editor copy.alex_editor dragstart.alex_editor drop.alex_editor focus.alex_editor blur.alex_editor");
|
4553
4559
|
}
|
4554
4560
|
}
|
4555
|
-
const version$2 = "1.4.
|
4561
|
+
const version$2 = "1.4.8";
|
4556
4562
|
console.log(`%c alex-editor %c v${version$2} `, "padding: 2px 1px; border-radius: 3px 0 0 3px; color: #fff; background: #606060; font-weight: bold;", "padding: 2px 1px; border-radius: 0 3px 3px 0; color: #fff; background: #42c02e; font-weight: bold;");
|
4557
4563
|
const number = {
|
4558
4564
|
/**
|
@@ -25956,7 +25962,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
|
|
25956
25962
|
const isModelChange = ref(false);
|
25957
25963
|
const isInputChinese = ref(false);
|
25958
25964
|
const rangeUpdateTimer = ref(null);
|
25959
|
-
const
|
25965
|
+
const resizeParams = ref({
|
25960
25966
|
element: null,
|
25961
25967
|
//被拖拽的td
|
25962
25968
|
start: 0
|
@@ -26210,25 +26216,34 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
|
|
26210
26216
|
if (props.disabled) {
|
26211
26217
|
return;
|
26212
26218
|
}
|
26213
|
-
|
26214
|
-
|
26219
|
+
const elm = e.target;
|
26220
|
+
const event2 = e;
|
26221
|
+
if (element.isContains(contentRef.value, elm)) {
|
26215
26222
|
const key = data.get(elm, "data-alex-editor-key");
|
26216
26223
|
if (key) {
|
26217
26224
|
const element$12 = editor.value.getElementByKey(key);
|
26218
|
-
if (element$12
|
26219
|
-
|
26220
|
-
|
26221
|
-
|
26222
|
-
|
26223
|
-
|
26224
|
-
|
26225
|
-
|
26226
|
-
|
26225
|
+
if (element$12) {
|
26226
|
+
if (element$12.parsedom == "td") {
|
26227
|
+
const length = element$12.parent.children.length;
|
26228
|
+
if (element$12.parent.children[length - 1].isEqual(element$12)) {
|
26229
|
+
return;
|
26230
|
+
}
|
26231
|
+
const rect = element.getElementBounding(elm);
|
26232
|
+
if (event2.pageX >= Math.abs(rect.left + elm.offsetWidth - 5) && event2.pageX <= Math.abs(rect.left + elm.offsetWidth + 5)) {
|
26233
|
+
resizeParams.value.element = element$12;
|
26234
|
+
resizeParams.value.start = event2.pageX;
|
26235
|
+
}
|
26236
|
+
} else if (["img", "video"].includes(element$12.parsedom)) {
|
26237
|
+
const rect = element.getElementBounding(elm);
|
26238
|
+
if (event2.pageX >= Math.abs(rect.left + elm.offsetWidth - 10) && event2.pageX <= Math.abs(rect.left + elm.offsetWidth) || event2.pageX >= Math.abs(rect.left) && event2.pageX <= Math.abs(rect.left + 10)) {
|
26239
|
+
resizeParams.value.element = element$12;
|
26240
|
+
resizeParams.value.start = event2.pageX;
|
26241
|
+
}
|
26227
26242
|
}
|
26228
26243
|
}
|
26229
26244
|
}
|
26230
26245
|
}
|
26231
|
-
if (!element.isContains(elRef.value,
|
26246
|
+
if (!element.isContains(elRef.value, elm) && !isSourceView.value) {
|
26232
26247
|
canUseMenu.value = false;
|
26233
26248
|
}
|
26234
26249
|
};
|
@@ -26236,63 +26251,99 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
|
|
26236
26251
|
if (props.disabled) {
|
26237
26252
|
return;
|
26238
26253
|
}
|
26239
|
-
if (!
|
26254
|
+
if (!resizeParams.value.element) {
|
26240
26255
|
return;
|
26241
26256
|
}
|
26242
|
-
const
|
26243
|
-
if (
|
26244
|
-
|
26257
|
+
const event2 = e;
|
26258
|
+
if (resizeParams.value.element.parsedom == "td") {
|
26259
|
+
const tables = getMatchElementsByRange(editor.value, dataRangeCaches.value, { parsedom: "table" });
|
26260
|
+
if (tables.length != 1) {
|
26261
|
+
return;
|
26262
|
+
}
|
26263
|
+
const colgroup = tables[0].children.find((item) => {
|
26264
|
+
return item.parsedom == "colgroup";
|
26265
|
+
});
|
26266
|
+
const index = resizeParams.value.element.parent.children.findIndex((el) => {
|
26267
|
+
return el.isEqual(resizeParams.value.element);
|
26268
|
+
});
|
26269
|
+
const width = `${resizeParams.value.element.elm.offsetWidth + event2.pageX - resizeParams.value.start}`;
|
26270
|
+
colgroup.children[index].marks["width"] = width;
|
26271
|
+
colgroup.children[index].elm.setAttribute("width", width);
|
26272
|
+
resizeParams.value.start = event2.pageX;
|
26273
|
+
} else if (["img", "video"].includes(resizeParams.value.element.parsedom)) {
|
26274
|
+
const width = `${resizeParams.value.element.elm.offsetWidth + event2.pageX - resizeParams.value.start}px`;
|
26275
|
+
if (resizeParams.value.element.hasStyles()) {
|
26276
|
+
resizeParams.value.element.styles["width"] = width;
|
26277
|
+
} else {
|
26278
|
+
resizeParams.value.element.styles = {
|
26279
|
+
width
|
26280
|
+
};
|
26281
|
+
}
|
26282
|
+
resizeParams.value.element.elm.style.width = width;
|
26283
|
+
if (resizeParams.value.element.parsedom == "video") {
|
26284
|
+
setVideoHeight();
|
26285
|
+
}
|
26286
|
+
resizeParams.value.start = event2.pageX;
|
26245
26287
|
}
|
26246
|
-
const colgroup = tables[0].children.find((item) => {
|
26247
|
-
return item.parsedom == "colgroup";
|
26248
|
-
});
|
26249
|
-
const index = tableColumnResizeParams.value.element.parent.children.findIndex((el) => {
|
26250
|
-
return el.isEqual(tableColumnResizeParams.value.element);
|
26251
|
-
});
|
26252
|
-
const width = `${tableColumnResizeParams.value.element.elm.offsetWidth + e.pageX - tableColumnResizeParams.value.start}`;
|
26253
|
-
colgroup.children[index].marks["width"] = width;
|
26254
|
-
colgroup.children[index].elm.setAttribute("width", width);
|
26255
|
-
tableColumnResizeParams.value.start = e.pageX;
|
26256
26288
|
};
|
26257
26289
|
const documentMouseUp = () => {
|
26258
26290
|
if (props.disabled) {
|
26259
26291
|
return;
|
26260
26292
|
}
|
26261
|
-
if (!
|
26293
|
+
if (!resizeParams.value.element) {
|
26262
26294
|
return;
|
26263
26295
|
}
|
26264
|
-
|
26265
|
-
|
26266
|
-
|
26267
|
-
|
26268
|
-
|
26269
|
-
|
26270
|
-
|
26271
|
-
|
26272
|
-
|
26273
|
-
|
26274
|
-
|
26275
|
-
|
26276
|
-
|
26277
|
-
|
26278
|
-
|
26279
|
-
|
26296
|
+
if (resizeParams.value.element.parsedom == "td") {
|
26297
|
+
const tables = getMatchElementsByRange(editor.value, dataRangeCaches.value, { parsedom: "table" });
|
26298
|
+
if (tables.length != 1) {
|
26299
|
+
return;
|
26300
|
+
}
|
26301
|
+
const colgroup = tables[0].children.find((item) => {
|
26302
|
+
return item.parsedom == "colgroup";
|
26303
|
+
});
|
26304
|
+
const index = resizeParams.value.element.parent.children.findIndex((el) => {
|
26305
|
+
return el.isEqual(resizeParams.value.element);
|
26306
|
+
});
|
26307
|
+
const width = parseFloat(colgroup.children[index].marks["width"]);
|
26308
|
+
if (!isNaN(width)) {
|
26309
|
+
colgroup.children[index].marks["width"] = `${Number((width / resizeParams.value.element.parent.elm.offsetWidth * 100).toFixed(2))}%`;
|
26310
|
+
editor.value.formatElementStack();
|
26311
|
+
editor.value.domRender();
|
26312
|
+
editor.value.rangeRender();
|
26313
|
+
}
|
26314
|
+
resizeParams.value.element = null;
|
26315
|
+
resizeParams.value.start = 0;
|
26316
|
+
} else if (["img", "video"].includes(resizeParams.value.element.parsedom)) {
|
26317
|
+
const width = parseFloat(resizeParams.value.element.styles["width"]);
|
26318
|
+
if (!isNaN(width)) {
|
26319
|
+
if (resizeParams.value.element.hasStyles()) {
|
26320
|
+
resizeParams.value.element.styles["width"] = `${Number((width / element.width(contentRef.value) * 100).toFixed(2))}%`;
|
26321
|
+
} else {
|
26322
|
+
resizeParams.value.element.styles = {
|
26323
|
+
width: `${Number((width / element.width(contentRef.value) * 100).toFixed(2))}%`
|
26324
|
+
};
|
26325
|
+
}
|
26326
|
+
editor.value.formatElementStack();
|
26327
|
+
editor.value.domRender();
|
26328
|
+
editor.value.rangeRender();
|
26329
|
+
}
|
26330
|
+
resizeParams.value.element = null;
|
26331
|
+
resizeParams.value.start = 0;
|
26280
26332
|
}
|
26281
|
-
tableColumnResizeParams.value.element = null;
|
26282
|
-
tableColumnResizeParams.value.start = 0;
|
26283
26333
|
};
|
26284
26334
|
const documentClick = (e) => {
|
26285
26335
|
if (props.disabled) {
|
26286
26336
|
return;
|
26287
26337
|
}
|
26288
|
-
|
26289
|
-
|
26338
|
+
const elm = e.target;
|
26339
|
+
const event2 = e;
|
26340
|
+
if (element.isContains(contentRef.value, elm)) {
|
26290
26341
|
const key = data.get(elm, "data-alex-editor-key");
|
26291
26342
|
if (key) {
|
26292
26343
|
const element$12 = editor.value.getElementByKey(key);
|
26293
26344
|
if (isTask(element$12)) {
|
26294
26345
|
const rect = element.getElementBounding(elm);
|
26295
|
-
if (
|
26346
|
+
if (event2.pageX >= Math.abs(rect.left) && event2.pageX <= Math.abs(rect.left + 16) && event2.pageY >= Math.abs(rect.top + elm.offsetHeight / 2 - 8) && event2.pageY <= Math.abs(rect.top + elm.offsetHeight / 2 + 8)) {
|
26296
26347
|
if (element$12.marks["data-editify-task"] == "checked") {
|
26297
26348
|
element$12.marks["data-editify-task"] = "uncheck";
|
26298
26349
|
} else {
|
@@ -26326,6 +26377,9 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
|
|
26326
26377
|
if (el.marks["disabled"]) {
|
26327
26378
|
marks["disabled"] = el.marks["disabled"];
|
26328
26379
|
}
|
26380
|
+
if (el.parsedom == "img" && el.marks["alt"]) {
|
26381
|
+
marks["alt"] = el.marks["alt"];
|
26382
|
+
}
|
26329
26383
|
if (["img", "video"].includes(el.parsedom) && el.marks["src"]) {
|
26330
26384
|
marks["src"] = el.marks["src"];
|
26331
26385
|
}
|
@@ -26359,6 +26413,9 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
|
|
26359
26413
|
if (el.parsedom == "div" && el.marks["data-editify-task"]) {
|
26360
26414
|
marks["data-editify-task"] = el.marks["data-editify-task"];
|
26361
26415
|
}
|
26416
|
+
if (el.parsedom == "col" && el.marks["width"]) {
|
26417
|
+
marks["width"] = el.marks["width"];
|
26418
|
+
}
|
26362
26419
|
if (["td", "th"].includes(el.parsedom) && el.marks["colspan"]) {
|
26363
26420
|
marks["colspan"] = el.marks["colspan"];
|
26364
26421
|
}
|
@@ -26370,6 +26427,9 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
|
|
26370
26427
|
}
|
26371
26428
|
}
|
26372
26429
|
if (el.hasStyles()) {
|
26430
|
+
if (["img", "video"].includes(el.parsedom) && el.styles["width"]) {
|
26431
|
+
styles2["width"] = el.styles["width"];
|
26432
|
+
}
|
26373
26433
|
if ((el.isBlock() || el.isInblock()) && el.styles["text-indent"]) {
|
26374
26434
|
styles2["text-indent"] = el.styles["text-indent"];
|
26375
26435
|
}
|
@@ -26458,9 +26518,9 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
|
|
26458
26518
|
if (props.disabled || isSourceView.value) {
|
26459
26519
|
return;
|
26460
26520
|
}
|
26461
|
-
const
|
26462
|
-
if (
|
26463
|
-
const key = Number(
|
26521
|
+
const elm = e.target;
|
26522
|
+
if (elm.nodeName.toLocaleLowerCase() == "img" || elm.nodeName.toLocaleLowerCase() == "video") {
|
26523
|
+
const key = Number(elm.getAttribute("data-editify-element"));
|
26464
26524
|
if (number.isNumber(key)) {
|
26465
26525
|
const element2 = editor.value.getElementByKey(key);
|
26466
26526
|
if (!editor.value.range) {
|
@@ -26759,7 +26819,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
|
|
26759
26819
|
};
|
26760
26820
|
}
|
26761
26821
|
});
|
26762
|
-
const Editify = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-
|
26822
|
+
const Editify = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-ee554bc1"]]);
|
26763
26823
|
const InsertAttachmentProps = {
|
26764
26824
|
//主题色
|
26765
26825
|
color: {
|
@@ -41883,7 +41943,7 @@ const attachment = (options) => {
|
|
41883
41943
|
const install = (app) => {
|
41884
41944
|
app.component(Editify.name, Editify);
|
41885
41945
|
};
|
41886
|
-
const version = "0.1.
|
41946
|
+
const version = "0.1.45";
|
41887
41947
|
console.log(`%c vue-editify %c v${version} `, "padding: 2px 1px; border-radius: 3px 0 0 3px; color: #fff; background: #606060; font-weight: bold;", "padding: 2px 1px; border-radius: 0 3px 3px 0; color: #fff; background: #42c02e; font-weight: bold;");
|
41888
41948
|
export {
|
41889
41949
|
AlexElement,
|