Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
Zebra-h
Awesome-Markdown-Editor
提交
1e5edef1
Awesome-Markdown-Editor
项目概览
Zebra-h
/
Awesome-Markdown-Editor
与 Fork 源项目一致
Fork自
gitcode_dev / Awesome-Markdown-Editor
通知
1
Star
1
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
Awesome-Markdown-Editor
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
1e5edef1
编写于
8月 24, 2021
作者:
璃白.
🌻
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
feat:完善上传视频逻辑
上级
2b997e0a
变更
13
展开全部
隐藏空白更改
内联
并排
Showing
13 changed file
with
196 addition
and
63 deletion
+196
-63
dist/index.html
dist/index.html
+16
-1
dist/markdown-editor.js
dist/markdown-editor.js
+1
-1
src/App.vue
src/App.vue
+20
-9
src/assets/img/icon-format.png
src/assets/img/icon-format.png
+0
-0
src/assets/img/icon-format.svg
src/assets/img/icon-format.svg
+0
-1
src/assets/img/play.svg
src/assets/img/play.svg
+1
-0
src/assets/style/global.less
src/assets/style/global.less
+21
-0
src/assets/style/markdown.less
src/assets/style/markdown.less
+22
-2
src/components/content/md-preview.vue
src/components/content/md-preview.vue
+11
-0
src/components/content/mixins/render-mixins.js
src/components/content/mixins/render-mixins.js
+6
-6
src/components/header/components/tool-button.vue
src/components/header/components/tool-button.vue
+72
-35
src/components/header/md-header.vue
src/components/header/md-header.vue
+25
-7
webpack.config.js
webpack.config.js
+1
-1
未找到文件。
dist/index.html
浏览文件 @
1e5edef1
...
...
@@ -146,7 +146,22 @@
},
onUpload
:
function
(
file
,
type
,
callback
)
{
if
(
type
===
"
video
"
)
{
callback
(
"
http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4
"
);
let
time
=
0
;
const
timeObj
=
setInterval
(()
=>
{
time
++
;
if
(
time
>=
100
)
{
callback
(
"
http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4
"
);
clearInterval
(
timeObj
);
return
;
}
// if (time === 30) {
// callback(0);
// clearInterval(timeObj);
// return;
// }
callback
(
time
);
},
10
);
return
;
}
new
Promise
((
res
,
rej
)
=>
{
...
...
dist/markdown-editor.js
浏览文件 @
1e5edef1
此差异已折叠。
点击以展开。
src/App.vue
浏览文件 @
1e5edef1
...
...
@@ -17,6 +17,7 @@
:disabled=
"disabled"
:fullScreen.sync=
"fullScreen"
:themeOptions=
"themeOptions"
:uploadPercent=
"uploadPercent"
@
upload=
"handleUpload"
@
getFormatType=
"formatType = $event"
@
updateShowHelp=
"showHelp = $event"
...
...
@@ -240,16 +241,25 @@ export default {
uploadVideoCallBack
()
{
const
_this
=
this
;
return
function
({
url
,
file
:
{
name
}
})
{
const
originalText
=
_this
.
text
;
const
selectionInfo
=
_this
.
selectionInfo
;
const
newText
=
formatText
(
originalText
,
selectionInfo
,
"
![video](
"
,
`
${
url
}
'
${
name
}
')\n`
if
(
isNaN
(
parseInt
(
url
)))
{
const
originalText
=
_this
.
text
;
const
selectionInfo
=
_this
.
selectionInfo
;
const
newText
=
formatText
(
originalText
,
selectionInfo
,
"
![video](
"
,
`
${
url
}
)\n`
);
_this
.
text
=
newText
;
_this
.
$refs
.
mdUploadFile
.
value
=
""
;
_this
.
uploadPercent
=
100
;
}
else
{
_this
.
uploadPercent
=
parseInt
(
url
);
}
_this
.
$refs
[
"
md_header
"
+
_this
.
id
].
loading
(
"
video
"
,
_this
.
uploadPercent
);
_this
.
text
=
newText
;
_this
.
$refs
.
mdUploadFile
.
value
=
""
;
};
}
},
...
...
@@ -267,6 +277,7 @@ export default {
formatType
:
""
,
htmlMinHeight
:
150
,
showHelp
:
false
,
uploadPercent
:
0
,
textLength
:
""
,
userList
:
false
,
callUserList
:
[],
...
...
src/assets/img/icon-format.png
已删除
100644 → 0
浏览文件 @
2b997e0a
1.6 KB
src/assets/img/icon-format.svg
已删除
100644 → 0
浏览文件 @
2b997e0a
<svg
t=
"1626417405941"
class=
"icon"
viewBox=
"0 0 1143 1024"
version=
"1.1"
xmlns=
"http://www.w3.org/2000/svg"
p-id=
"2471"
width=
"48"
height=
"48"
><path
d=
"M387.907832 290.329177a2337.050694 2337.050694 0 0 1-283.603386 107.19739L550.653905 934.120512a38.109783 38.109783 0 0 0 53.659694 5.060971 37.378787 37.378787 0 0 0 6.096966-6.584963L784.986571 698.201855z m71.097595-34.817802l371.957882 380.859832 80.183544-107.501388a38.109783 38.109783 0 0 0-2.316987-48.415724l-75.183572-83.599524-28.719837-31.70682 233.783669-167.015049a67.074618 67.074618 0 1 0-93.537467-93.843466l-165.979055 232.077679-31.768819-35.366799q-66.219623-73.72058-131.892249-147.746159c7.133959 7.987955 5.670968 7.682956 4.939971 7.804956-4.573974 0-8.902949 0.975994-6.097965-1.036994a1211.361103 1211.361103 0 0 1-155.491115 95.489456zM883.037013 59.959489a143.478183 143.478183 0 1 1 200.18586 200.18686l-164.331065 117.379332q22.86587 25.183857 46.768734 51.891704a114.269349 114.269349 0 0 1 6.889961 145.002175L671.631216 978.023262a114.453348 114.453348 0 0 1-160.064089 23.293867 116.587336 116.587336 0 0 1-19.511888-18.293896L8.875989 402.038541a38.049783 38.049783 0 0 1 18.597895-60.976653q350.128007-102.074419 541.899914-242.564619c25.182857-18.293896 81.952533-19.817887 103.233413 4.145977q46.097738 51.890705 99.879431 112.075362l110.550371-154.759119z"
p-id=
"2472"
></path></svg>
\ No newline at end of file
src/assets/img/play.svg
0 → 100644
浏览文件 @
1e5edef1
<svg
xmlns=
"http://www.w3.org/2000/svg"
viewBox=
"0 0 70 70"
><path
transform=
"translate(15,15) scale(0.04,0.04)"
d=
"M576,363L810,512L576,661zM342,214L576,363L576,661L342,810z"
></path></svg>
\ No newline at end of file
src/assets/style/global.less
浏览文件 @
1e5edef1
...
...
@@ -56,6 +56,27 @@ textarea {
opacity: 0;
}
.loading-enter-active {
transition: all 0.2s ease;
}
.loading-leave-active {
transition: all 0.2s ease;
}
.loading-enter
/* .slide-fade-leave-active for below version 2.1.8 */ {
transform: translate3d(0, 4px, 0);
opacity: 0;
}
.loading-leave-to {
transform: translate3d(0, -4px, 0);
opacity: 0;
}
.md_img_container {
text-align: center;
}
.md_flex_card {
display: flex;
justify-content: space-between;
...
...
src/assets/style/markdown.less
浏览文件 @
1e5edef1
...
...
@@ -10,8 +10,28 @@
.md_preview {
font-family: -apple-system, SF UI Text, Arial, PingFang SC, Hiragino Sans GB,
Microsoft YaHei, WenQuanYi Micro Hei, sans-serif, SimHei, SimSun;
video {
display: block;
.md_video {
position: relative;
width: 300px;
height: 200px;
video {
display: block;
width: 100%;
height: 100%;
}
&::after {
cursor: not-allowed;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
content: "";
width: 54px;
height: 54px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.6) url("@/assets/img/play.svg")
center/cover no-repeat;
}
}
img {
max-width: 100%;
...
...
src/components/content/md-preview.vue
浏览文件 @
1e5edef1
...
...
@@ -41,9 +41,11 @@ export default {
},
mounted
()
{
this
.
addClass
();
this
.
addControls
();
},
updated
()
{
this
.
addClass
();
this
.
addControls
();
},
methods
:
{
addClass
()
{
...
...
@@ -54,6 +56,15 @@ export default {
item
.
className
+=
"
md_hljs
"
;
});
},
0
);
},
addControls
()
{
setTimeout
(()
=>
{
const
videoDomList
=
document
.
querySelectorAll
(
"
.md_preview video
"
);
if
(
!
videoDomList
.
length
)
return
;
videoDomList
.
forEach
(
item
=>
{
item
.
setAttribute
(
"
preload
"
,
"
auto
"
);
});
},
0
);
}
}
};
...
...
src/components/content/mixins/render-mixins.js
浏览文件 @
1e5edef1
...
...
@@ -73,14 +73,14 @@ export default {
</div>`
;
}
if
(
text
===
"
video
"
)
{
return
`<video
return
`<
p class="md_video"><
video
class="video-js"
controls
preload="none"
src="
${
href
}
"
></video>`
;
></video>
</p>
`
;
}
// ![img](...)渲染图片
let
out
=
'
<img src="
'
+
href
+
'
" alt="
'
+
text
+
'
"
'
;
let
out
=
'
<
p class="md_img_container"><
img src="
'
+
href
+
'
" alt="
'
+
text
+
'
"
'
;
if
(
title
)
{
const
reg_title
=
/
(\%([\u
4E00-
\u
9FA5
\w
.
]
+
)\s??)
/
;
const
reg_align
=
/
(\#([
a-zA-Z
]
+
)\s??)
/
;
...
...
@@ -95,7 +95,7 @@ export default {
if
(
reg_align
.
exec
(
title
))
{
var
a
=
reg_align
.
exec
(
title
)[
2
];
if
(
a
===
"
center
"
)
{
out
+=
'
style="display:
block;margin: 0 auto
;"
'
;
out
+=
'
style="display:
inline-block
;"
'
;
}
out
+=
'
align="
'
+
a
+
'
"
'
;
}
...
...
@@ -108,7 +108,7 @@ export default {
out
+=
'
height="
'
+
h
+
'
px"
'
;
}
}
out
+=
"
/>
"
;
out
+=
"
/>
</p>
"
;
return
out
;
},
link
(
href
,
title
,
text
)
{
...
...
src/components/header/components/tool-button.vue
浏览文件 @
1e5edef1
...
...
@@ -2,10 +2,19 @@
<div
v-if=
"isMobile"
@
click=
"mobileClick"
class=
"tool_button"
>
<span
:class=
"['icon iconfont', `icon-$
{info.icon}`]">
</span>
</div>
<div
v-else-if=
"info.name === 'loading'"
class=
"tool_button"
>
<span
:class=
"['icon loading iconfont', `icon-$
{info.icon}`]">
</span>
<span
class=
"percent"
>
{{
percent
}}
</span>
</div>
<transition-group
style=
"position:relative"
name=
"loading"
v-else-if=
"info.icon === 'loading'"
>
<div
key=
"loading"
class=
"tool_button loading_button"
>
<span
class=
"circle"
>
<span
class=
"loading"
></span>
<span
class=
"percent"
>
{{
uploadPercent
+
"
%
"
}}
</span>
</span>
<!--
<span
:class=
"['icon loading iconfont', `icon-$
{info.icon}`]">
</span>
-->
</div>
</transition-group>
<div
v-else-if=
"info.name === 'code'"
@
click=
"handleTool(info.name, info.startStr, info.endStr)"
...
...
@@ -29,14 +38,16 @@
>
<span
:class=
"['icon iconfont', `icon-$
{info.icon}`]">
</span>
</div>
<div
v-else-if=
"info.name === 'video'"
@
click=
"handleTool(info.name, info.startStr, info.endStr)"
v-tip.bottom=
"videoOptions"
class=
"tool_button"
>
<span
:class=
"['icon iconfont', `icon-$
{info.icon}`]">
</span>
</div>
<transition-group
name=
"loading"
v-else-if=
"info.name === 'video'"
>
<div
key=
"video"
@
click=
"handleTool(info.name, info.startStr, info.endStr)"
v-tip.bottom=
"videoOptions"
class=
"tool_button"
>
<span
:class=
"['icon iconfont', `icon-$
{info.icon}`]">
</span>
</div>
</transition-group>
<div
v-else
v-tip.bottom=
"options"
...
...
@@ -84,21 +95,16 @@ export default {
ulNum
:
{
type
:
Number
,
default
:
1
},
uploadPercent
:
{
type
:
Number
,
default
:
0
}
},
data
()
{
return
{
percent
:
0
};
},
created
()
{
setInterval
(()
=>
{
this
.
percent
++
;
if
(
this
.
percent
>=
100
)
{
this
.
percent
=
0
;
}
},
100
);
return
{};
},
computed
:
{
darkMode
()
{
return
this
.
themeOptions
&&
this
.
themeOptions
.
dark
;
...
...
@@ -263,10 +269,10 @@ export default {
<
style
lang=
"less"
scoped
>
@keyframes rotate {
from {
transform: rotate(0deg);
transform:
translateY(-50%)
rotate(0deg);
}
to {
transform: rotate(359deg);
transform:
translateY(-50%)
rotate(359deg);
}
}
.tool_button {
...
...
@@ -274,18 +280,49 @@ export default {
box-sizing: border-box;
cursor: pointer;
position: relative;
line-height: 1;
overflow: hidden;
&.active {
.icon {
color: var(--md-editor-border-color-active);
}
}
.percent {
font-size: 12px;
position: absolute;
top: 2px;
left: 50%;
transform: translateX(-50%) scale(0.8);
&.loading_button {
padding: 0 2px 8px;
}
.circle {
display: inline-block;
width: 30px;
height: 16px;
border: 1px solid var(--md-editor-border-color-active);
border-radius: 10px;
vertical-align: text-bottom;
position: relative;
box-sizing: border-box;
.loading {
position: absolute;
left: 50%;
top: 50%;
width: 18px;
height: 6px;
background: #fff;
animation: rotate 3s linear infinite;
transform-origin: 0 50%;
border-radius: 10px;
}
.percent {
font-size: 12px;
line-height: 15px;
position: absolute;
z-index: 99;
top: 50%;
left: 50%;
color: var(--md-editor-border-color-active);
transform: translate(-50%, -50%) scale(0.8);
white-space: nowrap;
}
}
.icon {
font-size: 18px;
color: var(--md-editor-text-color);
...
...
@@ -299,10 +336,10 @@ export default {
color: var(--md-editor-border-color-active);
}
}
&.loading {
animation: rotate 3s linear infinite;
}
//
&.loading {
//
animation: rotate 3s linear infinite;
// color: var(--md-editor-border-color-active);
// }
&.icon-quxiaoquanping_o {
font-size: 24px;
margin: 0 -4px;
...
...
src/components/header/md-header.vue
浏览文件 @
1e5edef1
...
...
@@ -36,6 +36,7 @@
:zIndex="zIndex"
:themeOptions="themeOptions"
:selectionInfo="selectionInfo"
:uploadPercent="uploadPercent"
/>
</div>
</div>
...
...
@@ -100,6 +101,10 @@ export default {
selectionInfo
:
{
type
:
Object
,
default
:
()
=>
{}
},
uploadPercent
:
{
type
:
Number
,
default
:
0
}
},
computed
:
{
...
...
@@ -251,13 +256,13 @@ export default {
startStr
:
""
,
endStr
:
""
},
{
name
:
"
loading
"
,
icon
:
"
loading
"
,
tip
:
"
上传视频
"
,
startStr
:
""
,
endStr
:
""
},
//
{
//
name: "loading",
//
icon: "loading",
// tip: "上传中
",
//
startStr: "",
//
endStr: ""
//
},
{
name
:
"
task
"
,
icon
:
"
renwu
"
,
...
...
@@ -289,6 +294,19 @@ export default {
},
created
()
{},
methods
:
{
loading
(
type
,
percent
)
{
const
list
=
this
.
toolButtonList
;
switch
(
type
)
{
case
"
video
"
:
list
.
find
(
item
=>
item
.
name
===
type
).
icon
=
parseInt
(
percent
)
===
100
||
parseInt
(
percent
)
===
0
?
"
shipin
"
:
"
loading
"
;
break
;
default
:
break
;
}
},
resetUlNum
()
{
this
.
ulNum
=
1
;
},
...
...
webpack.config.js
浏览文件 @
1e5edef1
...
...
@@ -29,7 +29,7 @@ module.exports = {
},
{
test
:
/
\.(
ttf|woff|png
)
$/
,
test
:
/
\.(
ttf|woff|png
|svg
)
$/
,
loader
:
"
url-loader
"
}
]
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录