vue-editify 0.1.22 → 0.1.23

package/src/locale/zh_CN.ts

@@ -84,5 +84,13 @@ export const zh_CN: ObjectType = {
 	alignJustify: '两端对齐',
 	defaultLineHeight: '默认行高',
 	auto: '自适应',
-	fullScreen: '全屏'
+	fullScreen: '全屏',
+
+	//插件语言配置
+	insertAttachment: '插入附件',
+	uploadAttachment: '上传附件',
+	remoteAttachment: '远程地址',
+	attachmentUrlPlaceholder: '请输入远程地址',
+	downloadAttachment: '点击下载附件',
+	attachmentDownloadName: '附件'
 }

package/src/plugins/attachment/index.ts

@@ -0,0 +1,121 @@
+import { ComponentInternalInstance, h } from 'vue'
+import { AlexEditor, AlexElement } from 'alex-editor'
+import { PluginType } from '../../core/tool'
+import Layer from '../../components/layer/layer.vue'
+import Button from '../../components/button/button.vue'
+import Icon from '../../components/icon/icon.vue'
+import InsertAttachment from './insertAttachment/insertAttachment.vue'
+import { InsertAttachmentUploadErrorType } from './insertAttachment/props'
+import { event as DapEvent, common as DapCommon } from 'dap-util'
+
+export type AttachmentOptionsType = {
+	//排序
+	sequence?: number
+	//工具提示内容
+	title?: string
+	//按钮是否显示左侧边框
+	leftBorder?: boolean
+	//按钮是否显示右侧边框
+	rightBorder?: boolean
+	//定义可选择的文件类型，默认不限制类型，设定此参数后选择文件时会自动过滤非符合的文件类型
+	accept?: 'rar' | 'zip' | 'txt' | 'image' | 'video' | 'audio' | 'html' | 'doc' | 'xml' | 'js' | 'json' | 'ppt' | 'pdf' | null
+	//支持的类型数组
+	allowedFileType?: string[]
+	//是否多选
+	multiple?: boolean
+	//选择的单个文件最大值，单位kb，不设置将不限制
+	maxSize?: number
+	//选择的单个文件最小值，单位kb，不设置将不限制
+	minSize?: number
+	//是否自定义上传附件
+	customUpload?: (files: File[]) => string[] | Promise<string[]>
+	//处理上传附件异常
+	handleError?: (error: InsertAttachmentUploadErrorType, file: File) => void
+}
+
+export const attachment = (options?: AttachmentOptionsType) => {
+	if (!DapCommon.isObject(options)) {
+		options = {}
+	}
+	const plugin: PluginType = (editifyInstance: ComponentInternalInstance, color: string | null, editTrans: (key: string) => any) => {
+		return {
+			//附件菜单项配置
+			menu: {
+				sequence: {
+					attachment: options!.sequence || 100
+				},
+				extends: {
+					attachment: {
+						type: 'select',
+						title: options!.title || editTrans('insertAttachment'),
+						leftBorder: options!.leftBorder,
+						rightBorder: options!.rightBorder,
+						default: () => h(Icon, { value: 'attachment' }),
+						layer: (_name: string, btnInstance: InstanceType<typeof Button>) =>
+							h(InsertAttachment, {
+								color: color,
+								accept: options!.accept,
+								allowedFileType: options!.allowedFileType || [],
+								multiple: !!options!.multiple,
+								maxSize: options!.maxSize,
+								minSize: options!.minSize,
+								customUpload: options!.customUpload,
+								handleError: options!.handleError,
+								onChange: () => {
+									;(<InstanceType<typeof Layer>>btnInstance.$refs.layerRef).setPosition()
+								},
+								onInsert: (url: string) => {
+									//创建元素
+									const attachmentElement = new AlexElement('closed', 'span', { 'data-attachment': url, contenteditable: 'false' }, null, null)
+									const editor = <AlexEditor>editifyInstance.exposed!.editor.value
+									//插入编辑器
+									editor.insertElement(attachmentElement)
+									//移动光标到新插入的元素
+									editor.range!.anchor.moveToEnd(attachmentElement)
+									editor.range!.focus.moveToEnd(attachmentElement)
+									editor.formatElementStack()
+									editor.domRender()
+									editor.rangeRender()
+									btnInstance.show = false
+								}
+							})
+					}
+				}
+			},
+			//找到附件元素点击下载
+			updateView: () => {
+				const editor = <AlexEditor>editifyInstance.exposed!.editor.value
+				AlexElement.flatElements(editor.stack).forEach(el => {
+					if (el.parsedom == 'span' && el.hasMarks() && el.marks!['data-attachment']) {
+						DapEvent.off(<HTMLElement>el.elm, 'click')
+						DapEvent.on(<HTMLElement>el.elm, 'click', () => {
+							const url = el.marks!['data-attachment']
+							const a = document.createElement('a')
+							a.setAttribute('href', url)
+							a.setAttribute('download', editTrans('attachmentDownloadName'))
+							a.click()
+						})
+					}
+				})
+			},
+			//span含有data-attachment的元素设为自闭合元素
+			customParseNode: (el: AlexElement) => {
+				if (el.hasMarks() && el.marks!['data-attachment'] && el.parsedom == 'span') {
+					el.type = 'closed'
+				}
+				return el
+			},
+			//span元素粘贴保留data-attachment
+			pasteKeepMarks: {
+				'data-attachment': ['span']
+			},
+			//设置元素的title属性标记
+			renderRule: (el: AlexElement) => {
+				if (el.type == 'closed' && el.hasMarks() && el.marks!['data-attachment']) {
+					el.marks!['title'] = editTrans('downloadAttachment')
+				}
+			}
+		}
+	}
+	return plugin
+}

