Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
c4fx
Awesome-Markdown-Editor
提交
4c9a941b
Awesome-Markdown-Editor
项目概览
c4fx
/
Awesome-Markdown-Editor
与 Fork 源项目一致
Fork自
gitcode_dev / Awesome-Markdown-Editor
通知
1
Star
1
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
1
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
Awesome-Markdown-Editor
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
1
Issue
1
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
4c9a941b
编写于
6月 28, 2021
作者:
璃白.
🌻
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
fix
上级
8b579618
变更
9
隐藏空白更改
内联
并排
Showing
9 changed file
with
126 addition
and
78 deletion
+126
-78
src/App.vue
src/App.vue
+2
-0
src/assets/.DS_Store
src/assets/.DS_Store
+0
-0
src/assets/js/utils.js
src/assets/js/utils.js
+26
-1
src/assets/style/global.less
src/assets/style/global.less
+2
-2
src/assets/style/markdown.less
src/assets/style/markdown.less
+70
-62
src/components/content/md-preview.vue
src/components/content/md-preview.vue
+10
-9
src/components/content/md-textarea.vue
src/components/content/md-textarea.vue
+1
-0
src/components/header/md-header.vue
src/components/header/md-header.vue
+14
-3
src/main.js
src/main.js
+1
-1
未找到文件。
src/App.vue
浏览文件 @
4c9a941b
...
...
@@ -4,6 +4,7 @@
:id="'md_' + id"
>
<markdown-header
:ref=
"'md_header' + id"
:text.sync=
"text"
:selectionInfo.sync=
"selectionInfo"
:showPreview.sync=
"showPreview"
...
...
@@ -43,6 +44,7 @@
:textLength.sync=
"textLength"
:rows=
"rows"
:id=
"textareaId"
@
tab=
"$refs['md_header' + id].tab()"
@
submit=
"submit"
v-show=
"!showPreview"
/>
...
...
src/assets/.DS_Store
0 → 100644
浏览文件 @
4c9a941b
文件已添加
src/assets/js/utils.js
浏览文件 @
4c9a941b
...
...
@@ -69,15 +69,18 @@ export function initStyle({
borderColorActive
,
textColor
,
textColorActive
,
placeholderColor
,
frameBgColor
,
contentBgColor
,
codeBgColor
codeBgColor
,
codeTheme
})
{
// 夜晚模式
if
(
dark
)
{
borderColor
=
"
#44444F
"
;
borderColorActive
=
"
#2998F2
"
;
textColor
=
"
#777888
"
;
placeholderColor
=
"
#777888
"
;
textColorActive
=
"
#CCCCD8
"
;
frameBgColor
=
"
#222226
"
;
codeBgColor
=
"
#777888
"
;
...
...
@@ -127,6 +130,28 @@ export function initStyle({
textColorActive
);
}
if
(
codeTheme
)
{
switch
(
codeTheme
)
{
case
"
dark
"
:
import
(
"
highlight.js/styles/dark.css
"
);
break
;
case
"
github
"
:
import
(
"
highlight.js/styles/github.css
"
);
break
;
case
"
idea
"
:
import
(
"
highlight.js/styles/idea.css
"
);
break
;
case
"
light
"
:
import
(
"
highlight.js/styles/lightfair.css
"
);
break
;
case
"
monokai
"
:
import
(
"
highlight.js/styles/monokai.css
"
);
break
;
default
:
break
;
}
}
}
//
...
...
src/assets/style/global.less
浏览文件 @
4c9a941b
@import "./variable.less";
@import "./iconfont.less";
@import
'./markdown.less'
;
@import
"./markdown.less"
;
* {
padding: 0;
margin: 0;
-webkit-tap-highlight-color: rgba(0,
0,0,0);
;
-webkit-tap-highlight-color: rgba(0,
0, 0, 0)
;
}
html,
...
...
src/assets/style/markdown.less
浏览文件 @
4c9a941b
.
htmledit_views
address,
.
htmledit_views
cite,
.
htmledit_views
dfn,
.
htmledit_views
em,
.
htmledit_views
i,
.
htmledit_views
span[lang],
.
htmledit_views
var {
.
md_preview
address,
.
md_preview
cite,
.
md_preview
dfn,
.
md_preview
em,
.
md_preview
i,
.
md_preview
span[lang],
.
md_preview
var {
font-style: italic;
}
.
htmledit_views
{
.
md_preview
{
font-family: -apple-system, SF UI Text, Arial, PingFang SC, Hiragino Sans GB,
Microsoft YaHei, WenQuanYi Micro Hei, sans-serif, SimHei, SimSun;
...
...
@@ -393,51 +393,51 @@
margin: 24px;
word-wrap: break-word;
}
.
htmledit_views
.image-grayscale img,
.
htmledit_views
img.image-grayscale {
.
md_preview
.image-grayscale img,
.
md_preview
img.image-grayscale {
filter: grayscale(100%);
}
p[align="center"] {
text-align: center;
}
.
htmledit_views
strong,
.
htmledit_views
strong span,
.
htmledit_views
strong em {
.
md_preview
strong,
.
md_preview
strong span,
.
md_preview
strong em {
font-weight: 700;
}
.
htmledit_views
em strong {
.
md_preview
em strong {
font-style: italic;
}
.
htmledit_views
h1,
.
htmledit_views
h2,
.
htmledit_views
h3,
.
htmledit_views
h4,
.
htmledit_views
h5,
.
htmledit_views
h6 {
.
md_preview
h1,
.
md_preview
h2,
.
md_preview
h3,
.
md_preview
h4,
.
md_preview
h5,
.
md_preview
h6 {
color: #4f4f4f;
margin: 8px 0 16px;
font-weight: 700;
}
.
htmledit_views
ol,
.
htmledit_views
ul {
.
md_preview
ol,
.
md_preview
ul {
margin: 0 0 24px;
padding: 0;
font-size: 16px;
}
.
htmledit_views
blockquote ol,
.
htmledit_views
blockquote ul {
.
md_preview
blockquote ol,
.
md_preview
blockquote ul {
margin-bottom: 16px;
padding: 0;
font-size: 16px;
line-height: 24px;
}
.
htmledit_views
blockquote ol li,
.
htmledit_views
blockquote ul li {
.
md_preview
blockquote ol li,
.
md_preview
blockquote ul li {
margin-bottom: 0;
}
.
htmledit_views
table tr td,
.
htmledit_views
table tr th {
.
md_preview
table tr td,
.
md_preview
table tr th {
border: 1px solid #ddd;
font-size: 14px;
color: #4f4f4f;
...
...
@@ -445,8 +445,8 @@ p[align="center"] {
padding: 8px;
text-align: left;
}
.
htmledit_views
table tr td p,
.
htmledit_views
table tr th p {
.
md_preview
table tr td p,
.
md_preview
table tr th p {
font-size: 14px;
color: #4f4f4f;
margin: 0;
...
...
@@ -454,76 +454,84 @@ p[align="center"] {
text-align: left;
line-height: 22px;
}
.
htmledit_views
table tr td code,
.
htmledit_views
table tr th code {
.
md_preview
table tr td code,
.
md_preview
table tr th code {
white-space: normal;
word-break: break-word;
}
.
htmledit_views
abbr[data-original-title],
.
htmledit_views
abbr[title] {
.
md_preview
abbr[data-original-title],
.
md_preview
abbr[title] {
cursor: help;
border-bottom: 1px dotted #999;
}
.marker {
background-color: #ff0;
}
.htmledit_views kbd,
.htmledit_views pre,
.htmledit_views samp {
.md_preview pre {
overflow: hidden;
code {
overflow-y: hidden;
}
}
.md_preview kbd,
.md_preview pre,
.md_preview samp {
font-family: Consolas, Inconsolata, Courier, monospace;
font-size: 14px;
line-height: 22px;
color: #000;
}
.htmledit_views code ol li div.hljs-ln-code,
.htmledit_views code ol li div.hljs-ln-numbers,
.htmledit_views pre code,
.htmledit_views pre code div,
.htmledit_views pre code span {
.md_preview code ol li div.hljs-ln-code,
.md_preview code ol li div.hljs-ln-numbers,
.md_preview pre code,
.md_preview pre code div,
.md_preview pre code span {
font-family: "Source Code Pro", "DejaVu Sans Mono", "Ubuntu Mono",
"Anonymous Pro", "Droid Sans Mono", Menlo, Monaco, Consolas, Inconsolata,
Courier, monospace, "PingFang SC", "Microsoft YaHei", sans-serif;
}
.
htmledit_views
a:focus,
.
htmledit_views
a:hover {
.
md_preview
a:focus,
.
md_preview
a:hover {
color: #ca0c16;
}
.
htmledit_views
.flow-chart,
.
htmledit_views
.sequence-diagram {
.
md_preview
.flow-chart,
.
md_preview
.sequence-diagram {
text-align: center;
margin-bottom: 24px;
font-size: 14px !important;
}
.
htmledit_views
.flow-chart [fill="#000"],
.
htmledit_views
.flow-chart [fill="#000000"],
.
htmledit_views
.flow-chart [fill="black"],
.
htmledit_views
.sequence-diagram [fill="#000"],
.
htmledit_views
.sequence-diagram [fill="#000000"],
.
htmledit_views
.sequence-diagram [fill="black"] {
.
md_preview
.flow-chart [fill="#000"],
.
md_preview
.flow-chart [fill="#000000"],
.
md_preview
.flow-chart [fill="black"],
.
md_preview
.sequence-diagram [fill="#000"],
.
md_preview
.sequence-diagram [fill="#000000"],
.
md_preview
.sequence-diagram [fill="black"] {
fill: #4f4f4f;
}
.
htmledit_views
.flow-chart [stroke="#000000"],
.
htmledit_views
.sequence-diagram [stroke="#000000"] {
.
md_preview
.flow-chart [stroke="#000000"],
.
md_preview
.sequence-diagram [stroke="#000000"] {
stroke: #4f4f4f;
}
.
htmledit_views
pre code,
.
htmledit_views
pre code div,
.
htmledit_views
pre code span {
.
md_preview
pre code,
.
md_preview
pre code div,
.
md_preview
pre code span {
font-size: 14px;
}
.
htmledit_views
.prettyprint,
.
htmledit_views
pre.prettyprint {
.
md_preview
.prettyprint,
.
md_preview
pre.prettyprint {
margin: 0 0 24px;
padding: 8px 16px 4px 56px;
background-color: #f6f8fa;
border: none;
}
.
htmledit_views
code ol li div.hljs-ln-code,
.
htmledit_views
code ol li div.hljs-ln-numbers {
.
md_preview
code ol li div.hljs-ln-code,
.
md_preview
code ol li div.hljs-ln-numbers {
float: left;
height: 22px;
}
.
htmledit_views
pre code .hljs-comment {
.
md_preview
pre code .hljs-comment {
color: green;
}
src/components/content/md-preview.vue
浏览文件 @
4c9a941b
<
template
>
<div
:class=
"['
htmledit_views
',
{ fullScreen }]">
<div
v-html=
"html"
:style=
"
{ 'min-height': htmlHeight + 'px' }">
</div>
<div
:class=
"['
md_preview
',
{ fullScreen }]">
<div
v-html=
"html"
:style=
"
{ 'min-height': html
Min
Height + 'px' }">
</div>
</div>
</
template
>
<
script
>
...
...
@@ -9,7 +9,7 @@ import "highlight.js/styles/github.css";
export
default
{
data
()
{
return
{
htmlHeight
:
150
html
Min
Height
:
150
};
},
props
:
{
...
...
@@ -30,9 +30,9 @@ export default {
default
:
false
}
},
mounted
()
{
this
.
reset
Height
();
},
//
mounted() {
// this.resetMin
Height();
//
},
methods
:
{
transferMarkdown
(
val
)
{
marked
.
setOptions
({
...
...
@@ -46,17 +46,18 @@ export default {
const
html
=
marked
(
str
);
this
.
$emit
(
"
update:html
"
,
html
);
},
resetHeight
()
{
reset
Min
Height
()
{
const
textEl
=
document
.
getElementById
(
this
.
id
);
if
(
!
textEl
)
return
;
const
height
=
textEl
.
offsetHeight
;
this
.
htmlHeight
=
height
;
this
.
html
Min
Height
=
height
;
}
},
watch
:
{
text
:
{
immediate
:
true
,
handler
:
function
(
val
)
{
this
.
resetMinHeight
();
this
.
transferMarkdown
(
val
);
}
}
...
...
@@ -64,7 +65,7 @@ export default {
};
</
script
>
<
style
lang=
"less"
scoped
>
.
htmledit_views
{
.
md_preview
{
// min-height: 148px;
padding: 14px 0;
box-sizing: border-box;
...
...
src/components/content/md-textarea.vue
浏览文件 @
4c9a941b
...
...
@@ -9,6 +9,7 @@
@
paste=
"pasteFile"
@
keydown.meta.enter.exact=
"submit"
@
keydown.ctrl.enter.exact=
"submit"
@
keydown.tab.prevent=
"$emit('tab')"
v-model=
"textContent"
:placeholder=
"placeholder"
:maxlength=
"maxLength"
...
...
src/components/header/md-header.vue
浏览文件 @
4c9a941b
...
...
@@ -17,6 +17,7 @@
</div>
<div
class=
"header_tools"
v-if=
"!showPreview"
>
<tool-button
ref=
"tool_button"
:info=
"item"
:fullScreen=
"fullScreen"
@
setFullScreen=
"$emit('update:fullScreen', $event)"
...
...
@@ -33,7 +34,7 @@
</div>
</
template
>
<
script
>
import
{
isNotFalse
}
from
"
@/assets/js/utils
"
;
import
{
isNotFalse
,
formatText
}
from
"
@/assets/js/utils
"
;
import
toolButton
from
"
./tool-button
"
;
export
default
{
components
:
{
toolButton
},
...
...
@@ -88,7 +89,7 @@ export default {
watch
:
{
fullScreen
:
{
handler
:
function
(
val
)
{
console
.
log
(
val
);
//
console.log(val);
if
(
val
)
{
this
.
toolButtonList
.
pop
();
this
.
toolButtonList
.
push
(
this
.
cancelFullScreenBtn
);
...
...
@@ -193,6 +194,16 @@ export default {
},
methods
:
{
tab
()
{
const
startStr
=
"
"
;
const
endStr
=
""
;
const
originalText
=
this
.
text
;
const
selectionInfo
=
this
.
selectionInfo
;
const
newText
=
formatText
(
originalText
,
selectionInfo
,
startStr
,
endStr
);
this
.
updateText
(
newText
);
// this.$refs.tool_button.tab();
},
setShowPreview
(
val
)
{
this
.
$emit
(
"
update:showPreview
"
,
val
);
},
...
...
@@ -247,7 +258,7 @@ export default {
color: var(--md-editor-text-color-active);
&::after {
width: 100%;
background: var(--md-editor-border-color);
background: var(--md-editor-border-color
-active
);
}
}
&.active {
...
...
src/main.js
浏览文件 @
4c9a941b
...
...
@@ -4,7 +4,6 @@ import Vtip from "vtip";
import
"
vtip/lib/index.min.css
"
;
import
{
initStyle
,
setzIndex
,
isNotEmpty
}
from
"
@/assets/js/utils
"
;
import
"
@/assets/style/global.less
"
;
Vue
.
use
(
Vtip
.
directive
);
function
initMdEditor
(
obj
)
{
...
...
@@ -39,6 +38,7 @@ function initMdEditor(obj) {
if
(
!
el
||
!
document
.
querySelector
(
el
))
throw
new
Error
(
"
请指定容器
"
);
if
(
isNotEmpty
(
themeOptions
))
initStyle
(
themeOptions
);
if
(
isNotEmpty
(
zIndex
))
setzIndex
(
zIndex
);
const
id
=
new
Date
().
getTime
()
+
""
;
const
props
=
{
canAttachFile
,
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录