Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
月谷丶
Awesome-Markdown-Editor
提交
83e93d0b
Awesome-Markdown-Editor
项目概览
月谷丶
/
Awesome-Markdown-Editor
与 Fork 源项目一致
Fork自
gitcode_dev / Awesome-Markdown-Editor
通知
1
Star
0
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,体验更适合开发者的 AI 搜索 >>
提交
83e93d0b
编写于
8月 16, 2021
作者:
璃白.
🌻
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
feat:添加上传视频
上级
d7433ea0
变更
13
展开全部
显示空白变更内容
内联
并排
Showing
13 changed file
with
166 addition
and
41 deletion
+166
-41
dist/.DS_Store
dist/.DS_Store
+0
-0
dist/index.html
dist/index.html
+26
-19
dist/markdown-editor.js
dist/markdown-editor.js
+1
-1
src/App.vue
src/App.vue
+19
-2
src/assets/js/utils.js
src/assets/js/utils.js
+54
-0
src/assets/style/font/iconfont.ttf
src/assets/style/font/iconfont.ttf
+0
-0
src/assets/style/iconfont.less
src/assets/style/iconfont.less
+4
-0
src/components/content/md-preview.vue
src/components/content/md-preview.vue
+1
-2
src/components/content/md-textarea.vue
src/components/content/md-textarea.vue
+2
-2
src/components/content/mixins/render-mixins.js
src/components/content/mixins/render-mixins.js
+22
-5
src/components/header/components/tool-button.vue
src/components/header/components/tool-button.vue
+8
-1
src/components/header/md-header.vue
src/components/header/md-header.vue
+7
-0
src/main.js
src/main.js
+22
-9
未找到文件。
dist/.DS_Store
浏览文件 @
83e93d0b
无法预览此类型文件
dist/index.html
浏览文件 @
83e93d0b
...
...
@@ -85,7 +85,7 @@
value
:
"
## edswgdfgdfgdfg
\n
**dfgdfgdfg**
\n
_ergdfgdfg_
\n
> ergergdfg
\n
```
\n
wefgdfsfdgdf
\n
```
\n
- efwefsdfsdf
\n\n\n
sdgfdfgdfgdfg
\n\n\n
edrfgdfgdfg
\n\n\n\n
ergergergergerg
\n
ergergergerg
\n\n\n
edrfgdfgdfg
\n\n\n\n
ergergergergerg
\n
ergergergerg
\n\n\n
edrfgdfgdfg
\n\n\n\n
ergergergergerg
\n
ergergergerg
"
,
value
:
"
[1](https://img2.baidu.com/it/u=4025475678,645544065&fm=26&fmt=auto&gp=0.jpg)
\n
[](https://img2.baidu.com/it/u=4025475678,645544065&fm=26&fmt=auto&gp=0.jpg
)
"
,
"
![video](http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4 '1.jpg')
\n
![video](http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4 '1.jpg')
\n
![video](http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4 '1.jpg'
)
"
,
// value: "当前问题已结题,不再开放新的回答。",
// value: "",
disabled
:
false
,
...
...
@@ -143,7 +143,13 @@
onSubmit
:
function
(
res
)
{
console
.
log
(
res
);
},
onUpload
:
function
(
file
,
callback
)
{
onUpload
:
function
(
file
,
type
,
callback
)
{
console
.
log
(
type
);
if
(
type
===
"
video
"
)
{
callback
(
"
http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4
"
);
return
;
}
new
Promise
((
res
,
rej
)
=>
{
setTimeout
(()
=>
{
res
(
file
);
...
...
@@ -156,26 +162,27 @@
};
});
},
renderLinks
:
function
(
val
,
callback
)
{
setTimeout
(()
=>
{
val
[
0
].
title
=
"
111111
"
;
val
[
0
].
icon
=
"
https://g.csdnimg.cn/static/logo/favicon32.ico
"
;
callback
(
val
);
},
1000
);
//
renderLinks: function(val, callback) {
//
setTimeout(() => {
//
val[0].title = "111111";
//
val[0].icon = "https://g.csdnimg.cn/static/logo/favicon32.ico";
//
callback(val);
//
}, 1000);
setTimeout
(()
=>
{
val
[
1
].
title
=
"
2222222
"
;
val
[
1
].
icon
=
"
https://g.csdnimg.cn/static/logo/favicon32.ico
"
;
//
setTimeout(() => {
//
val[1].title = "2222222";
//
val[1].icon = "https://g.csdnimg.cn/static/logo/favicon32.ico";
callback
(
val
);
},
2000
);
setTimeout
(()
=>
{
val
[
1
].
title
=
"
333333333
"
;
val
[
1
].
icon
=
"
https://img2.baidu.com/it/u=4025475678,645544065&fm=26&fmt=auto&gp=0.jpg)
\n
[](https://img2.baidu.com/it/u=4025475678,645544065&fm=26&fmt=auto&gp=0.jpg
"
;
// callback(val);
// }, 2000);
// setTimeout(() => {
// val[1].title = "333333333";
// val[1].icon =
// "https://img2.baidu.com/it/u=4025475678,645544065&fm=26&fmt=auto&gp=0.jpg)\n[](https://img2.baidu.com/it/u=4025475678,645544065&fm=26&fmt=auto&gp=0.jpg";
callback
(
val
);
},
3000
);
},
//
callback(val);
//
}, 3000);
//
},
queryUserList
:
function
(
val
,
callback
)
{
const
list
=
[
{
...
...
dist/markdown-editor.js
浏览文件 @
83e93d0b
此差异已折叠。
点击以展开。
src/App.vue
浏览文件 @
83e93d0b
...
...
@@ -224,14 +224,28 @@ export default {
},
uploadFileCallBack
()
{
const
_this
=
this
;
return
function
({
url
,
file
:
{
name
}
})
{
// url = "http://www.baidu.com";
return
function
({
url
,
file
:
{
name
,
size
}
})
{
const
originalText
=
_this
.
text
;
const
selectionInfo
=
_this
.
selectionInfo
;
const
newText
=
formatText
(
originalText
,
selectionInfo
,
"
\n
![file](
"
,
`
${
url
}
'
${
name
}
${
size
}
')\n`
);
_this
.
text
=
newText
;
_this
.
$refs
.
mdUploadFile
.
value
=
""
;
};
},
uploadVideoCallBack
()
{
const
_this
=
this
;
return
function
({
url
,
file
:
{
name
}
})
{
const
originalText
=
_this
.
text
;
const
selectionInfo
=
_this
.
selectionInfo
;
const
newText
=
formatText
(
originalText
,
selectionInfo
,
"
\n
![video](
"
,
`
${
url
}
'
${
name
}
')\n`
);
_this
.
text
=
newText
;
...
...
@@ -361,9 +375,12 @@ export default {
if
(
!
val
.
length
)
return
;
this
.
$emit
(
"
upload
"
,
{
val
:
val
[
0
],
type
:
uploadType
,
callback
:
uploadType
===
"
img
"
?
this
.
uploadImgCallBack
:
uploadType
===
"
video
"
?
this
.
uploadVideoCallBack
:
this
.
uploadFileCallBack
});
this
.
fileList
=
[];
...
...
src/assets/js/utils.js
浏览文件 @
83e93d0b
import
marked
from
"
marked
"
;
import
videojs
from
"
video.js
"
;
import
"
video.js/dist/video-js.min.css
"
;
// 获取选中文本信息
export
function
getSelectionInfo
(
selectorId
)
{
...
...
@@ -412,3 +414,55 @@ export function preventDefault(id) {
},
0
);
return
;
}
export
async
function
renderVideo
(
id
,
html
)
{
const
virtualDom
=
document
.
createElement
(
"
div
"
);
virtualDom
.
innerHTML
=
html
;
document
.
body
.
appendChild
(
virtualDom
);
const
videoList
=
Array
.
from
(
virtualDom
.
getElementsByTagName
(
"
video
"
));
const
newHtml
=
await
new
Promise
((
resolve
,
rej
)
=>
{
videoList
.
forEach
(
item
=>
{
console
.
log
(
item
);
item
.
setAttribute
(
"
controls
"
,
"
controls
"
);
});
setTimeout
(()
=>
{
const
newHtml
=
virtualDom
.
innerHTML
;
resolve
(
newHtml
);
// document.body.removeChild(virtualDom);
},
5000
);
});
console
.
log
(
newHtml
);
// if (newHtml) {
return
newHtml
;
// }
}
// 获取方法参数名
export
function
getParameterName
(
fn
)
{
if
(
typeof
fn
!==
"
object
"
&&
typeof
fn
!==
"
function
"
)
return
;
const
COMMENTS
=
/
((\/\/
.*$
)
|
(\/\*[\s\S]
*
?\*\/))
/gm
;
const
DEFAULT_PARAMS
=
/=
[^
,)
]
+/gm
;
const
FAT_ARROWS
=
/=>.*$/gm
;
let
code
=
fn
.
prototype
?
fn
.
prototype
.
constructor
.
toString
()
:
fn
.
toString
();
code
=
code
.
replace
(
COMMENTS
,
""
)
.
replace
(
FAT_ARROWS
,
""
)
.
replace
(
DEFAULT_PARAMS
,
""
);
let
result
=
code
.
slice
(
code
.
indexOf
(
"
(
"
)
+
1
,
code
.
indexOf
(
"
)
"
))
.
match
(
/
([^\s
,
]
+
)
/g
);
return
result
===
null
?
[]
:
result
;
}
export
function
getfilesize
(
size
)
{
if
(
!
size
||
isNaN
(
size
))
return
size
;
var
num
=
1024.0
;
//byte
if
(
size
<
num
)
return
size
+
"
B
"
;
if
(
size
<
Math
.
pow
(
num
,
2
))
return
(
size
/
num
).
toFixed
(
2
)
+
"
K
"
;
//kb
if
(
size
<
Math
.
pow
(
num
,
3
))
return
(
size
/
Math
.
pow
(
num
,
2
)).
toFixed
(
2
)
+
"
M
"
;
//M
if
(
size
<
Math
.
pow
(
num
,
4
))
return
(
size
/
Math
.
pow
(
num
,
3
)).
toFixed
(
2
)
+
"
G
"
;
//G
return
(
size
/
Math
.
pow
(
num
,
4
)).
toFixed
(
2
)
+
"
T
"
;
//T
}
src/assets/style/font/iconfont.ttf
浏览文件 @
83e93d0b
无法预览此类型文件
src/assets/style/iconfont.less
浏览文件 @
83e93d0b
...
...
@@ -118,3 +118,7 @@
.icon-xiazai:before {
content: "\e6be";
}
.icon-shipin:before {
content: "\e63c";
}
src/components/content/md-preview.vue
浏览文件 @
83e93d0b
...
...
@@ -10,7 +10,6 @@
</div>
</
template
>
<
script
>
import
marked
from
"
marked
"
;
export
default
{
data
()
{
return
{};
...
...
@@ -32,7 +31,7 @@ export default {
default
:
0
},
html
:
{
type
:
String
,
type
:
[
String
,
Promise
]
,
default
:
""
},
fullScreen
:
{
...
...
src/components/content/md-textarea.vue
浏览文件 @
83e93d0b
...
...
@@ -71,7 +71,7 @@ export default {
default
:
""
},
html
:
{
type
:
String
,
type
:
[
String
,
Promise
]
,
default
:
""
},
htmlMinHeight
:
{
...
...
@@ -298,7 +298,7 @@ export default {
this
.
emitText
();
},
blur
()
{
this
.
renderUserTags
()
this
.
renderUserTags
()
;
this
.
setFocus
(
false
);
},
createHideEl
(
type
)
{
...
...
src/components/content/mixins/render-mixins.js
浏览文件 @
83e93d0b
...
...
@@ -2,13 +2,15 @@ import {
getFilteredTags
,
getLinkTags
,
addLanguageClass
,
addLinkTarget
addLinkTarget
,
renderVideo
,
getfilesize
}
from
"
@/assets/js/utils
"
;
import
marked
from
"
marked
"
;
import
DOMPurify
from
"
dompurify
"
;
export
default
{
methods
:
{
transferMarkdown
(
val
)
{
async
transferMarkdown
(
val
)
{
this
.
rerender
();
marked
.
setOptions
({
breaks
:
true
,
...
...
@@ -37,9 +39,10 @@ export default {
// 链接转换为卡片
const
{
vDom
,
links
}
=
getLinkTags
(
this
.
id
,
cleanHtml
);
const
{
callUserList
,
userHtml
}
=
addLinkTarget
(
cleanHtml
);
const
videoHtml
=
await
renderVideo
(
this
.
id
,
userHtml
);
this
.
$emit
(
"
callUserList
"
,
callUserList
);
this
.
$emit
(
"
getFilteredTags
"
,
filteredTags
);
this
.
$emit
(
"
update:html
"
,
user
Html
);
this
.
$emit
(
"
update:html
"
,
video
Html
);
if
(
links
.
length
)
this
.
$emit
(
"
renderLinksHtml
"
,
{
vDom
,
links
});
},
rerender
()
{
...
...
@@ -49,14 +52,19 @@ export default {
if
(
href
===
null
)
{
return
text
;
}
const
size
=
title
.
split
(
"
"
).
pop
();
const
name
=
title
.
split
(
"
"
)
.
slice
(
0
,
-
1
)
.
join
(
"
"
);
// ![file](...)渲染文件,只可以下载
if
(
text
===
"
file
"
)
{
return
`<div id="md_file_card" class="md_file_card">
<div class="md_flex_card">
<span class="md_file_img icon iconfont icon-doc"></span>
<span class="flex-1">
<span class="md_file_title">
${
titl
e
}
</span>
<span class="md_file_desc">
16.6KB
</span>
<span class="md_file_title">
${
nam
e
}
</span>
<span class="md_file_desc">
${
getfilesize
(
size
)}
</span>
</span>
<span class="md_file_controls">
<a href="
${
href
}
" type="file" download class="md_file_download icon iconfont icon-xiazai"></a>
...
...
@@ -64,6 +72,15 @@ export default {
</div>
</div>`
;
}
if
(
text
===
"
video
"
)
{
return
`<video
class="video-js"
controls
preload="auto"
data-setup='{}'>
<source src="
${
href
}
" type="video/mp4"></source>
</video>`
;
}
// ![img](...)渲染图片
let
out
=
'
<img src="
'
+
href
+
'
" alt="
'
+
text
+
'
"
'
;
if
(
title
)
{
...
...
src/components/header/components/tool-button.vue
浏览文件 @
83e93d0b
...
...
@@ -164,6 +164,12 @@ export default {
case
"
file
"
:
this
.
$emit
(
"
upload
"
,
"
file
"
);
break
;
case
"
video
"
:
this
.
$emit
(
"
upload
"
,
"
video
"
);
break
;
case
"
file
"
:
this
.
$emit
(
"
upload
"
,
"
file
"
);
break
;
case
"
fullScreen
"
:
this
.
$emit
(
"
setFullScreen
"
,
true
);
break
;
...
...
@@ -218,7 +224,8 @@ export default {
&.icon-lianjie {
font-size: 16px;
}
&.icon-help {
&.icon-help,
&.icon-wenjian {
font-size: 19px;
}
}
...
...
src/components/header/md-header.vue
浏览文件 @
83e93d0b
...
...
@@ -237,6 +237,13 @@ export default {
startStr
:
""
,
endStr
:
""
},
{
name
:
"
video
"
,
icon
:
"
shipin
"
,
tip
:
"
上传视频
"
,
startStr
:
""
,
endStr
:
""
},
{
name
:
"
task
"
,
icon
:
"
renwu
"
,
...
...
src/main.js
浏览文件 @
83e93d0b
...
...
@@ -2,7 +2,12 @@ import Vue from "vue";
import
App
from
"
./App
"
;
import
Vtip
from
"
vtip
"
;
import
"
vtip/lib/index.min.css
"
;
import
{
initStyle
,
setzIndex
,
isNotEmpty
}
from
"
@/assets/js/utils
"
;
import
{
initStyle
,
setzIndex
,
isNotEmpty
,
getParameterName
}
from
"
@/assets/js/utils
"
;
import
"
@/assets/style/global.less
"
;
Vue
.
use
(
Vtip
.
directive
);
...
...
@@ -105,15 +110,23 @@ function initMdEditor(obj) {
submit
(
val
)
{
onSubmit
(
val
);
},
upload
({
val
,
callback
})
{
cons
ole
.
log
(
val
);
upload
({
val
,
type
,
callback
})
{
cons
t
params
=
getParameterName
(
onUpload
);
if
(
!
params
.
includes
(
"
type
"
))
{
onUpload
(
val
,
function
(
res
)
{
callback
({
url
:
res
,
file
:
val
});
});
}
else
{
onUpload
(
val
,
type
,
function
(
res
)
{
callback
({
url
:
res
,
file
:
val
});
});
}
},
renderLinks
({
links
,
callback
})
{
if
(
!
renderLinks
)
return
callback
(
links
);
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录