package/src/plugins/attachment/insertAttachment/insertAttachment.less

@@ -0,0 +1,135 @@
+.editify-attachment {
+	display: block;
+	width: 280px;
+	padding: 10px 14px;
+
+	.editify-attachment-header {
+		display: flex;
+		justify-content: flex-start;
+		align-items: center;
+		width: 100%;
+		margin-bottom: 20px;
+		position: relative;
+		padding-bottom: 6px;
+
+		.editify-attachment-header-slider {
+			position: absolute;
+			width: 50px;
+			height: 2px;
+			border-radius: 2px;
+			left: 0;
+			bottom: 0;
+			transition: left 200ms;
+
+			&.editify-upload {
+				left: 5px;
+			}
+
+			&.editify-remote {
+				left: 85px;
+			}
+		}
+
+		.editify-attachment-header-item {
+			display: block;
+			text-align: center;
+			font-size: @font-size;
+			color: @font-color;
+			opacity: 0.8;
+			transition: all 200ms;
+			width: 60px;
+			overflow: hidden;
+			white-space: nowrap;
+			text-overflow: ellipsis;
+
+			&:hover {
+				opacity: 1;
+				cursor: pointer;
+			}
+
+			&:first-child {
+				margin-right: 20px;
+			}
+
+			&.editify-active {
+				opacity: 1;
+				color: @font-color-dark;
+			}
+		}
+	}
+
+	.editify-attachment-remote {
+		display: block;
+		width: 100%;
+
+		input {
+			appearance: none;
+			-webkit-appearance: none;
+			-moz-appearance: none;
+			display: block;
+			width: 100%;
+			margin: 0 0 10px 0;
+			padding: 4px 2px;
+			border: none;
+			font-size: @font-size;
+			color: @font-color;
+			border-bottom: 1px solid @border-color;
+			line-height: 1.5;
+			transition: border-color 500ms;
+			background-color: transparent;
+			outline: none;
+			box-sizing: border-box;
+
+			&::-webkit-input-placeholder,
+			&::placeholder {
+				color: @font-color-disabled;
+				font-family: inherit;
+				font-size: inherit;
+				vertical-align: middle;
+			}
+		}
+
+		.editify-attachment-remote-footer {
+			display: flex;
+			justify-content: flex-end;
+			align-items: center;
+			width: 100%;
+			font-size: @font-size;
+			opacity: 0.8;
+			transition: all 200ms;
+
+			&:hover {
+				cursor: pointer;
+				opacity: 1;
+			}
+		}
+	}
+
+	.editify-attachment-upload {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		width: 100%;
+		padding: 15px 0;
+		font-size: 36px;
+		opacity: 0.8;
+		transition: all 200ms;
+		position: relative;
+
+		&:hover {
+			cursor: pointer;
+			opacity: 1;
+		}
+
+		input {
+			opacity: 0;
+			position: absolute;
+			left: 0;
+			top: 0;
+			width: 100%;
+			height: 100%;
+			z-index: 1;
+			cursor: pointer;
+		}
+	}
+}

