vue-editify 0.1.33 → 0.1.35
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.es.js +114 -99
- 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/components/insertImage/insertImage.vue +4 -4
- package/src/components/insertVideo/insertVideo.vue +4 -4
- package/src/core/tool.ts +2 -1
- package/src/editify/editify.vue +22 -12
- package/src/index.ts +1 -1
- package/src/plugins/attachment/index.ts +3 -3
- package/src/plugins/attachment/insertAttachment/insertAttachment.vue +4 -4
package/examples/App.vue
CHANGED
@@ -6,7 +6,7 @@
|
|
6
6
|
<script setup lang="ts">
|
7
7
|
import { h, ref } from 'vue'
|
8
8
|
import { AlexElement, MenuConfigType, Editify, attachment, PluginType } from '../src/index'
|
9
|
-
const val = ref<string>('<p><
|
9
|
+
const val = ref<string>('<p><code>444</code></p>')
|
10
10
|
const editify = ref<InstanceType<typeof Editify> | null>(null)
|
11
11
|
const menuConfig = ref<MenuConfigType>({
|
12
12
|
use: true,
|
package/lib/editify.es.js
CHANGED
@@ -2680,7 +2680,11 @@ const doPaste = async function(html, text, files) {
|
|
2680
2680
|
await this.customHtmlPaste.apply(this, [elements, html]);
|
2681
2681
|
} else {
|
2682
2682
|
for (let i = 0; i < elements.length; i++) {
|
2683
|
-
|
2683
|
+
if (i == 0) {
|
2684
|
+
this.insertElement(elements[i]);
|
2685
|
+
} else {
|
2686
|
+
this.insertElement(elements[i], false);
|
2687
|
+
}
|
2684
2688
|
}
|
2685
2689
|
this.emit("pasteHtml", elements, html);
|
2686
2690
|
}
|
@@ -3927,6 +3931,9 @@ class AlexEditor {
|
|
3927
3931
|
if (parsedom == "style" || parsedom == "meta" || parsedom == "script" || parsedom == "link") {
|
3928
3932
|
return new AlexElement("text", null, null, null, null);
|
3929
3933
|
}
|
3934
|
+
if (parsedom == AlexElement.TEXT_NODE && Array.from(node.childNodes).every((childNode) => childNode.nodeType == 3)) {
|
3935
|
+
return new AlexElement("text", null, marks, styles, node.textContent);
|
3936
|
+
}
|
3930
3937
|
const block = blockParse.find((item) => item.parsedom == parsedom);
|
3931
3938
|
const inblock = inblockParse.find((item) => item.parsedom == parsedom);
|
3932
3939
|
const inline = inlineParse.find((item) => item.parsedom == parsedom);
|
@@ -4206,23 +4213,6 @@ class AlexEditor {
|
|
4206
4213
|
flatList: []
|
4207
4214
|
};
|
4208
4215
|
}
|
4209
|
-
if (this.range.anchor.element.isEqual(this.range.focus.element)) {
|
4210
|
-
const isCover = this.range.anchor.offset == 0 && this.range.focus.offset == (this.range.anchor.element.isText() ? this.range.anchor.element.textContent.length : 1);
|
4211
|
-
return {
|
4212
|
-
list: [
|
4213
|
-
{
|
4214
|
-
element: this.range.anchor.element,
|
4215
|
-
offset: isCover ? false : [this.range.anchor.offset, this.range.focus.offset]
|
4216
|
-
}
|
4217
|
-
],
|
4218
|
-
flatList: [
|
4219
|
-
{
|
4220
|
-
element: this.range.anchor.element,
|
4221
|
-
offset: isCover ? false : [this.range.anchor.offset, this.range.focus.offset]
|
4222
|
-
}
|
4223
|
-
]
|
4224
|
-
};
|
4225
|
-
}
|
4226
4216
|
const getFlatList = () => {
|
4227
4217
|
let flatList = [];
|
4228
4218
|
const anchorInStart = this.range.anchor.offset == 0;
|
@@ -4238,60 +4228,78 @@ class AlexEditor {
|
|
4238
4228
|
if (startIndex > 0 || endIndex < elements.length - 1) {
|
4239
4229
|
elements = elements.slice(startIndex, endIndex + 1);
|
4240
4230
|
}
|
4241
|
-
|
4242
|
-
|
4243
|
-
|
4244
|
-
|
4245
|
-
|
4246
|
-
element: this.range.anchor.element,
|
4231
|
+
if (this.range.anchor.element.isEqual(this.range.focus.element)) {
|
4232
|
+
if (anchorInStart && focusInEnd) {
|
4233
|
+
flatList = elements.map((element2) => {
|
4234
|
+
return {
|
4235
|
+
element: element2,
|
4247
4236
|
offset: false
|
4248
|
-
}
|
4249
|
-
}
|
4250
|
-
|
4237
|
+
};
|
4238
|
+
});
|
4239
|
+
} else {
|
4240
|
+
flatList = [
|
4241
|
+
{
|
4251
4242
|
element: this.range.anchor.element,
|
4252
|
-
offset: [this.range.anchor.offset, this.range.
|
4253
|
-
}
|
4254
|
-
|
4255
|
-
}
|
4256
|
-
|
4257
|
-
|
4258
|
-
|
4259
|
-
if (
|
4260
|
-
|
4261
|
-
|
4262
|
-
|
4263
|
-
|
4264
|
-
|
4265
|
-
|
4266
|
-
|
4267
|
-
|
4268
|
-
|
4269
|
-
|
4270
|
-
|
4271
|
-
if (
|
4272
|
-
|
4273
|
-
|
4274
|
-
|
4275
|
-
|
4276
|
-
|
4277
|
-
|
4278
|
-
|
4279
|
-
|
4280
|
-
})
|
4281
|
-
|
4282
|
-
|
4283
|
-
|
4284
|
-
|
4243
|
+
offset: [this.range.anchor.offset, this.range.focus.offset]
|
4244
|
+
}
|
4245
|
+
];
|
4246
|
+
}
|
4247
|
+
} else {
|
4248
|
+
const length = elements.length;
|
4249
|
+
for (let i = 0; i < length; i++) {
|
4250
|
+
if (this.range.anchor.element.isEqual(elements[i])) {
|
4251
|
+
if (anchorInStart) {
|
4252
|
+
flatList.push({
|
4253
|
+
element: this.range.anchor.element,
|
4254
|
+
offset: false
|
4255
|
+
});
|
4256
|
+
} else if (this.range.anchor.element.isText() && this.range.anchor.offset < this.range.anchor.element.textContent.length) {
|
4257
|
+
flatList.push({
|
4258
|
+
element: this.range.anchor.element,
|
4259
|
+
offset: [this.range.anchor.offset, this.range.anchor.element.textContent.length]
|
4260
|
+
});
|
4261
|
+
}
|
4262
|
+
} else if (elements[i].isContains(this.range.anchor.element)) {
|
4263
|
+
const isFirst = this.range.anchor.element.isFirst(elements[i]);
|
4264
|
+
const hasFocus = elements[i].isContains(this.range.focus.element);
|
4265
|
+
const isLast = this.range.focus.element.isLast(elements[i]);
|
4266
|
+
if (anchorInStart && isFirst && hasFocus && isLast && focusInEnd) {
|
4267
|
+
flatList.push({
|
4268
|
+
element: elements[i],
|
4269
|
+
offset: false
|
4270
|
+
});
|
4271
|
+
} else if (anchorInStart && isFirst && !hasFocus) {
|
4272
|
+
flatList.push({
|
4273
|
+
element: elements[i],
|
4274
|
+
offset: false
|
4275
|
+
});
|
4276
|
+
}
|
4277
|
+
} else if (this.range.focus.element.isEqual(elements[i])) {
|
4278
|
+
if (focusInEnd) {
|
4279
|
+
flatList.push({
|
4280
|
+
element: this.range.focus.element,
|
4281
|
+
offset: false
|
4282
|
+
});
|
4283
|
+
} else if (this.range.focus.offset > 0) {
|
4284
|
+
flatList.push({
|
4285
|
+
element: this.range.focus.element,
|
4286
|
+
offset: [0, this.range.focus.offset]
|
4287
|
+
});
|
4288
|
+
}
|
4289
|
+
} else if (elements[i].isContains(this.range.focus.element)) {
|
4290
|
+
const isLast = this.range.focus.element.isLast(elements[i]);
|
4291
|
+
if (isLast && focusInEnd) {
|
4292
|
+
flatList.push({
|
4293
|
+
element: elements[i],
|
4294
|
+
offset: false
|
4295
|
+
});
|
4296
|
+
}
|
4297
|
+
} else {
|
4285
4298
|
flatList.push({
|
4286
4299
|
element: elements[i],
|
4287
4300
|
offset: false
|
4288
4301
|
});
|
4289
4302
|
}
|
4290
|
-
} else {
|
4291
|
-
flatList.push({
|
4292
|
-
element: elements[i],
|
4293
|
-
offset: false
|
4294
|
-
});
|
4295
4303
|
}
|
4296
4304
|
}
|
4297
4305
|
return flatList;
|
@@ -4512,7 +4520,7 @@ class AlexEditor {
|
|
4512
4520
|
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");
|
4513
4521
|
}
|
4514
4522
|
}
|
4515
|
-
const version$2 = "1.3.
|
4523
|
+
const version$2 = "1.3.35";
|
4516
4524
|
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;");
|
4517
4525
|
const number = {
|
4518
4526
|
/**
|
@@ -17861,7 +17869,8 @@ const pasteKeepData = {
|
|
17861
17869
|
//粘贴html时非文本元素保留的样式
|
17862
17870
|
styles: {
|
17863
17871
|
"text-indent": "*",
|
17864
|
-
"text-align": "*"
|
17872
|
+
"text-align": "*",
|
17873
|
+
"line-height": "*"
|
17865
17874
|
}
|
17866
17875
|
};
|
17867
17876
|
const mergeObject = function(o1, o2) {
|
@@ -23003,16 +23012,16 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
|
|
23003
23012
|
filterFiles.push(file2);
|
23004
23013
|
}
|
23005
23014
|
if (filterFiles.length) {
|
23006
|
-
let
|
23015
|
+
let urls = [];
|
23007
23016
|
if (typeof props.customUpload == "function") {
|
23008
|
-
|
23017
|
+
urls = await props.customUpload(filterFiles) || [];
|
23009
23018
|
} else {
|
23010
23019
|
for (let i = 0; i < filterFiles.length; i++) {
|
23011
23020
|
const url = await file.dataFileToBase64(filterFiles[i]);
|
23012
|
-
|
23021
|
+
urls.push(url);
|
23013
23022
|
}
|
23014
23023
|
}
|
23015
|
-
emits("insert",
|
23024
|
+
emits("insert", urls);
|
23016
23025
|
}
|
23017
23026
|
inputEle.value = "";
|
23018
23027
|
};
|
@@ -23073,7 +23082,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
|
|
23073
23082
|
};
|
23074
23083
|
}
|
23075
23084
|
});
|
23076
|
-
const InsertImage = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__scopeId", "data-v-
|
23085
|
+
const InsertImage = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__scopeId", "data-v-b63a5bff"]]);
|
23077
23086
|
const InsertVideoProps = {
|
23078
23087
|
//主题色
|
23079
23088
|
color: {
|
@@ -23198,16 +23207,16 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
|
|
23198
23207
|
filterFiles.push(file2);
|
23199
23208
|
}
|
23200
23209
|
if (filterFiles.length) {
|
23201
|
-
let
|
23210
|
+
let urls = [];
|
23202
23211
|
if (typeof props.customUpload == "function") {
|
23203
|
-
|
23212
|
+
urls = await props.customUpload(filterFiles) || [];
|
23204
23213
|
} else {
|
23205
23214
|
for (let i = 0; i < filterFiles.length; i++) {
|
23206
23215
|
const url = await file.dataFileToBase64(filterFiles[i]);
|
23207
|
-
|
23216
|
+
urls.push(url);
|
23208
23217
|
}
|
23209
23218
|
}
|
23210
|
-
emits("insert",
|
23219
|
+
emits("insert", urls);
|
23211
23220
|
}
|
23212
23221
|
inputEle.value = "";
|
23213
23222
|
};
|
@@ -23268,7 +23277,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
|
|
23268
23277
|
};
|
23269
23278
|
}
|
23270
23279
|
});
|
23271
|
-
const InsertVideo = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__scopeId", "data-v-
|
23280
|
+
const InsertVideo = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__scopeId", "data-v-4383bae9"]]);
|
23272
23281
|
const InsertTableProps = {
|
23273
23282
|
//主题色
|
23274
23283
|
color: {
|
@@ -25487,28 +25496,34 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
|
|
25487
25496
|
AlexElement.flatElements(elements).forEach((el) => {
|
25488
25497
|
let marks = {};
|
25489
25498
|
let styles = {};
|
25490
|
-
if (el.
|
25491
|
-
|
25492
|
-
|
25493
|
-
marks[key]
|
25499
|
+
if (!el.isText()) {
|
25500
|
+
if (el.hasMarks()) {
|
25501
|
+
for (let key in keepMarks) {
|
25502
|
+
if (el.marks.hasOwnProperty(key) && (Array.isArray(keepMarks[key]) && keepMarks[key].includes(el.parsedom) || keepMarks[key] == "*")) {
|
25503
|
+
marks[key] = el.marks[key];
|
25504
|
+
}
|
25494
25505
|
}
|
25506
|
+
el.marks = marks;
|
25495
25507
|
}
|
25496
|
-
el.
|
25497
|
-
|
25498
|
-
|
25499
|
-
|
25500
|
-
|
25501
|
-
styles[key] = el.styles[key];
|
25508
|
+
if (el.hasStyles()) {
|
25509
|
+
for (let key in keepStyles) {
|
25510
|
+
if (el.styles.hasOwnProperty(key) && (Array.isArray(keepStyles[key]) && keepStyles[key].includes(el.parsedom) || keepStyles[key] == "*")) {
|
25511
|
+
styles[key] = el.styles[key];
|
25512
|
+
}
|
25502
25513
|
}
|
25514
|
+
el.styles = styles;
|
25503
25515
|
}
|
25504
|
-
el.styles = styles;
|
25505
25516
|
}
|
25506
25517
|
});
|
25507
25518
|
if (typeof props.customHtmlPaste == "function") {
|
25508
25519
|
await props.customHtmlPaste(elements);
|
25509
25520
|
} else {
|
25510
25521
|
for (let i = 0; i < elements.length; i++) {
|
25511
|
-
|
25522
|
+
if (i == 0) {
|
25523
|
+
editor.value.insertElement(elements[i]);
|
25524
|
+
} else {
|
25525
|
+
editor.value.insertElement(elements[i], false);
|
25526
|
+
}
|
25512
25527
|
}
|
25513
25528
|
}
|
25514
25529
|
};
|
@@ -25870,7 +25885,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
|
|
25870
25885
|
};
|
25871
25886
|
}
|
25872
25887
|
});
|
25873
|
-
const Editify = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-
|
25888
|
+
const Editify = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-4c71ae18"]]);
|
25874
25889
|
const InsertAttachmentProps = {
|
25875
25890
|
//主题色
|
25876
25891
|
color: {
|
@@ -26006,16 +26021,16 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
26006
26021
|
filterFiles.push(file2);
|
26007
26022
|
}
|
26008
26023
|
if (filterFiles.length) {
|
26009
|
-
let
|
26024
|
+
let urls = [];
|
26010
26025
|
if (typeof props.customUpload == "function") {
|
26011
|
-
|
26026
|
+
urls = await props.customUpload(filterFiles) || [];
|
26012
26027
|
} else {
|
26013
26028
|
for (let i = 0; i < filterFiles.length; i++) {
|
26014
26029
|
const url = await file.dataFileToBase64(filterFiles[i]);
|
26015
|
-
|
26030
|
+
urls.push(url);
|
26016
26031
|
}
|
26017
26032
|
}
|
26018
|
-
emits("insert", attachmentName.value,
|
26033
|
+
emits("insert", attachmentName.value, urls);
|
26019
26034
|
}
|
26020
26035
|
fileInputRef.value.value = "";
|
26021
26036
|
};
|
@@ -26112,7 +26127,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
26112
26127
|
};
|
26113
26128
|
}
|
26114
26129
|
});
|
26115
|
-
const InsertAttachment = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-
|
26130
|
+
const InsertAttachment = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-52b1e545"]]);
|
26116
26131
|
const isAttachment = (element2) => {
|
26117
26132
|
if (element2.isEmpty()) {
|
26118
26133
|
return false;
|
@@ -26171,12 +26186,12 @@ const attachment = (options) => {
|
|
26171
26186
|
btnInstance.$refs.layerRef.setPosition();
|
26172
26187
|
},
|
26173
26188
|
onInsert: (name, urls) => {
|
26174
|
-
|
26189
|
+
urls = urls.filter((url) => {
|
26175
26190
|
return !!url;
|
26176
26191
|
});
|
26177
|
-
if (
|
26192
|
+
if (urls.length) {
|
26178
26193
|
const editor = editifyInstance.exposed.editor.value;
|
26179
|
-
|
26194
|
+
urls.forEach((url) => {
|
26180
26195
|
const marks = {
|
26181
26196
|
"data-attachment": url,
|
26182
26197
|
"data-attachment-name": name || editTrans("attachmentDefaultName"),
|
@@ -26257,7 +26272,7 @@ const attachment = (options) => {
|
|
26257
26272
|
const install = (app) => {
|
26258
26273
|
app.component(Editify.name, Editify);
|
26259
26274
|
};
|
26260
|
-
const version = "0.1.
|
26275
|
+
const version = "0.1.35";
|
26261
26276
|
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;");
|
26262
26277
|
export {
|
26263
26278
|
AlexElement,
|