Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
啊嘞嘞EC
vue-vben-admin
提交
3ad1a4f5
V
vue-vben-admin
项目概览
啊嘞嘞EC
/
vue-vben-admin
与 Fork 源项目一致
从无法访问的项目Fork
通知
1
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
V
vue-vben-admin
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
3ad1a4f5
编写于
1月 11, 2021
作者:
V
vben
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
feat(tinymce): add image upload #170
上级
18ad1bcc
变更
8
隐藏空白更改
内联
并排
Showing
8 changed file
with
133 addition
and
37 deletion
+133
-37
CHANGELOG.zh_CN.md
CHANGELOG.zh_CN.md
+2
-0
src/components/Tinymce/src/Editor.vue
src/components/Tinymce/src/Editor.vue
+46
-26
src/components/Tinymce/src/ImgUpload.vue
src/components/Tinymce/src/ImgUpload.vue
+72
-0
src/components/Tinymce/src/props.ts
src/components/Tinymce/src/props.ts
+4
-8
src/layouts/default/header/components/user-dropdown/index.vue
...layouts/default/header/components/user-dropdown/index.vue
+7
-2
src/layouts/default/header/index.vue
src/layouts/default/header/index.vue
+0
-1
src/locales/lang/en/component/upload.ts
src/locales/lang/en/component/upload.ts
+1
-0
src/locales/lang/zh_CN/component/upload.ts
src/locales/lang/zh_CN/component/upload.ts
+1
-0
未找到文件。
CHANGELOG.zh_CN.md
浏览文件 @
3ad1a4f5
...
...
@@ -16,6 +16,7 @@
-
新增
`PageWrapper`
组件。并应用于示例页面
-
新增标签页折叠功能
-
兼容旧版浏览器
-
tinymce 新增图片上传·
### 🐛 Bug Fixes
...
...
@@ -24,6 +25,7 @@
-
修复表格内存溢出问题
-
修复
`layout`
收缩展开功能在分割模式下失效
-
修复 modal 高度计算错误
-
修复文件上传错误
### 🎫 Chores
...
...
src/components/Tinymce/src/Editor.vue
浏览文件 @
3ad1a4f5
<
template
>
<div
class=
"tinymce-container"
:style=
"
{ width: containerWidth }">
<div
:class=
"prefixCls"
:style=
"
{ width: containerWidth }">
<ImgUpload
@
uploading=
"handleImageUploading"
@
done=
"handleDone"
v-if=
"showImageUpload"
v-show=
"editorRef"
/>
<textarea
:id=
"tinymceId"
ref=
"elRef"
:style=
"
{ visibility: 'hidden' }">
</textarea>
</div>
</
template
>
...
...
@@ -24,6 +30,8 @@
import
{
bindHandlers
}
from
'
./helper
'
;
import
lineHeight
from
'
./lineHeight
'
;
import
{
onMountedOrActivated
}
from
'
/@/hooks/core/onMountedOrActivated
'
;
import
ImgUpload
from
'
./ImgUpload.vue
'
;
import
{
useDesign
}
from
'
/@/hooks/web/useDesign
'
;
const
CDN_URL
=
'
https://cdn.bootcdn.net/ajax/libs/tinymce/5.5.1
'
;
...
...
@@ -33,12 +41,15 @@
name
:
'
Tinymce
'
,
inheritAttrs
:
false
,
props
:
basicProps
,
components
:
{
ImgUpload
},
emits
:
[
'
change
'
,
'
update:modelValue
'
],
setup
(
props
,
{
emit
,
attrs
})
{
const
editorRef
=
ref
<
any
>
(
null
);
const
tinymceId
=
ref
<
string
>
(
snowUuid
(
'
tiny-vue
'
));
const
elRef
=
ref
<
Nullable
<
HTMLElement
>>
(
null
);
const
{
prefixCls
}
=
useDesign
(
'
tinymce-container
'
);
const
tinymceContent
=
computed
(()
=>
{
return
props
.
modelValue
;
});
...
...
@@ -140,7 +151,7 @@
bindHandlers
(
e
,
attrs
,
unref
(
editorRef
));
}
function
setValue
(
editor
:
any
,
val
:
string
,
prevVal
:
string
)
{
function
setValue
(
editor
:
Recordable
,
val
:
string
,
prevVal
?
:
string
)
{
if
(
editor
&&
typeof
val
===
'
string
'
&&
...
...
@@ -179,45 +190,54 @@
});
}
function
handleImageUploading
(
name
:
string
)
{
const
editor
=
unref
(
editorRef
);
if
(
!
editor
)
return
;
const
content
=
editor
?.
getContent
()
??
''
;
setValue
(
editor
,
`
${
content
}
\n
${
getImgName
(
name
)}
`
);
}
function
handleDone
(
name
:
string
,
url
:
string
)
{
const
editor
=
unref
(
editorRef
);
if
(
!
editor
)
return
;
const
content
=
editor
?.
getContent
()
??
''
;
const
val
=
content
?.
replace
(
getImgName
(
name
),
`<img src="
${
url
}
"/>`
)
??
''
;
setValue
(
editor
,
val
);
}
function
getImgName
(
name
:
string
)
{
return
`[uploading:
${
name
}
]`
;
}
return
{
prefixCls
,
containerWidth
,
initOptions
,
tinymceContent
,
tinymceScriptSrc
,
elRef
,
tinymceId
,
handleImageUploading
,
handleDone
,
editorRef
,
};
},
});
</
script
>
<
style
lang=
"less"
scoped
>
.tinymce-container {
position: relative;
line-height: normal;
<
style
lang=
"less"
scoped
></
style
>
.mce-fullscreen {
z-index: 10000;
}
}
<
style
lang=
"less"
>
@prefix-cls: ~'@{namespace}-tinymce-container';
.editor-custom-btn-container {
position: absolute;
top: 6px;
right: 6px;
.@{prefix-cls} {
position: relative;
line-height: normal;
&.fullscreen
{
position: fixed
;
z-index: 10000
;
textarea
{
z-index: -1
;
visibility: hidden
;
}
}
.editor-upload-btn {
display: inline-block;
}
textarea {
z-index: -1;
visibility: hidden;
}
</
style
>
src/components/Tinymce/src/ImgUpload.vue
0 → 100644
浏览文件 @
3ad1a4f5
<
template
>
<div
:class=
"prefixCls"
>
<Upload
name=
"file"
multiple
@
change=
"handleChange"
:action=
"uploadUrl"
:showUploadList=
"false"
accept=
".jpg,.jpeg,.gif,.png,.webp"
>
<a-button
type=
"primary"
>
{{
t
(
'
component.upload.imgUpload
'
)
}}
</a-button>
</Upload>
</div>
</
template
>
<
script
lang=
"ts"
>
import
{
defineComponent
}
from
'
vue
'
;
import
{
Upload
}
from
'
ant-design-vue
'
;
import
{
InboxOutlined
}
from
'
@ant-design/icons-vue
'
;
import
{
useDesign
}
from
'
/@/hooks/web/useDesign
'
;
import
{
useGlobSetting
}
from
'
/@/hooks/setting
'
;
import
{
useI18n
}
from
'
/@/hooks/web/useI18n
'
;
export
default
defineComponent
({
name
:
'
TinymceImageUpload
'
,
components
:
{
Upload
,
InboxOutlined
},
emits
:
[
'
uploading
'
,
'
done
'
,
'
error
'
],
setup
(
_
,
{
emit
})
{
let
uploading
=
false
;
const
{
uploadUrl
}
=
useGlobSetting
();
const
{
t
}
=
useI18n
();
const
{
prefixCls
}
=
useDesign
(
'
tinymce-img-upload
'
);
function
handleChange
(
info
:
Recordable
)
{
const
file
=
info
.
file
;
const
status
=
file
?.
status
;
const
url
=
file
?.
response
?.
url
;
const
name
=
file
?.
name
;
if
(
status
===
'
uploading
'
)
{
if
(
!
uploading
)
{
emit
(
'
uploading
'
,
name
);
uploading
=
true
;
}
}
else
if
(
status
===
'
done
'
)
{
emit
(
'
done
'
,
name
,
url
);
uploading
=
false
;
}
else
if
(
status
===
'
error
'
)
{
emit
(
'
error
'
);
uploading
=
false
;
}
}
return
{
prefixCls
,
handleChange
,
uploadUrl
,
t
,
};
},
});
</
script
>
<
style
lang=
"less"
scoped
>
@prefix-cls: ~'@{namespace}-tinymce-img-upload';
.@{prefix-cls} {
position: absolute;
top: 4px;
right: 10px;
z-index: 20;
}
</
style
>
src/components/Tinymce/src/props.ts
浏览文件 @
3ad1a4f5
import
{
PropType
}
from
'
vue
'
;
import
{
propTypes
}
from
'
/@/utils/propTypes
'
;
export
const
basicProps
=
{
options
:
{
type
:
Object
as
PropType
<
any
>
,
default
:
{},
},
value
:
{
type
:
String
as
PropType
<
string
>
,
// default: ''
},
modelValue
:
{
type
:
String
as
PropType
<
string
>
,
// default: ''
},
value
:
propTypes
.
string
,
modelValue
:
propTypes
.
string
,
// 高度
height
:
{
type
:
[
Number
,
String
]
as
PropType
<
string
|
number
>
,
...
...
@@ -26,4 +21,5 @@ export const basicProps = {
required
:
false
,
default
:
'
auto
'
,
},
showImageUpload
:
propTypes
.
bool
.
def
(
true
),
};
src/layouts/default/header/components/user-dropdown/index.vue
浏览文件 @
3ad1a4f5
...
...
@@ -9,8 +9,13 @@
<template
#overlay
>
<Menu
@
click=
"handleMenuClick"
>
<MenuItem
key=
"doc"
:text=
"t('layout.header.dropdownItemDoc')"
icon=
"gg:loadbar-doc"
/>
<MenuDivider
v-if=
"getShowDoc"
/>
<MenuItem
key=
"doc"
:text=
"t('layout.header.dropdownItemDoc')"
icon=
"gg:loadbar-doc"
v-if=
"getShowDoc"
/>
<MenuDivider
/>
<MenuItem
key=
"loginOut"
:text=
"t('layout.header.dropdownItemLoginOut')"
...
...
src/layouts/default/header/index.vue
浏览文件 @
3ad1a4f5
...
...
@@ -84,7 +84,6 @@
}
from
'
./components
'
;
import
{
useAppInject
}
from
'
/@/hooks/web/useAppInject
'
;
import
{
useDesign
}
from
'
/@/hooks/web/useDesign
'
;
import
{
createAsyncComponent
}
from
'
/@/utils/factory/createAsyncComponent
'
;
export
default
defineComponent
({
name
:
'
LayoutHeader
'
,
...
...
src/locales/lang/en/component/upload.ts
浏览文件 @
3ad1a4f5
export
default
{
save
:
'
Save
'
,
upload
:
'
Upload
'
,
imgUpload
:
'
ImageUpload
'
,
uploaded
:
'
Uploaded
'
,
operating
:
'
Operating
'
,
...
...
src/locales/lang/zh_CN/component/upload.ts
浏览文件 @
3ad1a4f5
export
default
{
save
:
'
保存
'
,
upload
:
'
上传
'
,
imgUpload
:
'
图片上传
'
,
uploaded
:
'
已上传
'
,
operating
:
'
操作
'
,
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录