package/src/plugins/attachment/insertAttachment/insertAttachment.vue

@@ -0,0 +1,189 @@
+<template>
+	<div class="editify-attachment">
+		<div class="editify-attachment-header">
+			<div @click="current = 'upload'" class="editify-attachment-header-item" :class="{ 'editify-active': current == 'upload' }" :style="activeStyle('upload')">{{ $editTrans('uploadAttachment') }}</div>
+			<div @click="current = 'remote'" class="editify-attachment-header-item" :class="{ 'editify-active': current == 'remote' }" :style="activeStyle('remote')">{{ $editTrans('remoteAttachment') }}</div>
+			<div class="editify-attachment-header-slider" :class="'editify-' + current" :style="{ backgroundColor: color || '' }"></div>
+		</div>
+		<!-- 网络图片 -->
+		<div class="editify-attachment-remote" v-if="current == 'remote'">
+			<input v-model.trim="remoteUrl" :placeholder="$editTrans('attachmentUrlPlaceholder')" @blur="handleInputBlur" @focus="handleInputFocus" />
+			<div class="editify-attachment-remote-footer" :style="{ color: color || '' }">
+				<span @click="insertRemoteAttachment">{{ $editTrans('insert') }}</span>
+			</div>
+		</div>
+		<!-- 上传图片 -->
+		<div class="editify-attachment-upload" v-else>
+			<Icon value="upload"></Icon>
+			<input :multiple="multiple" :accept="acceptValue" @change="selectFile" type="file" />
+		</div>
+	</div>
+</template>
+<script setup lang="ts">
+import { file as DapFile } from 'dap-util'
+import Icon from '../../../components/icon/icon.vue'
+import { InsertAttachmentProps } from './props'
+import { computed, inject, ref, watch } from 'vue'
+import { ObjectType } from '../../../core/tool'
+
+defineOptions({
+	name: 'InsertAttachment'
+})
+const props = defineProps(InsertAttachmentProps)
+const emits = defineEmits(['change', 'insert'])
+
+const $editTrans = inject<(key: string) => any>('$editTrans')!
+
+//当前展示的面板，取值remote和upload
+const current = ref<'remote' | 'upload'>('upload')
+//远程图片链接
+const remoteUrl = ref<string>('')
+
+const activeStyle = computed<(name: 'remote' | 'upload') => ObjectType>(() => {
+	return (name: 'remote' | 'upload') => {
+		if (current.value == name) {
+			return {
+				color: props.color
+			}
+		}
+		return {}
+	}
+})
+const acceptValue = computed<string | undefined>(() => {
+	if (props.accept === 'rar') {
+		return 'application/x-rar-compressed'
+	}
+	if (props.accept === 'zip') {
+		return 'application/x-zip-compressed'
+	}
+	if (props.accept === 'txt') {
+		return 'text/plain'
+	}
+	if (props.accept === 'image') {
+		return 'image/*'
+	}
+	if (props.accept === 'video') {
+		return 'video/*'
+	}
+	if (props.accept === 'audio') {
+		return 'aduio/*'
+	}
+	if (props.accept === 'html') {
+		return 'text/html'
+	}
+	if (props.accept === 'doc') {
+		return 'application/msword'
+	}
+	if (props.accept === 'xml') {
+		return 'text/xml'
+	}
+	if (props.accept === 'js') {
+		return 'text/javascript'
+	}
+	if (props.accept === 'json') {
+		return 'application/json'
+	}
+	if (props.accept === 'ppt') {
+		return 'application/vnd.ms-powerpoint'
+	}
+	if (props.accept === 'pdf') {
+		return 'application/pdf'
+	}
+})
+
+//获取文件后缀
+const getSuffix = (file: File) => {
+	const index = file.name.lastIndexOf('.')
+	if (index <= 0) {
+		return ''
+	}
+	return file.name.substring(index + 1)
+}
+//输入框获取焦点
+const handleInputFocus = (e: Event) => {
+	if (props.color) {
+		;(<HTMLInputElement>e.currentTarget).style.borderColor = props.color
+	}
+}
+//输入框失去焦点
+const handleInputBlur = (e: Event) => {
+	;(<HTMLInputElement>e.currentTarget).style.borderColor = ''
+}
+//插入网络文件
+const insertRemoteAttachment = () => {
+	emits('insert', remoteUrl.value)
+}
+//选择文件
+const selectFile = async (e: Event) => {
+	const inputEle = <HTMLInputElement>e.currentTarget
+	const files = inputEle.files
+	if (!files || !files.length) {
+		return
+	}
+	let filterFiles = []
+	for (let i = 0; i < files.length; i++) {
+		const file = files[i]
+		const suffix = getSuffix(file)
+		const isMatch =
+			props.allowedFileType && Array.isArray(props.allowedFileType) && props.allowedFileType.length
+				? props.allowedFileType.some(item => {
+						return item.toLocaleLowerCase() == suffix.toLocaleLowerCase()
+				  })
+				: true
+		//后缀不符合
+		if (!isMatch) {
+			//如果自定义了异常处理
+			if (typeof props.handleError == 'function') {
+				props.handleError('suffixError', file)
+			}
+			continue
+		}
+		//超过最大值
+		if (props.maxSize && file.size / 1024 > props.maxSize) {
+			//如果自定义了异常处理
+			if (typeof props.handleError == 'function') {
+				props.handleError('maxSizeError', file)
+			}
+			continue
+		}
+		//没达到最小值
+		if (props.minSize && file.size / 1024 < props.minSize) {
+			//如果自定义了异常处理
+			if (typeof props.handleError == 'function') {
+				props.handleError('minSizeError', file)
+			}
+			continue
+		}
+		filterFiles.push(file)
+	}
+	//有文件可上传
+	if (filterFiles.length) {
+		let attachments = []
+		//自定义上传方法
+		if (typeof props.customUpload == 'function') {
+			attachments = (await props.customUpload(filterFiles)) || []
+		}
+		//默认上传方法
+		else {
+			for (let i = 0; i < filterFiles.length; i++) {
+				const url = await DapFile.dataFileToBase64(filterFiles[i])
+				attachments.push(url)
+			}
+		}
+		attachments.forEach(url => {
+			emits('insert', url)
+		})
+	}
+	//清空文件选择框
+	inputEle.value = ''
+}
+
+//监听current变更触发change事件
+watch(
+	() => current.value,
+	() => {
+		emits('change')
+	}
+)
+</script>
+<style scoped src="./insertAttachment.less"></style>

