vue-editify 0.1.20 → 0.1.21
Sign up to get free protection for your applications and to get access to all the features.
- package/examples/App.vue +43 -3
- package/lib/core/tool.d.ts +35 -35
- package/lib/editify.es.js +34 -34
- package/lib/editify.umd.js +1 -1
- package/lib/index.d.ts +1 -1
- package/lib/style.css +1 -1
- package/package.json +1 -1
- package/src/components/button/button.less +6 -6
- package/src/components/button/button.vue +4 -4
- package/src/components/checkbox/checkbox.less +4 -4
- package/src/components/checkbox/checkbox.vue +2 -2
- package/src/components/colors/colors.less +1 -1
- package/src/components/colors/colors.vue +1 -1
- package/src/components/insertImage/insertImage.less +3 -3
- package/src/components/insertImage/insertImage.vue +3 -3
- package/src/components/insertTable/insertTable.less +1 -1
- package/src/components/insertTable/insertTable.vue +1 -1
- package/src/components/insertVideo/insertVideo.less +3 -3
- package/src/components/insertVideo/insertVideo.vue +3 -3
- package/src/components/layer/layer.less +1 -1
- package/src/components/layer/layer.vue +1 -1
- package/src/components/menu/menu.less +4 -4
- package/src/components/menu/menu.vue +2 -2
- package/src/components/tooltip/tooltip.less +1 -1
- package/src/components/tooltip/tooltip.vue +1 -1
- package/src/core/tool.ts +35 -35
- package/src/editify/editify.less +12 -11
- package/src/editify/editify.vue +5 -5
- package/src/index.ts +1 -1
package/src/core/tool.ts
CHANGED
@@ -4,7 +4,7 @@ import { AlexElement } from 'alex-editor'
|
|
4
4
|
import { ButtonOptionsItemType, ButtonTypeType } from '../components/button/props'
|
5
5
|
import { LocaleType } from '../locale'
|
6
6
|
import { InsertImageUploadErrorType } from '../components/insertImage/props'
|
7
|
-
import {
|
7
|
+
import { VNode } from 'vue'
|
8
8
|
import Button from '../components/button/button.vue'
|
9
9
|
|
10
10
|
export type ObjectType = {
|
@@ -62,7 +62,7 @@ export interface MenuTableButtonType extends MenuButtonType {
|
|
62
62
|
}
|
63
63
|
|
64
64
|
export type MenuCustomButtonType = {
|
65
|
-
type
|
65
|
+
type?: ButtonTypeType
|
66
66
|
title?: string
|
67
67
|
leftBorder?: boolean
|
68
68
|
rightBorder?: boolean
|
@@ -77,9 +77,9 @@ export type MenuCustomButtonType = {
|
|
77
77
|
onLayerShown?: (name: string, btnInstance: InstanceType<typeof Button>) => void
|
78
78
|
onLayerHidden?: (name: string, btnInstance: InstanceType<typeof Button>) => void
|
79
79
|
onOperate?: (name: string, value: string | number | undefined, btnInstance: InstanceType<typeof Button>) => void
|
80
|
-
default?:
|
81
|
-
layer?:
|
82
|
-
option?:
|
80
|
+
default?: () => VNode
|
81
|
+
layer?: () => VNode
|
82
|
+
option?: () => VNode
|
83
83
|
}
|
84
84
|
|
85
85
|
export type CodeBlockToolbarType = {
|
@@ -117,36 +117,36 @@ export type ToolbarConfigType = {
|
|
117
117
|
}
|
118
118
|
|
119
119
|
export type MenuSequenceType = {
|
120
|
-
[key: string]: number
|
121
|
-
undo
|
122
|
-
redo
|
123
|
-
heading
|
124
|
-
indent
|
125
|
-
quote
|
126
|
-
align
|
127
|
-
orderList
|
128
|
-
unorderList
|
129
|
-
task
|
130
|
-
bold
|
131
|
-
underline
|
132
|
-
italic
|
133
|
-
strikethrough
|
134
|
-
code
|
135
|
-
super
|
136
|
-
sub
|
137
|
-
formatClear
|
138
|
-
fontSize
|
139
|
-
fontFamily
|
140
|
-
lineHeight
|
141
|
-
foreColor
|
142
|
-
backColor
|
143
|
-
link
|
144
|
-
image
|
145
|
-
video
|
146
|
-
table
|
147
|
-
codeBlock
|
148
|
-
sourceView
|
149
|
-
fullScreen
|
120
|
+
[key: string]: number | undefined
|
121
|
+
undo?: number
|
122
|
+
redo?: number
|
123
|
+
heading?: number
|
124
|
+
indent?: number
|
125
|
+
quote?: number
|
126
|
+
align?: number
|
127
|
+
orderList?: number
|
128
|
+
unorderList?: number
|
129
|
+
task?: number
|
130
|
+
bold?: number
|
131
|
+
underline?: number
|
132
|
+
italic?: number
|
133
|
+
strikethrough?: number
|
134
|
+
code?: number
|
135
|
+
super?: number
|
136
|
+
sub?: number
|
137
|
+
formatClear?: number
|
138
|
+
fontSize?: number
|
139
|
+
fontFamily?: number
|
140
|
+
lineHeight?: number
|
141
|
+
foreColor?: number
|
142
|
+
backColor?: number
|
143
|
+
link?: number
|
144
|
+
image?: number
|
145
|
+
video?: number
|
146
|
+
table?: number
|
147
|
+
codeBlock?: number
|
148
|
+
sourceView?: number
|
149
|
+
fullScreen?: number
|
150
150
|
}
|
151
151
|
|
152
152
|
export type MenuModeType = 'default' | 'inner' | 'fixed'
|
package/src/editify/editify.less
CHANGED
@@ -19,7 +19,7 @@
|
|
19
19
|
outline: none;
|
20
20
|
}
|
21
21
|
|
22
|
-
&.fullscreen {
|
22
|
+
&.editify-fullscreen {
|
23
23
|
position: fixed;
|
24
24
|
z-index: 1000;
|
25
25
|
left: 0;
|
@@ -33,7 +33,7 @@
|
|
33
33
|
}
|
34
34
|
}
|
35
35
|
|
36
|
-
&.autoheight {
|
36
|
+
&.editify-autoheight {
|
37
37
|
height: auto;
|
38
38
|
|
39
39
|
.editify-body {
|
@@ -53,20 +53,20 @@
|
|
53
53
|
padding: 1px;
|
54
54
|
border-radius: 4px;
|
55
55
|
|
56
|
-
&.border {
|
56
|
+
&.editify-border {
|
57
57
|
border: 1px solid @border-color;
|
58
58
|
transition: all 500ms;
|
59
59
|
|
60
|
-
&.menu_inner {
|
60
|
+
&.editify-menu_inner {
|
61
61
|
border-top: none;
|
62
62
|
border-radius: 0 0 4px 4px;
|
63
63
|
}
|
64
64
|
}
|
65
65
|
|
66
|
-
&.menu_inner {
|
66
|
+
&.editify-menu_inner {
|
67
67
|
padding-top: 21px;
|
68
68
|
|
69
|
-
.editify-
|
69
|
+
.editify-sourceview {
|
70
70
|
top: 21px;
|
71
71
|
height: calc(100% - 21px);
|
72
72
|
}
|
@@ -89,7 +89,7 @@
|
|
89
89
|
line-height: 1.5;
|
90
90
|
|
91
91
|
//显示占位符
|
92
|
-
&.placeholder::before {
|
92
|
+
&.editify-placeholder::before {
|
93
93
|
position: absolute;
|
94
94
|
top: 0;
|
95
95
|
left: 0;
|
@@ -343,9 +343,10 @@
|
|
343
343
|
}
|
344
344
|
|
345
345
|
//禁用样式
|
346
|
-
&.disabled {
|
346
|
+
&.editify-disabled {
|
347
347
|
cursor: auto !important;
|
348
|
-
|
348
|
+
|
349
|
+
&.editify-placeholder::before {
|
349
350
|
cursor: auto;
|
350
351
|
}
|
351
352
|
:deep(a) {
|
@@ -361,7 +362,7 @@
|
|
361
362
|
}
|
362
363
|
|
363
364
|
//代码视图
|
364
|
-
.editify-
|
365
|
+
.editify-sourceview {
|
365
366
|
display: block;
|
366
367
|
width: 100%;
|
367
368
|
height: 100%;
|
@@ -398,7 +399,7 @@
|
|
398
399
|
}
|
399
400
|
|
400
401
|
//全屏模式下并且不是代码视图下,显示一个上边框
|
401
|
-
&.fullscreen {
|
402
|
+
&.editify-fullscreen {
|
402
403
|
border-top: 1px solid @border-color;
|
403
404
|
}
|
404
405
|
}
|
package/src/editify/editify.vue
CHANGED
@@ -1,18 +1,18 @@
|
|
1
1
|
<template>
|
2
|
-
<div class="editify" :class="{ fullscreen: isFullScreen, autoheight: !isFullScreen && autoheight }" ref="elRef">
|
2
|
+
<div class="editify" :class="{ 'editify-fullscreen': isFullScreen, 'editify-autoheight': !isFullScreen && autoheight }" ref="elRef">
|
3
3
|
<!-- 菜单区域 -->
|
4
4
|
<Menu v-if="menuConfig.use" :config="menuConfig" :color="color" ref="menuRef"></Menu>
|
5
5
|
<!-- 编辑层,与编辑区域宽高相同必须适配 -->
|
6
|
-
<div ref="bodyRef" class="editify-body" :class="{ border: showBorder, menu_inner: menuConfig.use && menuConfig.mode == 'inner' }" :data-editify-uid="instance.uid">
|
6
|
+
<div ref="bodyRef" class="editify-body" :class="{ 'editify-border': showBorder, 'editify-menu_inner': menuConfig.use && menuConfig.mode == 'inner' }" :data-editify-uid="instance.uid">
|
7
7
|
<!-- 编辑器 -->
|
8
|
-
<div ref="contentRef" class="editify-content" :class="{ placeholder: showPlaceholder, disabled: disabled }" @keydown="handleEditorKeydown" @click="handleEditorClick" @compositionstart="isInputChinese = true" @compositionend="isInputChinese = false" :data-editify-placeholder="placeholder"></div>
|
8
|
+
<div ref="contentRef" class="editify-content" :class="{ 'editify-placeholder': showPlaceholder, 'editify-disabled': disabled }" @keydown="handleEditorKeydown" @click="handleEditorClick" @compositionstart="isInputChinese = true" @compositionend="isInputChinese = false" :data-editify-placeholder="placeholder"></div>
|
9
9
|
<!-- 代码视图 -->
|
10
|
-
<textarea v-if="isSourceView" :value="value" readonly class="editify-
|
10
|
+
<textarea v-if="isSourceView" :value="value" readonly class="editify-sourceview" />
|
11
11
|
<!-- 工具条 -->
|
12
12
|
<Toolbar ref="toolbarRef" v-model="toolbarOptions.show" :node="toolbarOptions.node!" :type="toolbarOptions.type" :config="toolbarConfig" :color="color"></Toolbar>
|
13
13
|
</div>
|
14
14
|
<!-- 编辑器尾部 -->
|
15
|
-
<div v-if="showWordLength" class="editify-footer" :class="{ fullscreen: isFullScreen && !isSourceView }" ref="footerRef">
|
15
|
+
<div v-if="showWordLength" class="editify-footer" :class="{ 'editify-fullscreen': isFullScreen && !isSourceView }" ref="footerRef">
|
16
16
|
<!-- 字数统计 -->
|
17
17
|
<div class="editify-footer-words">{{ $editTrans('totalWordCount') }}{{ textValue.length }}</div>
|
18
18
|
</div>
|
package/src/index.ts
CHANGED
@@ -12,7 +12,7 @@ import { InsertImageUploadErrorType } from './components/insertImage/props'
|
|
12
12
|
import { InsertVideoUploadErrorType } from './components/insertVideo/props'
|
13
13
|
|
14
14
|
//版本号
|
15
|
-
const version = '0.1.
|
15
|
+
const version = '0.1.21'
|
16
16
|
//安装函数
|
17
17
|
const install = (app: App) => {
|
18
18
|
app.component(Editify.name!, Editify)
|