Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
Ya土豆儿~
Awesome-Markdown-Editor
提交
e0e776dc
Awesome-Markdown-Editor
项目概览
Ya土豆儿~
/
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 搜索 >>
提交
e0e776dc
编写于
8月 02, 2021
作者:
璃白.
🌻
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
feat:优化@用户弹窗效果
上级
6cd70f38
变更
12
展开全部
隐藏空白更改
内联
并排
Showing
12 changed file
with
86 addition
and
28 deletion
+86
-28
dist/index.html
dist/index.html
+5
-7
dist/markdown-editor.js
dist/markdown-editor.js
+1
-1
src/App.vue
src/App.vue
+1
-1
src/assets/style/card.less
src/assets/style/card.less
+5
-4
src/assets/style/global.less
src/assets/style/global.less
+5
-1
src/assets/style/variable.less
src/assets/style/variable.less
+1
-0
src/components/content/components/user-select.vue
src/components/content/components/user-select.vue
+5
-0
src/components/content/md-textarea.vue
src/components/content/md-textarea.vue
+23
-6
src/components/content/mixins/render-mixins.js
src/components/content/mixins/render-mixins.js
+5
-0
src/components/content/mixins/select-user-mixins.js
src/components/content/mixins/select-user-mixins.js
+15
-6
src/components/header/md-header.vue
src/components/header/md-header.vue
+10
-2
src/main.js
src/main.js
+10
-0
未找到文件。
dist/index.html
浏览文件 @
e0e776dc
...
...
@@ -85,8 +85,8 @@ void main()
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
:
"
![file](https://img2.baidu.com/it/u=4025475678,645544065&fm=26&fmt=auto&gp=0.jpg '附件')
\n
[
file](https://img2.baidu.com/it/u=4025475678,645544065&fm=26&fmt=auto&gp=0.jpg
)
"
,
// value: "[](http://www.baidu.com)
",
"
![file](https://img2.baidu.com/it/u=4025475678,645544065&fm=26&fmt=auto&gp=0.jpg '附件')
\n
[
](https://ask.csdn.net/questions/7483791
)
"
,
value
:
"
当前问题已结题,不再开放新的回答。
"
,
disabled
:
false
,
themeOptions
:
{
dark
:
false
,
...
...
@@ -158,11 +158,10 @@ void main()
const
newLinks
=
val
.
map
(
item
=>
{
item
.
csdn
=
true
;
item
.
title
=
"
接口返回的标题接口返回的标题接口返回的标题接口返回的标题接口返回的标题接口返回的标题接口返回的标题接口返回的标题接口返回的标题
"
;
item
.
img
=
"
https://img2.baidu.com/it/u=4025475678,645544065&fm=26&fmt=auto&gp=0.jpg
"
;
"
指定的可执行文件cmd.exe未能运行,某某函数不正确-后端-CSDN问答
"
;
item
.
img
=
"
https://g.csdnimg.cn/static/logo/favicon32.ico
"
;
item
.
desc
=
"
接口返回的描述接口返回的描述接口返回的描述接口返回的描述接口返回的描述接口返回的描述接口返回的描述接口返回的描述接口返回的描述接口返回的描述接口返回的描述接口返回的描述接口返回的描述接口返回的描述接口返回的描述接口返回的描述
"
;
"
CSDN问答为您找到指定的可执行文件cmd.exe未能运行,某某函数不正确相关问题答案,如果想了解更多关于指定的可执行文件cmd.exe未能运行,某某函数不正确 asp.net、c# 技术问题等相关问答,请访问CSDN问答。
"
;
return
item
;
});
setTimeout
(()
=>
{
...
...
@@ -214,7 +213,6 @@ void main()
// );
// }
});
// ee.focus();
document
.
querySelector
(
"
#a
"
).
onclick
=
function
()
{
// ee.disable();
...
...
dist/markdown-editor.js
浏览文件 @
e0e776dc
此差异已折叠。
点击以展开。
src/App.vue
浏览文件 @
e0e776dc
...
...
@@ -405,10 +405,10 @@ export default {
const
title
=
getLinkTitle
(
linkEl
);
linkEl
.
innerHTML
=
`
<span class="md_link_title">
${
title
||
item
.
title
}
</span>
<span class="md_link_desc">
${
item
.
desc
}
</span>
<span class="md_flex_card">
<img class="md_link_img" src="
${
item
.
img
}
" />
<span class="flex-1">
<span class="md_link_desc">
${
item
.
desc
}
</span>
<span class="md_link_url">
${
item
.
url
}
</span>
</span>
</span>
...
...
src/assets/style/card.less
浏览文件 @
e0e776dc
...
...
@@ -6,7 +6,7 @@
border: 1px solid var(--md-editor-border-color);
background: #f5f7fa;
transition: border 0.3s;
max-width: 6
0
0px;
max-width: 6
4
0px;
@media (any-hover: hover) {
&:hover {
border: 1px solid var(--md-editor-border-color-active);
...
...
@@ -16,8 +16,9 @@
color: var(--md-editor-text-color-active);
}
.md_link_img {
height: 64px;
margin-right: 16px;
height: 20px;
margin-right: 12px;
border-radius: 2px;
}
.md_link_title {
font-size: 16px;
...
...
@@ -40,7 +41,7 @@
-webkit-box-orient: vertical;
}
.md_link_url {
font-size: 1
2
px;
font-size: 1
3
px;
color: var(--md-editor-border-color-active);
overflow: hidden;
display: -webkit-box;
...
...
src/assets/style/global.less
浏览文件 @
e0e776dc
...
...
@@ -56,7 +56,6 @@ textarea {
opacity: 0;
}
.md_flex_card {
display: flex;
justify-content: space-between;
...
...
@@ -65,3 +64,8 @@ textarea {
flex: 1;
}
}
.md_call_user {
color: var(--md-editor-border-color-active);
cursor: pointer;
}
src/assets/style/variable.less
浏览文件 @
e0e776dc
...
...
@@ -10,4 +10,5 @@
--md-editor-helpdoc-color: #666666;
--md-editor-code-bg-color: #f3f4f5;
--md-editor-fullScrren-zIndex: 2000;
--md-editor-disabled-opacity: 0.5;
}
src/components/content/components/user-select.vue
浏览文件 @
e0e776dc
...
...
@@ -8,6 +8,7 @@
@
click=
"selectUser(item)"
v-for=
"(item, index) in list"
:key=
"index"
:id=
"userItemId(index)"
:class=
"[
{ active: isActive(index) }]"
>
<img
class=
"md_select_user_avatar"
:src=
"item.avatar"
/>
...
...
@@ -79,6 +80,9 @@ export default {
},
isActive
(
index
)
{
return
index
===
this
.
activeUserIndex
;
},
userItemId
(
index
)
{
return
"
md_user_id_
"
+
index
;
}
}
};
...
...
@@ -115,6 +119,7 @@ export default {
scrollbar-width: none;
margin: 0 !important;
list-style: none !important;
scroll-behavior: smooth;
&::-webkit-scrollbar {
display: none;
}
...
...
src/components/content/md-textarea.vue
浏览文件 @
e0e776dc
...
...
@@ -9,8 +9,8 @@
@
blur=
"setFocus(false)"
@
paste=
"pasteFile"
@
keydown.stop.50=
"handleCallUser"
@
keydown.stop.up
.prevent=
"changeActiveUserIndex(
'up')"
@
keydown.stop.down
.prevent=
"changeActiveUserIndex(
'down')"
@
keydown.stop.up
=
"changeActiveUserIndex($event,
'up')"
@
keydown.stop.down
=
"changeActiveUserIndex($event,
'down')"
@
keydown.enter=
"handleEnter"
@
keydown.meta.enter.exact=
"submit"
@
keydown.ctrl.enter.exact=
"submit"
...
...
@@ -20,6 +20,7 @@
:maxlength=
"maxLength"
:rows=
"rows"
:disabled=
"disabled"
:class=
"
{ disabled }"
:style="{
height: editorHeight,
overflow: editorOverFlow,
...
...
@@ -160,7 +161,7 @@ export default {
this
.
resetPreviewMinHeight
();
}
else
{
setTimeout
(()
=>
{
//
this.showSelectUser = false;
this
.
showSelectUser
=
false
;
},
200
);
}
}
...
...
@@ -217,19 +218,32 @@ export default {
}
},
methods
:
{
changeActiveUserIndex
(
type
)
{
changeActiveUserIndex
(
event
,
type
)
{
if
(
this
.
showSelectUser
)
{
event
.
preventDefault
();
const
max
=
this
.
userList
.
length
;
if
(
type
===
"
down
"
)
{
this
.
activeUserIndex
++
;
if
(
this
.
activeUserIndex
>=
max
)
{
this
.
activeUserIndex
=
0
;
}
const
index
=
this
.
activeUserIndex
;
if
(
index
%
3
===
0
)
{
document
.
getElementById
(
"
md_user_id_
"
+
this
.
activeUserIndex
)
.
parentNode
.
scrollTo
(
0
,
56
*
index
);
// .scrollIntoView({ behavior: "smooth" });
}
}
else
{
this
.
activeUserIndex
--
;
if
(
this
.
activeUserIndex
<
0
)
{
this
.
activeUserIndex
=
max
-
1
;
}
const
index
=
this
.
activeUserIndex
;
document
.
getElementById
(
"
md_user_id_
"
+
this
.
activeUserIndex
)
.
parentNode
.
scrollTo
(
0
,
56
*
index
);
// .scrollIntoView({ behavior: "smooth" });
}
}
},
...
...
@@ -248,8 +262,8 @@ export default {
keyWord
:
""
};
},
input
()
{
if
(
this
.
showSelectUser
)
this
.
handleQueryUser
();
input
(
e
)
{
if
(
this
.
showSelectUser
)
this
.
handleQueryUser
(
e
);
this
.
$emit
(
"
update:textLength
"
,
this
.
textContent
.
length
);
this
.
emitText
();
},
...
...
@@ -383,6 +397,9 @@ export default {
&::placeholder {
color: var(--md-editor-text-color);
}
&.disabled {
opacity: var(--md-editor-disabled-opacity);
}
// &:disabled {
// background: var(--md-editor-content-bg-color-disabled);
// }
...
...
src/components/content/mixins/render-mixins.js
浏览文件 @
e0e776dc
...
...
@@ -67,6 +67,11 @@ export default {
}
out
+=
"
/>
"
;
return
out
;
},
text
(
text
)
{
const
newText
=
text
.
replace
(
/
(
@.+
?
)
/g
,
`<span class="md_call_user">$1</span>`
);
return
newText
;
}
};
marked
.
use
({
renderer
});
...
...
src/components/content/mixins/select-user-mixins.js
浏览文件 @
e0e776dc
...
...
@@ -16,19 +16,20 @@ export default {
this
.
$nextTick
(()
=>
{
const
textEl
=
document
.
getElementById
(
this
.
id
);
textEl
.
setSelectionRange
(
cursorPosition
+
username
.
length
,
cursorPosition
+
username
.
length
cursorPosition
+
username
.
length
-
queryInfo
.
keyWord
.
length
,
cursorPosition
+
username
.
length
-
queryInfo
.
keyWord
.
length
);
textEl
.
focus
();
});
},
handleQueryUser
()
{
handleQueryUser
(
e
)
{
const
endPosition
=
getPosition
(
this
.
id
);
const
startPosition
=
this
.
queryInfo
.
startPosition
;
const
keyWord
=
this
.
textContent
.
slice
(
startPosition
,
endPosition
);
this
.
queryInfo
.
endPosition
=
endPosition
;
if
(
endPosition
<
startPosition
||
keyWord
.
slice
(
-
1
)
===
"
"
)
{
console
.
log
(
e
,
e
.
data
);
if
(
endPosition
<
startPosition
||
(
e
.
returnValue
&&
e
.
data
===
"
"
))
{
// if (endPosition < startPosition || keyWord.slice(-1) === " ") {
this
.
showSelectUser
=
false
;
return
;
}
...
...
@@ -72,8 +73,12 @@ export default {
this
.
$nextTick
(()
=>
{
hideEl
.
scrollTop
=
scrollTop
;
const
pEl
=
document
.
getElementById
(
"
call_position
"
);
const
frameWidth
=
textEl
.
parentNode
.
offsetWidth
;
this
.
selectUserPosition
=
{
left
:
pEl
.
offsetLeft
,
left
:
pEl
.
offsetLeft
<
frameWidth
*
(
2
/
3
)
?
pEl
.
offsetLeft
:
pEl
.
offsetLeft
-
200
,
top
:
pEl
.
offsetTop
-
textEl
.
scrollTop
// left: pEl.getBoundingClientRect().left,
// top: pEl.getBoundingClientRect().top
...
...
@@ -83,6 +88,10 @@ export default {
this
.
queryInfo
.
startPosition
=
getPosition
(
this
.
id
)
+
1
;
this
.
queryInfo
.
endPosition
=
getPosition
(
this
.
id
)
+
1
;
this
.
$emit
(
"
queryUserList
"
,
this
.
queryInfo
.
keyWord
);
this
.
$nextTick
(()
=>
{
const
list
=
textEl
.
parentNode
.
querySelector
(
"
.md_select_user
"
);
if
(
list
)
list
.
scrollTo
(
0
,
0
);
});
});
}
}
...
...
src/components/header/md-header.vue
浏览文件 @
e0e776dc
<
template
>
<div
:class=
"['md_header',
{ active: isFocus }]">
<div
v-if=
"!disabled"
class=
"header_tabs
"
>
<div
:class=
"['header_tabs',
{ disabled }]
">
<div
:class=
"['tab_item',
{ active: canPreview
&&
!showPreview }]"
@click="setShowPreview(false)"
...
...
@@ -17,7 +17,7 @@
<span>
预览
</span>
</div>
</div>
<div
class=
"header_tools"
v-if=
"!disabled &&
!showPreview"
>
<div
:class=
"['header_tools',
{ disabled }]" v-if="
!showPreview">
<tool-button
:ref=
"item.name"
:ulNum.sync=
"ulNum"
...
...
@@ -393,6 +393,10 @@ export default {
font-size: 14px;
// padding-bottom: 10px;
box-sizing: border-box;
&.disabled {
pointer-events: none;
opacity: var(--md-editor-disabled-opacity);
}
.tab_item {
color: var(--md-editor-text-color);
cursor: pointer;
...
...
@@ -446,6 +450,10 @@ export default {
align-items: center;
// padding-bottom: 10px;
box-sizing: border-box;
&.disabled {
pointer-events: none;
opacity: var(--md-editor-disabled-opacity);
}
}
}
</
style
>
src/main.js
浏览文件 @
e0e776dc
...
...
@@ -144,20 +144,30 @@ function initMdEditor(obj) {
{
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
"
}
];
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录