package/src/plugins/attachment/insertAttachment/props.ts

@@ -0,0 +1,48 @@
+import { ExtractPublicPropTypes, PropType } from 'vue'
+
+export type InsertAttachmentUploadErrorType = 'suffixError' | 'maxSizeError' | 'minSizeError'
+
+export const InsertAttachmentProps = {
+	//主题色
+	color: {
+		type: String as PropType<string | null>,
+		default: ''
+	},
+	//可选择的文件类型
+	accept: {
+		type: String as PropType<'rar' | 'zip' | 'txt' | 'image' | 'video' | 'audio' | 'html' | 'doc' | 'xml' | 'js' | 'json' | 'ppt' | 'pdf' | null>,
+		default: null
+	},
+	//支持的类型数组
+	allowedFileType: {
+		type: Array as PropType<string[]>,
+		default: null
+	},
+	//是否支持多选
+	multiple: {
+		type: Boolean,
+		default: false
+	},
+	//单个文件最大值
+	maxSize: {
+		type: Number,
+		default: null
+	},
+	//单个文件最小值
+	minSize: {
+		type: Number,
+		default: null
+	},
+	//是否自定义上传附件
+	customUpload: {
+		type: Function as PropType<(files: File[]) => string[] | Promise<string[]>>,
+		default: null
+	},
+	//处理上传附件异常
+	handleError: {
+		type: Function as PropType<(error: InsertAttachmentUploadErrorType, file: File) => void>,
+		default: null
+	}
+}
+
+export type InsertAttachmentPropsType = ExtractPublicPropTypes<typeof InsertAttachmentProps>