Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
月谷丶
Awesome-Markdown-Editor
提交
28fdff66
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 搜索 >>
提交
28fdff66
编写于
7月 23, 2021
作者:
璃白.
🌻
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
feat:添加@弹窗
上级
9db2d1e1
变更
8
隐藏空白更改
内联
并排
Showing
8 changed file
with
137 addition
and
42 deletion
+137
-42
dist/index.html
dist/index.html
+8
-6
dist/markdown-editor.js
dist/markdown-editor.js
+1
-1
src/assets/js/eventBus.js
src/assets/js/eventBus.js
+0
-3
src/assets/style/global.less
src/assets/style/global.less
+12
-4
src/components/content/components/link-card.vue
src/components/content/components/link-card.vue
+0
-18
src/components/content/components/select-user.vue
src/components/content/components/select-user.vue
+47
-0
src/components/content/md-textarea.vue
src/components/content/md-textarea.vue
+69
-8
src/components/header/md-header.vue
src/components/header/md-header.vue
+0
-2
未找到文件。
dist/index.html
浏览文件 @
28fdff66
...
...
@@ -9,6 +9,7 @@
.md_container
{
/* width: 600px !important; */
margin
:
40px
auto
;
margin-top
:
600px
;
}
body
{
/* background-color: #222226; */
...
...
@@ -85,7 +86,6 @@ void main()
"
## 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
:
"
![img](https://img2.baidu.com/it/u=4025475678,645544065&fm=26&fmt=auto&gp=0.jpg)
"
,
value
:
"
http://www.baidu.com
"
,
disabled
:
false
,
themeOptions
:
{
dark
:
false
,
...
...
@@ -94,9 +94,9 @@ void main()
// textColorActive: "#000",
codeTheme
:
"
atom-one-dark
"
},
// height: 4
00,
rows
:
6
,
height
:
40
,
height
:
3
00
,
// rows: 'auto'
,
//
height: 40,
toolsOptions
:
{
format
:
true
,
bold
:
true
,
...
...
@@ -115,7 +115,6 @@ void main()
zIndex
:
7000
,
// maxLength: 20000,
showWordLimit
:
true
,
rows
:
"
10
"
,
// height: "600",
filePathRule
:
/^https:
\/\/
ss2
\.
bdstatic
\.
com/
,
...
...
@@ -156,7 +155,10 @@ void main()
},
renderLinks
:
function
(
val
,
callback
)
{
const
newLinks
=
val
.
map
(
item
=>
{
item
.
title
=
"
接口返回的标题
"
;
item
.
title
=
"
接口返回的标题接口返回的标题接口返回的标题接口返回的标题接口返回的标题接口返回的标题接口返回的标题接口返回的标题接口返回的标题
"
;
item
.
img
=
"
https://img2.baidu.com/it/u=4025475678,645544065&fm=26&fmt=auto&gp=0.jpg
"
;
item
.
desc
=
"
接口返回的描述接口返回的描述接口返回的描述接口返回的描述接口返回的描述接口返回的描述接口返回的描述接口返回的描述接口返回的描述接口返回的描述接口返回的描述接口返回的描述接口返回的描述接口返回的描述接口返回的描述接口返回的描述
"
;
return
item
;
...
...
dist/markdown-editor.js
浏览文件 @
28fdff66
因为 它太大了无法显示 source diff 。你可以改为
查看blob
。
src/assets/js/eventBus.js
已删除
100644 → 0
浏览文件 @
9db2d1e1
import
Vue
from
"
vue
"
;
let
eventBus
=
new
Vue
();
export
default
eventBus
;
src/assets/style/global.less
浏览文件 @
28fdff66
...
...
@@ -44,10 +44,18 @@ textarea {
opacity: 0;
}
// img {
// display: block;
// margin: 0;
// }
.slideup-fade-enter-active {
transition: all 0.3s ease;
}
.slideup-fade-leave-active {
transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1);
}
.slideup-fade-enter, .slideup-fade-leave-to
/* .slide-fade-leave-active for below version 2.1.8 */ {
transform: translateY(40px);
opacity: 0;
}
.md_flex_card {
display: flex;
...
...
src/components/content/components/link-card.vue
已删除
100644 → 0
浏览文件 @
9db2d1e1
<
template
>
<div
class=
"md_link_card"
>
<div
class=
"title"
>
图像识别从入门到放弃
</div>
<div
class=
"desc"
>
此文章来自
</div>
<div
class=
"link"
></div>
</div>
</
template
>
<
script
>
export
default
{
data
()
{
return
{};
}
};
</
script
>
<
style
lang=
"less"
scoped
>
.md_link_card {
}
</
style
>
src/components/content/components/select-user.vue
0 → 100644
浏览文件 @
28fdff66
<
template
>
<div
class=
"md_select_user"
:style=
"
{ left: this.left + 'px', top: this.top + 'px' }"
>
选择用户弹窗
</div>
</
template
>
<
script
>
export
default
{
props
:
{
position
:
{
type
:
Object
,
default
:
()
=>
{
return
{
left
:
0
,
top
:
0
};
}
}
},
watch
:
{
position
:
{
immediate
:
true
,
handler
:
function
({
left
,
top
})
{
this
.
left
=
left
+
14
;
this
.
top
=
top
+
14
;
}
}
},
data
()
{
return
{
left
:
0
,
top
:
0
};
}
};
</
script
>
<
style
lang=
"less"
scoped
>
.md_select_user {
position: fixed;
width: 100px;
height: 200px;
background: #fff;
border: 1px solid red;
}
</
style
>
src/components/content/md-textarea.vue
浏览文件 @
28fdff66
...
...
@@ -12,6 +12,7 @@
@
keydown.meta.enter.exact=
"submit"
@
keydown.ctrl.enter.exact=
"submit"
@
keydown.tab.prevent=
"$emit('tab')"
@
keyup=
"keyup"
v-model=
"textContent"
:placeholder=
"placeholder"
:maxlength=
"maxLength"
...
...
@@ -35,6 +36,9 @@
:showHelp.sync=
"showHelp"
/>
</transition>
<transition
name=
"slideup-fade"
>
<selectUser
v-show=
"showSelectUser"
:position=
"selectUserPosition"
/>
</transition>
</div>
</
template
>
<
script
>
...
...
@@ -43,15 +47,16 @@ import {
getPosition
,
getFilteredTags
,
getLinkTags
,
formatText
,
addLanguageClass
,
throttle
as
throttleFn
}
from
"
@/assets/js/utils
"
;
import
eventBus
from
"
@/assets/js/eventBus
"
;
import
marked
from
"
marked
"
;
import
selectUser
from
"
./components/select-user
"
;
import
helpDoc
from
"
./components/help-doc
"
;
import
DOMPurify
from
"
dompurify
"
;
export
default
{
components
:
{
helpDoc
},
components
:
{
helpDoc
,
selectUser
},
props
:
{
id
:
{
type
:
String
,
...
...
@@ -121,7 +126,9 @@ export default {
return
{
textContent
:
""
,
editorHeight
:
"
auto
"
,
editorOverFlow
:
"
auto
"
editorOverFlow
:
"
auto
"
,
showSelectUser
:
false
,
selectUserPosition
:
{
left
:
0
,
top
:
0
}
};
},
created
()
{
...
...
@@ -213,26 +220,70 @@ export default {
this
.
$emit
(
"
getFilteredTags
"
,
filteredTags
);
this
.
$emit
(
"
update:html
"
,
cleanHtml
);
this
.
$emit
(
"
renderLinksHtml
"
,
{
vDom
,
links
});
if
(
links
.
length
)
this
.
$emit
(
"
renderLinksHtml
"
,
{
vDom
,
links
});
},
input
()
{
this
.
$emit
(
"
update:textLength
"
,
this
.
textContent
.
length
);
this
.
emitText
();
this
.
showSelectUser
=
false
;
},
reSizeTextareaHeight
()
{
keyup
(
e
)
{
if
(
e
.
key
===
"
@
"
)
{
this
.
createSelectUserDialog
();
}
},
createSelectUserDialog
()
{
const
textEl
=
document
.
getElementById
(
this
.
id
);
if
(
!
textEl
)
return
;
const
height
=
getComputedStyle
(
textEl
).
getPropertyValue
(
"
height
"
);
const
width
=
getComputedStyle
(
textEl
).
getPropertyValue
(
"
width
"
);
const
scrollTop
=
textEl
.
scrollTop
;
const
originalText
=
this
.
textContent
;
const
cursorPoint
=
getPosition
(
this
.
id
);
const
selectionInfo
=
{
selectionStart
:
cursorPoint
-
1
,
selectionEnd
:
cursorPoint
};
const
newText
=
formatText
(
originalText
,
selectionInfo
,
"
<span id='call_position'>
"
,
"
</span>
"
);
const
hideEl
=
this
.
createHideEl
(
"
clac_position_El_
"
);
hideEl
.
style
.
position
=
"
absolute
"
;
hideEl
.
style
.
width
=
width
;
hideEl
.
style
.
height
=
height
;
hideEl
.
style
.
overflowY
=
"
auto
"
;
hideEl
.
style
.
wordBreak
=
"
break-all
"
;
hideEl
.
style
.
top
=
"
14px
"
;
hideEl
.
style
.
left
=
0
;
hideEl
.
style
.
whiteSpace
=
"
pre-wrap
"
;
hideEl
.
innerHTML
=
newText
;
this
.
$nextTick
(()
=>
{
hideEl
.
scrollTop
=
scrollTop
;
const
pEl
=
document
.
getElementById
(
"
call_position
"
);
this
.
selectUserPosition
=
{
left
:
pEl
.
getBoundingClientRect
().
left
,
top
:
pEl
.
getBoundingClientRect
().
top
};
textEl
.
parentNode
.
removeChild
(
hideEl
);
this
.
showSelectUser
=
true
;
});
},
createHideEl
(
type
)
{
const
textEl
=
document
.
getElementById
(
this
.
id
);
if
(
!
textEl
)
return
;
const
fontSize
=
getComputedStyle
(
textEl
).
getPropertyValue
(
"
font-size
"
);
const
lineHeight
=
getComputedStyle
(
textEl
).
getPropertyValue
(
"
line-height
"
);
const
fontFamily
=
getComputedStyle
(
textEl
).
getPropertyValue
(
"
font-family
"
);
const
hideElId
=
"
hdieEl
"
+
this
.
id
;
const
hideElId
=
type
+
this
.
id
;
let
hideEl
=
document
.
getElementById
(
hideElId
);
if
(
!
hideEl
)
{
hideEl
=
document
.
createElement
(
"
div
"
);
textEl
.
parentNode
.
appendChild
(
hideEl
);
...
...
@@ -241,6 +292,14 @@ export default {
hideEl
.
style
.
fontSize
=
fontSize
;
hideEl
.
style
.
lineHeight
=
lineHeight
;
hideEl
.
style
.
fontFamily
=
fontFamily
;
return
hideEl
;
},
reSizeTextareaHeight
()
{
const
textEl
=
document
.
getElementById
(
this
.
id
);
if
(
!
textEl
)
return
;
const
fontSize
=
getComputedStyle
(
textEl
).
getPropertyValue
(
"
font-size
"
);
const
hideEl
=
this
.
createHideEl
(
"
clac_height_El_
"
);
hideEl
.
innerText
=
this
.
textContent
;
const
contentHeight
=
hideEl
.
offsetHeight
;
this
.
editorHeight
=
this
.
fullScreen
...
...
@@ -324,6 +383,8 @@ export default {
color: var(--md-editor-text-color-active);
height: var(--md-editor-height);
resize: none;
font-size: 14px;
word-break: break-all;
font-family: "Menlo", -apple-system, SF UI Text, Arial, PingFang SC,
Hiragino Sans GB, Microsoft YaHei, WenQuanYi Micro Hei, sans-serif, SimHei,
SimSun;
...
...
src/components/header/md-header.vue
浏览文件 @
28fdff66
...
...
@@ -360,12 +360,10 @@ export default {
selectionEnd
:
""
});
this
.
$nextTick
(()
=>
{
// setTimeout(() => {
textEl
.
focus
();
textEl
.
setSelectionRange
(
cursorPoint
+
len
,
cursorPoint
+
len
);
textEl
.
scrollTop
=
scrollTop
;
});
// }, 0);
}
}
};
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录