Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
元存储
Awesome-Markdown-Editor
提交
93634f32
Awesome-Markdown-Editor
项目概览
元存储
/
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,发现更多精彩内容 >>
提交
93634f32
编写于
7月 09, 2021
作者:
璃白.
🌻
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
feat:添加语言选择
上级
087f696f
变更
5
隐藏空白更改
内联
并排
Showing
5 changed file
with
182 addition
and
5 deletion
+182
-5
src/App.vue
src/App.vue
+4
-1
src/components/header/components/language-list.vue
src/components/header/components/language-list.vue
+70
-0
src/components/header/components/table-select.vue
src/components/header/components/table-select.vue
+58
-0
src/components/header/components/tool-button.vue
src/components/header/components/tool-button.vue
+49
-3
src/components/header/md-header.vue
src/components/header/md-header.vue
+1
-1
未找到文件。
src/App.vue
浏览文件 @
93634f32
...
...
@@ -69,6 +69,7 @@
:can-attach-file=
"canAttachFile"
v-if=
"!showPreview && canAttachFile"
/>
-->
<tableSelect
/>
</div>
</
template
>
<
script
>
...
...
@@ -76,13 +77,15 @@ import markdownHeader from "./components/header/md-header";
import
markdownFooter
from
"
./components/footer/md-footer
"
;
import
markdownEditor
from
"
./components/content/md-textarea
"
;
import
markdownPreview
from
"
./components/content/md-preview
"
;
import
tableSelect
from
"
./components/header/components/table-select
"
;
import
{
formatText
,
checktUrl
}
from
"
@/assets/js/utils
"
;
export
default
{
components
:
{
markdownHeader
,
markdownFooter
,
markdownEditor
,
markdownPreview
markdownPreview
,
tableSelect
},
props
:
{
placeholder
:
{
...
...
src/components/header/components/language-list.vue
0 → 100644
浏览文件 @
93634f32
<
template
>
<ul>
<li
@
click=
"$emit('select', item)"
v-for=
"(item, index) in list"
:key=
"index"
>
{{
item
}}
</li>
</ul>
</
template
>
<
script
>
export
default
{
data
()
{
return
{
list
:
[
"
Bash
"
,
"
C
"
,
"
C++
"
,
"
C#
"
,
"
CLike
"
,
"
CSS
"
,
"
Go
"
,
"
Html
"
,
"
Java
"
,
"
JavaScript
"
,
"
TypeScript
"
,
"
Kotlin
"
,
"
Markup
"
,
"
Objective-C
"
,
"
Peri
"
,
"
PHP
"
,
"
Shell
"
,
"
Python
"
,
"
Ruby
"
,
"
SQL
"
,
"
Swift
"
,
"
VB.Net
"
,
"
YAML
"
,
"
Erlang
"
,
"
Scala
"
,
"
Clojure
"
,
"
Cobol
"
,
"
CoffeeScript
"
,
"
CommonLisp
"
,
"
R
"
,
"
XML
"
]
};
}
};
</
script
>
<
style
lang=
"less"
scoped
>
ul {
max-height: 160px;
overflow-y: auto;
margin-top: 2px;
&::-webkit-scrollbar {
display: none;
}
li {
cursor: pointer;
height: 24px;
line-height: 24px;
&:hover {
color: var(--md-editor-border-color-active);
}
}
}
</
style
>
src/components/header/components/table-select.vue
0 → 100644
浏览文件 @
93634f32
<
template
>
<div
class=
"block_container"
ref=
"block_container"
>
<div
@
mousemove.stop=
"getCursorPoint"
:class=
"['block',
{ active: item.active }]"
v-for="(item, index) in list"
:key="index"
>
</div>
</div>
</
template
>
<
script
>
import
{
throttle
as
throttleFn
}
from
"
@/assets/js/utils
"
;
export
default
{
data
()
{
return
{
list
:
new
Array
(
40
).
fill
({
index
:
0
,
active
:
false
})
};
},
computed
:
{},
methods
:
{
getCursorPoint
(
e
)
{
console
.
log
(
e
.
clientX
,
e
.
clientY
);
const
target
=
e
.
target
;
const
{
offsetLeft
,
offsetTop
}
=
target
;
if
(
e
.
clientX
>
offsetLeft
)
{
target
.
className
=
"
block active
"
;
}
// console.log(offsetLeft, offsetTop);
}
}
};
</
script
>
<
style
lang=
"less"
scoped
>
@block-size: 16px;
@block-margin: 2px;
.block_container {
width: (@block-size+ @block-margin*2) * 10;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
.block {
cursor: pointer;
width: @block-size;
height: @block-size;
box-sizing: border-box;
margin: @block-margin;
border: 1px solid var(--md-editor-border-color);
&:hover,
&.active {
border: 1px solid var(--md-editor-border-color-active);
}
}
}
</
style
>
src/components/header/tool-button.vue
→
src/components/header/
components/
tool-button.vue
浏览文件 @
93634f32
...
...
@@ -6,6 +6,22 @@
>
<span
:class=
"['icon iconfont', `icon-$
{info.icon}`]">
</span>
</div>
<div
v-else-if=
"info.name === 'code'"
@
click=
"handleTool(info.name, info.startStr, info.endStr)"
v-tip.bottom=
"codeOptions"
class=
"tool_button"
>
<span
:class=
"['icon iconfont', `icon-$
{info.icon}`]">
</span>
</div>
<div
v-else-if=
"info.name === 'table'"
@
click=
"handleTool(info.name, info.startStr, info.endStr)"
v-tip.bottom=
"tableOptions"
class=
"tool_button"
>
<span
:class=
"['icon iconfont', `icon-$
{info.icon}`]">
</span>
</div>
<div
v-else
v-tip.bottom=
"options"
...
...
@@ -17,7 +33,10 @@
</
template
>
<
script
>
import
{
formatText
,
checkBoswer
}
from
"
@/assets/js/utils
"
;
import
languageList
from
"
./language-list
"
;
import
tableSelect
from
"
./table-select
"
;
export
default
{
components
:
{
languageList
,
tableSelect
},
props
:
{
info
:
{
type
:
Object
,
...
...
@@ -67,12 +86,39 @@ export default {
zIndex
:
parseInt
(
this
.
zIndex
)
+
1
,
theme
:
this
.
darkMode
?
"
dark
"
:
"
light
"
};
},
codeOptions
()
{
return
{
content
:
this
.
info
.
tip
,
customComponent
:
languageList
,
customListeners
:
{
select
:
val
=>
{
console
.
log
(
val
);
const
lang
=
val
.
toLowerCase
().
replace
(
/-/
,
""
);
this
.
handleTool
(
"
code
"
,
"
\n
```
"
+
lang
,
"
\n\n\n
```
"
);
}
},
zIndex
:
parseInt
(
this
.
zIndex
)
+
1
,
theme
:
this
.
darkMode
?
"
dark
"
:
"
light
"
};
},
tableOptions
()
{
return
{
content
:
this
.
info
.
tip
,
customComponent
:
tableSelect
,
customListeners
:
{
select
:
val
=>
{
console
.
log
(
val
);
const
lang
=
val
.
toLowerCase
().
replace
(
/-/
,
""
);
this
.
handleTool
(
"
code
"
,
"
\n
```
"
+
lang
,
"
\n\n\n
```
"
);
}
},
zIndex
:
parseInt
(
this
.
zIndex
)
+
1
,
theme
:
this
.
darkMode
?
"
dark
"
:
"
light
"
};
}
},
methods
:
{
// resetUlNum() {
// this.ulNum = 1;
// },
handleTool
(
type
,
startStr
,
endStr
)
{
switch
(
type
)
{
case
"
bold
"
:
...
...
src/components/header/md-header.vue
浏览文件 @
93634f32
...
...
@@ -41,7 +41,7 @@ import {
getPosition
,
removeBlankLine
}
from
"
@/assets/js/utils
"
;
import
toolButton
from
"
./tool-button
"
;
import
toolButton
from
"
./
components/
tool-button
"
;
export
default
{
components
:
{
toolButton
},
props
:
{
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录