vue-editify 0.1.26 → 0.1.29
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/lib/core/function.d.ts +265 -0
- package/lib/core/rule.d.ts +32 -0
- package/lib/core/tool.d.ts +50 -1
- package/lib/editify/editify.vue.d.ts +2 -0
- package/lib/editify.es.js +241 -151
- package/lib/editify.umd.js +1 -1
- package/lib/hljs/index.d.ts +9 -0
- package/lib/index.d.ts +2 -2
- package/lib/locale/index.d.ts +5 -0
- package/lib/plugins/attachment/index.d.ts +20 -1
- package/lib/plugins/attachment/insertAttachment/insertAttachment.vue.d.ts +3 -3
- package/lib/plugins/attachment/insertAttachment/props.d.ts +1 -1
- package/lib/style.css +1 -1
- package/package.json +2 -2
- package/src/components/insertImage/insertImage.less +1 -0
- package/src/components/insertVideo/insertVideo.less +1 -0
- package/src/components/menu/menu.vue +45 -9
- package/src/core/function.ts +265 -42
- package/src/core/rule.ts +40 -7
- package/src/core/tool.ts +51 -9
- package/src/editify/editify.less +2 -1
- package/src/editify/editify.vue +20 -17
- package/src/hljs/index.ts +9 -2
- package/src/index.ts +6 -4
- package/src/locale/en_US.ts +3 -2
- package/src/locale/index.ts +5 -2
- package/src/locale/zh_CN.ts +4 -3
- package/src/plugins/attachment/index.ts +94 -36
- package/src/plugins/attachment/insertAttachment/insertAttachment.less +48 -19
- package/src/plugins/attachment/insertAttachment/insertAttachment.vue +26 -56
- package/src/plugins/attachment/insertAttachment/props.ts +1 -1
- package/src/plugins/attachment/images/attachment.png +0 -0
@@ -5,17 +5,21 @@
|
|
5
5
|
<div @click="current = 'remote'" class="editify-attachment-header-item" :class="{ 'editify-active': current == 'remote' }" :style="activeStyle('remote')">{{ $editTrans('remoteAttachment') }}</div>
|
6
6
|
<div class="editify-attachment-header-slider" :class="'editify-' + current" :style="{ backgroundColor: color || '' }"></div>
|
7
7
|
</div>
|
8
|
-
<!--
|
8
|
+
<!-- 远程地址 -->
|
9
9
|
<div class="editify-attachment-remote" v-if="current == 'remote'">
|
10
|
-
<input v-model.trim="
|
10
|
+
<input v-model.trim="attachmentName" :placeholder="$editTrans('attachmentNamePlaceholder')" @blur="handleInputBlur" @focus="handleInputFocus" type="text" />
|
11
|
+
<input v-model.trim="attachmentUrl" :placeholder="$editTrans('attachmentUrlPlaceholder')" @blur="handleInputBlur" @focus="handleInputFocus" type="url" />
|
11
12
|
<div class="editify-attachment-remote-footer" :style="{ color: color || '' }">
|
12
13
|
<span @click="insertRemoteAttachment">{{ $editTrans('insert') }}</span>
|
13
14
|
</div>
|
14
15
|
</div>
|
15
|
-
<!--
|
16
|
+
<!-- 上传地址 -->
|
16
17
|
<div class="editify-attachment-upload" v-else>
|
17
|
-
<
|
18
|
-
<
|
18
|
+
<input v-model.trim="attachmentName" :placeholder="$editTrans('attachmentNamePlaceholder')" @blur="handleInputBlur" @focus="handleInputFocus" type="text" />
|
19
|
+
<div class="editify-attachment-btn" @click="triggerFileInput">
|
20
|
+
<Icon value="upload"></Icon>
|
21
|
+
<input ref="fileInputRef" :multiple="multiple" :accept="accept" @change="selectFile" type="file" />
|
22
|
+
</div>
|
19
23
|
</div>
|
20
24
|
</div>
|
21
25
|
</template>
|
@@ -36,8 +40,12 @@ const $editTrans = inject<(key: string) => any>('$editTrans')!
|
|
36
40
|
|
37
41
|
//当前展示的面板,取值remote和upload
|
38
42
|
const current = ref<'remote' | 'upload'>('upload')
|
39
|
-
|
40
|
-
const
|
43
|
+
//附件名称
|
44
|
+
const attachmentName = ref<string>('')
|
45
|
+
//附件远程地址
|
46
|
+
const attachmentUrl = ref<string>('')
|
47
|
+
//文件选择框
|
48
|
+
const fileInputRef = ref<HTMLInputElement | null>(null)
|
41
49
|
|
42
50
|
const activeStyle = computed<(name: 'remote' | 'upload') => ObjectType>(() => {
|
43
51
|
return (name: 'remote' | 'upload') => {
|
@@ -49,47 +57,6 @@ const activeStyle = computed<(name: 'remote' | 'upload') => ObjectType>(() => {
|
|
49
57
|
return {}
|
50
58
|
}
|
51
59
|
})
|
52
|
-
const acceptValue = computed<string | undefined>(() => {
|
53
|
-
if (props.accept === 'rar') {
|
54
|
-
return 'application/x-rar-compressed'
|
55
|
-
}
|
56
|
-
if (props.accept === 'zip') {
|
57
|
-
return 'application/x-zip-compressed'
|
58
|
-
}
|
59
|
-
if (props.accept === 'txt') {
|
60
|
-
return 'text/plain'
|
61
|
-
}
|
62
|
-
if (props.accept === 'image') {
|
63
|
-
return 'image/*'
|
64
|
-
}
|
65
|
-
if (props.accept === 'video') {
|
66
|
-
return 'video/*'
|
67
|
-
}
|
68
|
-
if (props.accept === 'audio') {
|
69
|
-
return 'aduio/*'
|
70
|
-
}
|
71
|
-
if (props.accept === 'html') {
|
72
|
-
return 'text/html'
|
73
|
-
}
|
74
|
-
if (props.accept === 'doc') {
|
75
|
-
return 'application/msword'
|
76
|
-
}
|
77
|
-
if (props.accept === 'xml') {
|
78
|
-
return 'text/xml'
|
79
|
-
}
|
80
|
-
if (props.accept === 'js') {
|
81
|
-
return 'text/javascript'
|
82
|
-
}
|
83
|
-
if (props.accept === 'json') {
|
84
|
-
return 'application/json'
|
85
|
-
}
|
86
|
-
if (props.accept === 'ppt') {
|
87
|
-
return 'application/vnd.ms-powerpoint'
|
88
|
-
}
|
89
|
-
if (props.accept === 'pdf') {
|
90
|
-
return 'application/pdf'
|
91
|
-
}
|
92
|
-
})
|
93
60
|
|
94
61
|
//获取文件后缀
|
95
62
|
const getSuffix = (file: File) => {
|
@@ -102,21 +69,24 @@ const getSuffix = (file: File) => {
|
|
102
69
|
//输入框获取焦点
|
103
70
|
const handleInputFocus = (e: Event) => {
|
104
71
|
if (props.color) {
|
105
|
-
;(
|
72
|
+
;(e.currentTarget as HTMLInputElement).style.borderColor = props.color
|
106
73
|
}
|
107
74
|
}
|
108
75
|
//输入框失去焦点
|
109
76
|
const handleInputBlur = (e: Event) => {
|
110
|
-
;(
|
77
|
+
;(e.currentTarget as HTMLInputElement).style.borderColor = ''
|
111
78
|
}
|
112
79
|
//插入网络文件
|
113
80
|
const insertRemoteAttachment = () => {
|
114
|
-
emits('insert',
|
81
|
+
emits('insert', attachmentName.value, attachmentUrl.value)
|
82
|
+
}
|
83
|
+
//触发文件选择框
|
84
|
+
const triggerFileInput = () => {
|
85
|
+
fileInputRef.value!.click()
|
115
86
|
}
|
116
87
|
//选择文件
|
117
|
-
const selectFile = async (
|
118
|
-
const
|
119
|
-
const files = inputEle.files
|
88
|
+
const selectFile = async () => {
|
89
|
+
const files = fileInputRef.value!.files
|
120
90
|
if (!files || !files.length) {
|
121
91
|
return
|
122
92
|
}
|
@@ -171,11 +141,11 @@ const selectFile = async (e: Event) => {
|
|
171
141
|
}
|
172
142
|
}
|
173
143
|
attachments.forEach(url => {
|
174
|
-
emits('insert', url)
|
144
|
+
emits('insert', attachmentName.value, url)
|
175
145
|
})
|
176
146
|
}
|
177
147
|
//清空文件选择框
|
178
|
-
|
148
|
+
fileInputRef.value!.value = ''
|
179
149
|
}
|
180
150
|
|
181
151
|
//监听current变更触发change事件
|
@@ -10,7 +10,7 @@ export const InsertAttachmentProps = {
|
|
10
10
|
},
|
11
11
|
//可选择的文件类型
|
12
12
|
accept: {
|
13
|
-
type: String
|
13
|
+
type: String,
|
14
14
|
default: null
|
15
15
|
},
|
16
16
|
//支持的类型数组
|
Binary file
|