Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
weixin_43676597
Awesome-Markdown-Editor
提交
c2bb5ffe
Awesome-Markdown-Editor
项目概览
weixin_43676597
/
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,体验更适合开发者的 AI 搜索 >>
提交
c2bb5ffe
编写于
6月 28, 2021
作者:
璃白.
🌻
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
fix
上级
4c9a941b
变更
11
隐藏空白更改
内联
并排
Showing
11 changed file
with
327 addition
and
32 deletion
+327
-32
src/App.vue
src/App.vue
+12
-1
src/assets/js/utils.js
src/assets/js/utils.js
+6
-11
src/assets/style/code/atom-one-dark.less
src/assets/style/code/atom-one-dark.less
+95
-0
src/assets/style/code/dark.less
src/assets/style/code/dark.less
+61
-0
src/assets/style/code/lightfair.less
src/assets/style/code/lightfair.less
+87
-0
src/assets/style/global.less
src/assets/style/global.less
+4
-4
src/assets/style/markdown.less
src/assets/style/markdown.less
+5
-5
src/components/content/md-preview.vue
src/components/content/md-preview.vue
+16
-4
src/components/content/md-textarea.vue
src/components/content/md-textarea.vue
+2
-0
src/components/header/md-header.vue
src/components/header/md-header.vue
+26
-7
src/main.js
src/main.js
+13
-0
未找到文件。
src/App.vue
浏览文件 @
c2bb5ffe
...
...
@@ -4,6 +4,7 @@
:id="'md_' + id"
>
<markdown-header
:id=
"textareaId"
:ref=
"'md_header' + id"
:text.sync=
"text"
:selectionInfo.sync=
"selectionInfo"
...
...
@@ -90,7 +91,7 @@ export default {
// 初始化时赋值
value
:
{
type
:
[
String
,
Number
],
default
:
""
default
:
"
"
},
// 全屏时的z-index
zIndex
:
{
...
...
@@ -102,6 +103,10 @@ export default {
type
:
Number
,
default
:
0
},
preview
:
{
type
:
String
,
default
:
""
},
// 是否可以预览
canPreview
:
{
type
:
Boolean
,
...
...
@@ -182,6 +187,11 @@ export default {
}
}
},
preview
:
{
handler
:
function
(
val
)
{
this
.
showPreview
=
val
===
"
preview
"
;
}
},
text
:
{
immediate
:
true
,
handler
:
function
(
val
)
{
...
...
@@ -240,6 +250,7 @@ export default {
`
${
url
}
)\n`
);
_this
.
text
=
newText
;
_this
.
$refs
.
mdUploadFile
.
value
=
""
;
}
});
this
.
fileList
=
[];
...
...
src/assets/js/utils.js
浏览文件 @
c2bb5ffe
...
...
@@ -133,24 +133,19 @@ export function initStyle({
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
"
);
import
(
"
@/assets/style/code/dark.css
"
);
break
;
case
"
light
"
:
import
(
"
highlight.js/styles
/lightfair.css
"
);
import
(
"
@/assets/style/code
/lightfair.css
"
);
break
;
case
"
monokai
"
:
import
(
"
highlight.js/styles/monokai
.css
"
);
case
"
atom-one-dark
"
:
import
(
"
@/assets/style/code/atom-one-dark
.css
"
);
break
;
default
:
break
;
}
}
else
{
import
(
"
@/assets/style/code/lightfair.css
"
);
}
}
...
...
src/assets/style/code/atom-one-dark.less
0 → 100644
浏览文件 @
c2bb5ffe
/*
Atom One Dark by Daniel Gamage
Original One Dark Syntax theme from https://github.com/atom/one-dark-syntax
base: #282c34
mono-1: #abb2bf
mono-2: #818896
mono-3: #5c6370
hue-1: #56b6c2
hue-2: #61aeee
hue-3: #c678dd
hue-4: #98c379
hue-5: #e06c75
hue-5-2: #be5046
hue-6: #d19a66
hue-6-2: #e6c07b
*/
.md_preview {
.md_hljs {
color: #abb2bf;
background: #282c34;
}
.hljs-comment,
.hljs-quote {
color: #5c6370;
font-style: italic;
}
.hljs-doctag,
.hljs-keyword,
.hljs-formula {
color: #c678dd;
}
.hljs-section,
.hljs-name,
.hljs-selector-tag,
.hljs-deletion,
.hljs-subst {
color: #e06c75;
}
.hljs-literal {
color: #56b6c2;
}
.hljs-string,
.hljs-regexp,
.hljs-addition,
.hljs-attribute,
.hljs-meta .hljs-string {
color: #98c379;
}
.hljs-attr,
.hljs-variable,
.hljs-template-variable,
.hljs-type,
.hljs-selector-class,
.hljs-selector-attr,
.hljs-selector-pseudo,
.hljs-number {
color: #d19a66;
}
.hljs-symbol,
.hljs-bullet,
.hljs-link,
.hljs-meta,
.hljs-selector-id,
.hljs-title {
color: #61aeee;
}
.hljs-built_in,
.hljs-title.class_,
.hljs-class .hljs-title {
color: #e6c07b;
}
.hljs-emphasis {
font-style: italic;
}
.hljs-strong {
font-weight: bold;
}
.hljs-link {
text-decoration: underline;
}
}
src/assets/style/code/dark.less
0 → 100644
浏览文件 @
c2bb5ffe
/*
Dark style from softwaremaniacs.org (c) Ivan Sagalaev <Maniac@SoftwareManiacs.Org>
*/
.md_preview {
.md_hljs {
color: #ddd;
background: #444;
}
.hljs-keyword,
.hljs-selector-tag,
.hljs-literal,
.hljs-section,
.hljs-link {
color: white;
}
.hljs-subst {
/* default */
}
.hljs-string,
.hljs-title,
.hljs-name,
.hljs-type,
.hljs-attribute,
.hljs-symbol,
.hljs-bullet,
.hljs-built_in,
.hljs-addition,
.hljs-variable,
.hljs-template-tag,
.hljs-template-variable {
color: #d88;
}
.hljs-comment,
.hljs-quote,
.hljs-deletion,
.hljs-meta {
color: #777;
}
.hljs-keyword,
.hljs-selector-tag,
.hljs-literal,
.hljs-title,
.hljs-section,
.hljs-doctag,
.hljs-type,
.hljs-name,
.hljs-strong {
font-weight: bold;
}
.hljs-emphasis {
font-style: italic;
}
}
src/assets/style/code/lightfair.less
0 → 100644
浏览文件 @
c2bb5ffe
/*
Lightfair style (c) Tristian Kelly <tristian.kelly560@gmail.com>
*/
.md_preview {
.md_hljs {
color: #444;
background: var(--md-editor-code-bg-color);
}
.hljs-name {
color: #01a3a3;
}
.hljs-tag,
.hljs-meta {
color: #778899;
}
.hljs-subst {
/* default */
}
.hljs-comment {
color: #888888;
}
.hljs-keyword,
.hljs-attribute,
.hljs-selector-tag,
.hljs-meta .hljs-keyword,
.hljs-doctag,
.hljs-name {
font-weight: bold;
}
.hljs-type,
.hljs-string,
.hljs-number,
.hljs-selector-id,
.hljs-selector-class,
.hljs-quote,
.hljs-template-tag,
.hljs-deletion {
color: #4286f4;
}
.hljs-title,
.hljs-section {
color: #4286f4;
font-weight: bold;
}
.hljs-regexp,
.hljs-symbol,
.hljs-variable,
.hljs-template-variable,
.hljs-link,
.hljs-selector-attr,
.hljs-selector-pseudo {
color: #bc6060;
}
.hljs-literal {
color: #62bcbc;
}
.hljs-built_in,
.hljs-bullet,
.hljs-code,
.hljs-addition {
color: #25c6c6;
}
.hljs-meta .hljs-string {
color: #4d99bf;
}
.hljs-emphasis {
font-style: italic;
}
.hljs-strong {
font-weight: bold;
}
}
src/assets/style/global.less
浏览文件 @
c2bb5ffe
...
...
@@ -27,7 +27,7 @@ textarea {
padding: 0;
}
img {
display: block;
margin: 0;
}
//
img {
//
display: block;
//
margin: 0;
//
}
src/assets/style/markdown.less
浏览文件 @
c2bb5ffe
...
...
@@ -240,19 +240,19 @@
padding: 8px;
tab-size: 4;
code {
&.hljs {
&.
md_
hljs {
padding: 0;
}
}
&:not(.hljs) {
background-color: var(--md-editor-code-bg-color);
&:not(.
md_
hljs) {
//
background-color: var(--md-editor-code-bg-color);
}
}
}
code {
border-radius: 4px;
display: inline-block;
background-color: var(--md-editor-code-bg-color);
//
background-color: var(--md-editor-code-bg-color);
padding: 2px 6px;
font-family: -apple-system, SF UI Text, Arial, PingFang SC, Hiragino Sans GB,
Microsoft YaHei, WenQuanYi Micro Hei, sans-serif, SimHei, SimSun;
...
...
@@ -480,7 +480,7 @@ p[align="center"] {
font-family: Consolas, Inconsolata, Courier, monospace;
font-size: 14px;
line-height: 22px;
color: #000;
//
color: #000;
}
.md_preview code ol li div.hljs-ln-code,
...
...
src/components/content/md-preview.vue
浏览文件 @
c2bb5ffe
...
...
@@ -5,7 +5,6 @@
</
template
>
<
script
>
import
marked
from
"
marked
"
;
import
"
highlight.js/styles/github.css
"
;
export
default
{
data
()
{
return
{
...
...
@@ -30,10 +29,23 @@ export default {
default
:
false
}
},
// mounted() {
// this.resetMinHeight();
// },
mounted
()
{
setTimeout
(()
=>
{
this
.
resetMinHeight
();
},
0
)
this
.
addClass
();
},
updated
()
{
this
.
addClass
();
},
methods
:
{
addClass
()
{
setTimeout
(()
=>
{
const
previewDom
=
document
.
querySelector
(
"
.md_preview code
"
);
if
(
!
previewDom
)
return
;
previewDom
.
className
=
"
md_hljs
"
;
},
0
);
},
transferMarkdown
(
val
)
{
marked
.
setOptions
({
highlight
:
function
(
code
,
lang
,
callback
)
{
...
...
src/components/content/md-textarea.vue
浏览文件 @
c2bb5ffe
...
...
@@ -83,6 +83,8 @@ export default {
text
:
{
immediate
:
true
,
handler
:
function
(
val
)
{
const
cursorPoint
=
getPosition
(
this
.
id
);
console
.
log
(
cursorPoint
);
this
.
textContent
=
val
;
}
},
...
...
src/components/header/md-header.vue
浏览文件 @
c2bb5ffe
...
...
@@ -34,11 +34,15 @@
</div>
</
template
>
<
script
>
import
{
isNotFalse
,
formatText
}
from
"
@/assets/js/utils
"
;
import
{
isNotFalse
,
formatText
,
getPosition
}
from
"
@/assets/js/utils
"
;
import
toolButton
from
"
./tool-button
"
;
export
default
{
components
:
{
toolButton
},
props
:
{
id
:
{
type
:
String
,
default
:
""
},
fullScreen
:
{
type
:
Boolean
,
default
:
false
...
...
@@ -98,6 +102,9 @@ export default {
this
.
toolButtonList
.
push
(
this
.
fullScreenBtn
);
}
}
},
text
:
{
handler
:
function
(
newVal
,
oldVal
)
{}
}
},
data
()
{
...
...
@@ -200,20 +207,32 @@ export default {
const
originalText
=
this
.
text
;
const
selectionInfo
=
this
.
selectionInfo
;
const
newText
=
formatText
(
originalText
,
selectionInfo
,
startStr
,
endStr
);
this
.
updateText
(
newText
)
;
// this.$refs.tool_button.tab(
);
const
len
=
newText
.
length
-
originalText
.
length
;
// const len = 0;
this
.
updateText
(
newText
,
len
);
},
setShowPreview
(
val
)
{
this
.
$emit
(
"
update:showPreview
"
,
val
);
},
updateText
(
val
)
{
updateText
(
val
,
len
=
0
)
{
console
.
log
(
val
);
this
.
$emit
(
"
update:text
"
,
val
);
const
cursorPoint
=
getPosition
(
this
.
id
);
console
.
log
(
cursorPoint
);
this
.
$emit
(
"
update:selectionInfo
"
,
{
selectorId
:
""
,
selectionStart
:
""
,
selectionEnd
:
""
selectionStart
:
cursorPoint
,
selectionEnd
:
cursorPoint
});
console
.
log
(
cursorPoint
);
setTimeout
(()
=>
{
// document.getElementById(this.id).setSelectionRange(0, 0);
document
.
getElementById
(
this
.
id
)
.
setSelectionRange
(
cursorPoint
+
len
,
cursorPoint
+
len
);
},
0
);
}
}
};
...
...
src/main.js
浏览文件 @
c2bb5ffe
...
...
@@ -53,6 +53,7 @@ function initMdEditor(obj) {
placeholder
,
maxLength
,
zIndex
,
preview
:
""
,
focus
:
false
,
showWordLimit
};
...
...
@@ -60,6 +61,7 @@ function initMdEditor(obj) {
change
(
val
)
{
onChange
(
val
);
_this
.
value
=
val
;
props
.
value
=
val
.
text
;
},
input
(
val
)
{
onInput
(
val
);
...
...
@@ -78,11 +80,13 @@ function initMdEditor(obj) {
onBlur
(
val
);
_this
.
value
=
val
;
props
.
focus
=
false
;
props
.
value
=
val
.
text
;
_this
.
vEl
.
$forceUpdate
();
},
submit
(
val
)
{
onSubmit
(
val
);
_this
.
value
=
val
;
props
.
value
=
val
.
text
;
},
upload
({
val
,
callback
})
{
onUpload
(
val
,
function
(
res
)
{
...
...
@@ -119,6 +123,15 @@ function initMdEditor(obj) {
props
.
focus
=
false
;
this
.
vEl
.
$forceUpdate
();
};
this
.
toggleTab
=
function
(
tabName
)
{
if
(
!
tabName
)
{
props
.
preview
=
props
.
preview
===
"
edit
"
?
"
preview
"
:
"
edit
"
;
}
else
{
props
.
preview
=
tabName
;
}
this
.
vEl
.
$forceUpdate
();
};
}
window
.
MdEditor
=
initMdEditor
;
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录