Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
Zebra-h
Awesome-Markdown-Editor
提交
49d3ee27
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,发现更多精彩内容 >>
提交
49d3ee27
编写于
8月 31, 2021
作者:
璃白.
🌻
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
feat:添加工具栏注册
上级
89555f69
变更
7
隐藏空白更改
内联
并排
Showing
7 changed file
with
103 addition
and
107 deletion
+103
-107
src/App.vue
src/App.vue
+32
-14
src/assets/style/iconfont.less
src/assets/style/iconfont.less
+3
-3
src/components/content/components/help-doc.vue
src/components/content/components/help-doc.vue
+4
-4
src/components/footer/upload-files.vue
src/components/footer/upload-files.vue
+1
-1
src/components/header/components/tool-button.vue
src/components/header/components/tool-button.vue
+26
-16
src/components/header/md-header.vue
src/components/header/md-header.vue
+25
-19
src/main.js
src/main.js
+12
-50
未找到文件。
src/App.vue
浏览文件 @
49d3ee27
...
...
@@ -17,7 +17,9 @@
:disabled=
"disabled"
:fullScreen.sync=
"fullScreen"
:themeOptions=
"themeOptions"
:uploadPercent=
"uploadPercent"
:uploadImgPercent=
"uploadImgPercent"
:uploadVideoPercent=
"uploadVideoPercent"
:registerTools=
"registerTools"
@
upload=
"handleUpload"
@
getFormatType=
"formatType = $event"
@
updateShowHelp=
"showHelp = $event"
...
...
@@ -166,6 +168,11 @@ export default {
type
:
Object
,
default
:
()
=>
{}
},
// 自定义工具栏
registerTools
:
{
type
:
Array
,
default
:
()
=>
[]
},
// 行高度
rows
:
{
type
:
[
Number
,
String
],
...
...
@@ -211,16 +218,25 @@ export default {
uploadImgCallBack
()
{
const
_this
=
this
;
return
function
({
url
,
file
:
{
name
}
})
{
const
originalText
=
_this
.
text
;
const
selectionInfo
=
_this
.
selectionInfo
;
const
newText
=
formatText
(
originalText
,
selectionInfo
,
"
\n
![img](
"
,
`
${
url
}
"=600 #left")\n`
if
(
isNaN
(
parseInt
(
url
)))
{
const
originalText
=
_this
.
text
;
const
selectionInfo
=
_this
.
selectionInfo
;
const
newText
=
formatText
(
originalText
,
selectionInfo
,
"
\n
![img](
"
,
`
${
url
}
"=600 #left")\n`
);
_this
.
text
=
newText
;
_this
.
$refs
.
mdUploadFile
.
value
=
""
;
_this
.
uploadImgPercent
=
100
;
}
else
{
_this
.
uploadImgPercent
=
parseInt
(
url
);
}
_this
.
$refs
[
"
md_header
"
+
_this
.
id
].
loading
(
"
img
"
,
_this
.
uploadImgPercent
);
_this
.
text
=
newText
;
_this
.
$refs
.
mdUploadFile
.
value
=
""
;
};
},
uploadFileCallBack
()
{
...
...
@@ -252,13 +268,13 @@ export default {
);
_this
.
text
=
newText
;
_this
.
$refs
.
mdUploadFile
.
value
=
""
;
_this
.
uploadPercent
=
100
;
_this
.
upload
Video
Percent
=
100
;
}
else
{
_this
.
uploadPercent
=
parseInt
(
url
);
_this
.
upload
Video
Percent
=
parseInt
(
url
);
}
_this
.
$refs
[
"
md_header
"
+
_this
.
id
].
loading
(
"
video
"
,
_this
.
uploadPercent
_this
.
upload
Video
Percent
);
};
}
...
...
@@ -277,7 +293,9 @@ export default {
formatType
:
""
,
htmlMinHeight
:
150
,
showHelp
:
false
,
uploadPercent
:
0
,
uploadImgPercent
:
0
,
uploadFlePercent
:
0
,
uploadVideoPercent
:
0
,
textLength
:
""
,
userList
:
false
,
callUserList
:
[],
...
...
src/assets/style/iconfont.less
浏览文件 @
49d3ee27
...
...
@@ -47,7 +47,7 @@
content: "\eaef";
}
.icon-
tupian
:before {
.icon-
img
:before {
content: "\e7ed";
}
...
...
@@ -107,7 +107,7 @@
content: "\e503";
}
.icon-
wenjian
:before {
.icon-
file
:before {
content: "\e607";
}
...
...
@@ -119,7 +119,7 @@
content: "\e6be";
}
.icon-
shipin
:before {
.icon-
video
:before {
content: "\e63c";
}
.icon-biaoti:before {
...
...
src/components/content/components/help-doc.vue
浏览文件 @
49d3ee27
...
...
@@ -69,22 +69,22 @@ export default {
{
title
:
"
图片
"
,
doc
:
"
![alt](url)
"
,
icon
:
"
tupian
"
icon
:
"
img
"
},
{
title
:
"
图片大小
"
,
doc
:
'
![alt](url "=300x200")
'
,
icon
:
"
tupian
"
icon
:
"
img
"
},
{
title
:
"
图片位置
"
,
doc
:
'
![alt](url "#left")
'
,
icon
:
"
tupian
"
icon
:
"
img
"
},
{
title
:
"
图片名称
"
,
doc
:
'
![alt](url "%title")
'
,
icon
:
"
tupian
"
icon
:
"
img
"
},
{
title
:
"
代码
"
,
...
...
src/components/footer/upload-files.vue
浏览文件 @
49d3ee27
<
template
>
<div
class=
"upload_files"
@
click=
"$refs.mdUploadFile.click()"
>
<span
class=
"icon iconfont icon-
tupian
"
></span>
<span
class=
"icon iconfont icon-
img
"
></span>
<input
ref=
"mdUploadFile"
class=
"md_upload"
...
...
src/components/header/components/tool-button.vue
浏览文件 @
49d3ee27
...
...
@@ -10,11 +10,19 @@
<div
key=
"loading"
class=
"tool_button loading_button"
>
<span
class=
"circle"
>
<span
class=
"loading"
></span>
<span
class=
"percent"
>
{{
uploadP
ercent
+
"
%
"
}}
</span>
<span
class=
"percent"
>
{{
info
.
p
ercent
+
"
%
"
}}
</span>
</span>
<!--
<span
:class=
"['icon loading iconfont', `icon-$
{info.icon}`]">
</span>
-->
</div>
</transition-group>
<div
class=
"tool_button"
@
click=
"info.click"
v-tip.bottom=
"info.tip"
v-else-if=
"info.register"
>
<img
:src=
"info.icon"
alt=
""
/>
</div>
<div
v-else-if=
"info.name === 'code'"
@
click=
"handleTool(info.name, info.startStr, info.endStr)"
...
...
@@ -48,15 +56,17 @@
<span
:class=
"['icon iconfont', `icon-$
{info.icon}`]">
</span>
</div>
</transition-group>
<div
v-else
v-tip.bottom=
"options"
@
click=
"handleTool(info.name, info.startStr, info.endStr)"
@
dblclick=
"handleDbClick(info.name)"
class=
"tool_button"
>
<span
:class=
"['icon iconfont', `icon-$
{info.icon}`]">
</span>
</div>
<transition-group
name=
"loading"
v-else
>
<div
key=
"tool"
v-tip.bottom=
"options"
@
click=
"handleTool(info.name, info.startStr, info.endStr)"
@
dblclick=
"handleDbClick(info.name)"
class=
"tool_button"
>
<span
:class=
"['icon iconfont', `icon-$
{info.icon}`]">
</span>
</div>
</transition-group>
</
template
>
<
script
>
import
{
checkBoswer
}
from
"
@/assets/js/utils
"
;
...
...
@@ -95,10 +105,6 @@ export default {
ulNum
:
{
type
:
Number
,
default
:
1
},
uploadPercent
:
{
type
:
Number
,
default
:
0
}
},
data
()
{
...
...
@@ -322,7 +328,11 @@ export default {
white-space: nowrap;
}
}
img {
width: 18px;
display: inline-block;
vertical-align: text-bottom;
}
.icon {
font-size: 18px;
color: var(--md-editor-text-color);
...
...
@@ -355,7 +365,7 @@ export default {
font-size: 16px;
}
&.icon-help,
&.icon-
wenjian
{
&.icon-
file
{
font-size: 19px;
}
}
...
...
src/components/header/md-header.vue
浏览文件 @
49d3ee27
...
...
@@ -36,7 +36,6 @@
:zIndex="zIndex"
:themeOptions="themeOptions"
:selectionInfo="selectionInfo"
:uploadPercent="uploadPercent"
/>
</div>
</div>
...
...
@@ -86,6 +85,10 @@ export default {
type
:
Object
,
default
:
()
=>
{}
},
registerTools
:
{
type
:
Array
,
default
:
()
=>
[]
},
zIndex
:
{
type
:
[
String
,
Number
],
default
:
""
...
...
@@ -101,10 +104,6 @@ export default {
selectionInfo
:
{
type
:
Object
,
default
:
()
=>
{}
},
uploadPercent
:
{
type
:
Number
,
default
:
0
}
},
computed
:
{
...
...
@@ -124,7 +123,6 @@ export default {
watch
:
{
fullScreen
:
{
handler
:
function
(
val
)
{
// console.log(val);
if
(
val
)
{
this
.
toolButtonList
.
pop
();
this
.
toolButtonList
.
push
(
this
.
cancelFullScreenBtn
);
...
...
@@ -148,6 +146,20 @@ export default {
handler
:
function
(
val
)
{
this
.
$emit
(
"
getFormatType
"
,
val
);
}
},
registerTools
:
{
handler
:
function
(
val
)
{
const
list
=
this
.
toolButtonList
;
const
tableIndex
=
list
.
findIndex
(
item
=>
item
.
name
===
"
table
"
);
this
.
toolButtonList
.
splice
(
tableIndex
,
0
,
...
val
.
map
(
item
=>
{
item
.
register
=
true
;
return
item
;
})
);
}
}
},
data
()
{
...
...
@@ -237,21 +249,21 @@ export default {
},
{
name
:
"
img
"
,
icon
:
"
tupian
"
,
icon
:
"
img
"
,
tip
:
"
上传图片
"
,
startStr
:
""
,
endStr
:
""
},
{
name
:
"
file
"
,
icon
:
"
wenjian
"
,
icon
:
"
file
"
,
tip
:
"
上传附件
"
,
startStr
:
""
,
endStr
:
""
},
{
name
:
"
video
"
,
icon
:
"
shipin
"
,
icon
:
"
video
"
,
tip
:
"
上传视频
"
,
startStr
:
""
,
endStr
:
""
...
...
@@ -296,16 +308,10 @@ export default {
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
;
}
const
item
=
list
.
find
(
item
=>
item
.
name
===
type
);
this
.
$set
(
item
,
"
percent
"
,
percent
);
item
.
icon
=
parseInt
(
percent
)
===
100
||
parseInt
(
percent
)
===
0
?
type
:
"
loading
"
;
},
resetUlNum
()
{
this
.
ulNum
=
1
;
...
...
src/main.js
浏览文件 @
49d3ee27
...
...
@@ -35,6 +35,7 @@ function initMdEditor(obj) {
maxLength
,
showWordLimit
,
throttle
=
600
,
registerTools
=
[],
canPreview
,
canAttachFile
,
themeOptions
,
...
...
@@ -61,6 +62,7 @@ function initMdEditor(obj) {
zIndex
,
disabled
,
tabSize
,
registerTools
,
setPreview
:
false
,
setFullScreen
:
false
,
focus
:
false
,
...
...
@@ -122,56 +124,6 @@ function initMdEditor(obj) {
queryUserList
({
keyWord
,
callback
})
{
if
(
!
queryUserList
)
return
callback
(
false
);
// 返回false则不触发@弹窗
queryUserList
(
keyWord
,
function
(
res
)
{
// const list = [
// {
// id: 1,
// name: "藤原拓海",
// avatar:
// "https://img2.baidu.com/it/u=2380211986,3979961921&fm=26&fmt=auto&gp=0.jpg"
// },
// {
// id: 2,
// name: "高桥凉介",
// avatar:
// "https://img0.baidu.com/it/u=777620324,2343967729&fm=26&fmt=auto&gp=0.jpg"
// },
// {
// id: 3,
// name: "马奎斯",
// avatar:
// "https://img2.baidu.com/it/u=1297316011,1869565258&fm=26&fmt=auto&gp=0.jpg"
// },
// {
// id: 4,
// name: "王一博",
// url: "https://weibo.com/u/5492443184",
// avatar:
// "https://img2.baidu.com/it/u=298051053,3773223854&fm=26&fmt=auto&gp=0.jpg"
// },
// {
// id: 5,
// name: "王俊凯",
// url: "https://weibo.com/tfwangjunkai",
// avatar:
// "https://img1.baidu.com/it/u=2378425879,2273515018&fm=26&fmt=auto&gp=0.jpg"
// },
// {
// id: 6,
// name: "易烊千玺",
// url: "https://weibo.com/tfyiyangqianxi",
// avatar:
// "https://img0.baidu.com/it/u=2227200088,1939721201&fm=26&fmt=auto&gp=0.jpg"
// },
// {
// id: 7,
// name: "白敬亭",
// url: "https://weibo.com/u/2112496475",
// avatar:
// "https://img1.baidu.com/it/u=3265411836,2089649447&fm=11&fmt=auto&gp=0.jpg"
// }
// ];
// callback(res);
const
list
=
res
;
if
(
!
keyWord
)
return
callback
(
list
);
callback
(
...
...
@@ -229,6 +181,16 @@ function initMdEditor(obj) {
this
.
vEl
.
$forceUpdate
();
};
this
.
registerTools
=
function
(
option
)
{
props
.
registerTools
=
[];
if
(
Array
.
isArray
(
option
))
{
props
.
registerTools
.
push
(...
option
);
}
else
{
props
.
registerTools
.
push
(
option
);
}
this
.
vEl
.
$forceUpdate
();
};
this
.
toggleTab
=
function
(
setPreview
)
{
if
(
setPreview
!==
"
edit
"
&&
setPreview
!==
"
preview
"
)
{
props
.
setPreview
=
!
props
.
setPreview
;
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录