Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
璃白.
markdown-editor
提交
02e81456
M
markdown-editor
项目概览
璃白.
/
markdown-editor
上一次同步 接近 2 年
通知
1
Star
1
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
M
markdown-editor
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
02e81456
编写于
6月 15, 2021
作者:
璃白.
🌻
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
feat:添加回显和tools配置
上级
c12cf336
变更
8
隐藏空白更改
内联
并排
Showing
8 changed file
with
95 addition
and
71 deletion
+95
-71
dist/index.html
dist/index.html
+14
-0
src/App.vue
src/App.vue
+21
-41
src/assets/js/utils.js
src/assets/js/utils.js
+4
-0
src/components/content/md-preview.vue
src/components/content/md-preview.vue
+4
-3
src/components/content/md-textarea.vue
src/components/content/md-textarea.vue
+10
-11
src/components/header/md-header.vue
src/components/header/md-header.vue
+23
-3
src/components/header/tool-button.vue
src/components/header/tool-button.vue
+12
-12
src/main.js
src/main.js
+7
-1
未找到文件。
dist/index.html
浏览文件 @
02e81456
...
...
@@ -13,12 +13,26 @@
<script>
new
MdEditor
({
el
:
"
#app
"
,
// required
value
:
""
,
themeOptions
:
{
borderColor
:
"
#dbdbdb
"
,
borderColorActive
:
"
#409eff
"
,
textColor
:
"
#303030
"
,
textColorActive
:
"
#000
"
},
toolsOptions
:
{
bold
:
true
,
italic
:
true
,
quote
:
true
,
code
:
true
,
link
:
true
,
ul
:
true
,
ol
:
true
,
task
:
true
,
table
:
true
,
fullscreen
:
true
},
canPreview
:
true
,
canAttachFile
:
true
,
placeholder
:
"
请输入内容
"
,
onChange
:
function
(
res
)
{
...
...
src/App.vue
浏览文件 @
02e81456
...
...
@@ -5,9 +5,11 @@
:selectionInfo.sync=
"selectionInfo"
:showPreview.sync=
"showPreview"
:isFocus.sync=
"isFocus"
:canPreview=
"canPreview"
:toolsOptions=
"toolsOptions"
:fullScreen.sync=
"fullScreen"
/>
<markdownPreview
:text=
"text"
:html.sync=
"html"
v-show=
"showPreview"
/>
<markdownPreview
:text=
"text"
:html.sync=
"html"
v-show=
"showPreview"
/>
<markdown-editor
:selectionInfo.sync=
"selectionInfo"
:text.sync=
"text"
...
...
@@ -47,6 +49,18 @@ export default {
canAttachFile
:
{
type
:
Boolean
,
default
:
true
},
value
:
{
type
:
[
String
,
Number
],
default
:
""
},
canPreview
:
{
type
:
Boolean
,
default
:
true
},
toolsOptions
:
{
type
:
Object
,
default
:
()
=>
{}
}
},
data
()
{
...
...
@@ -56,45 +70,6 @@ export default {
showPreview
:
false
,
fileList
:
[],
text
:
""
,
// text: `
// # 标题一标题一标题一
// ## 标题二标题二
// 666\`行内代码\`666
// \`\`\`js
// // 是注释呀
// /**
// * @params x
// */
// function fn() {
// return null;
// }
// \`\`\`
// **粗体文字**
// _斜体文字_
// > 这段是引用的内容\n
// > 这段是引用的内容
// > 这段是引用的内容
// [链接](url)
// - 无序列表
// - 无序列表
// - 无序列表
// 1. 有序列表
// 2. 有序列表
// 3. 有序列表
// - [ ] 任务列表
// - [x] 任务列表
// - [ ] 任务列表
// | header | header |
// | ------ | ------ |
// | cell | cell |
// | cell | cell |`,
html
:
""
,
selectionInfo
:
{
selectorId
:
""
,
...
...
@@ -103,7 +78,6 @@ export default {
}
};
},
watch
:
{
html
:
{
immediate
:
true
,
...
...
@@ -114,6 +88,12 @@ export default {
});
}
},
value
:
{
immediate
:
true
,
handler
:
function
(
val
)
{
this
.
text
=
val
;
}
},
fileList
:
{
immediate
:
false
,
deep
:
true
,
...
...
src/assets/js/utils.js
浏览文件 @
02e81456
...
...
@@ -75,3 +75,7 @@ export function initStyle({
export
function
isNotEmpty
(
val
)
{
return
val
!==
null
&&
val
!==
undefined
;
}
export
function
isNotFalse
(
val
)
{
return
val
!==
false
;
}
src/components/content/md-preview.vue
浏览文件 @
02e81456
...
...
@@ -12,7 +12,7 @@ export default {
},
props
:
{
text
:
{
type
:
String
,
type
:
[
String
,
Number
]
,
default
:
""
},
html
:
{
...
...
@@ -28,8 +28,9 @@ export default {
return
html
;
}
});
if
(
!
val
.
trim
())
return
;
const
html
=
marked
(
val
);
const
str
=
val
+
""
;
if
(
!
str
.
trim
())
return
;
const
html
=
marked
(
str
);
this
.
$emit
(
"
update:html
"
,
html
);
}
},
...
...
src/components/content/md-textarea.vue
浏览文件 @
02e81456
...
...
@@ -36,15 +36,15 @@ export default {
},
fileList
:
{
type
:
Array
,
default
:
()
=>
[]
default
:
()
=>
[]
},
text
:
{
type
:
String
,
default
:
''
type
:
[
String
,
Number
]
,
default
:
""
},
selectionInfo
:
{
type
:
Object
,
default
:
()
=>
{}
default
:
()
=>
{}
}
},
data
()
{
...
...
@@ -67,24 +67,23 @@ export default {
beforeDestroy
()
{
document
.
removeEventListener
(
"
mouseup
"
,
this
.
checkSelection
);
},
methods
:
{
setFocus
(
val
)
{
this
.
$emit
(
'
update:isFocus
'
,
val
)
this
.
$emit
(
"
update:isFocus
"
,
val
);
},
checkSelection
()
{
const
info
=
getSelectionInfo
(
this
.
id
);
if
(
!
info
)
{
const
cursorPoint
=
getPosition
(
this
.
id
);
this
.
$emit
(
'
update:selectionInfo
'
,
{
this
.
$emit
(
"
update:selectionInfo
"
,
{
selectorId
:
this
.
id
,
selectionStart
:
cursorPoint
,
selectionEnd
:
cursorPoint
})
})
;
return
;
}
this
.
$emit
(
'
update:selectionInfo
'
,
info
)
this
.
$emit
(
"
update:selectionInfo
"
,
info
);
},
pasteFile
(
event
)
{
let
fileList
=
[];
...
...
@@ -96,7 +95,7 @@ export default {
}
}
if
(
!
fileList
.
length
)
return
;
this
.
$emit
(
'
update:fileList
'
,
fileList
)
this
.
$emit
(
"
update:fileList
"
,
fileList
);
}
}
};
...
...
src/components/header/md-header.vue
浏览文件 @
02e81456
...
...
@@ -2,12 +2,13 @@
<div
:class=
"['md_header',
{ active: isFocus }]">
<div
class=
"header_tabs"
>
<div
:class=
"['tab_item',
{ active: !showPreview }]"
:class=
"['tab_item',
{ active:
canPreview
&&
!showPreview }]"
@click="setShowPreview(false)"
>
编辑
</div>
<div
v-if=
"canPreview"
:class=
"['tab_item',
{ active: showPreview }]"
@click="setShowPreview(true)"
>
...
...
@@ -20,7 +21,7 @@
:fullScreen=
"fullScreen"
@
setFullScreen=
"$emit('update:fullScreen', true)"
@
updateText=
"updateText"
v-for=
"(item, index) in tool
ButtonList
"
v-for=
"(item, index) in tool
sShow
"
:key=
"index"
:text=
"text"
:selectionInfo=
"selectionInfo"
...
...
@@ -29,6 +30,7 @@
</div>
</
template
>
<
script
>
import
{
isNotFalse
}
from
"
@/assets/js/utils
"
;
import
toolButton
from
"
./tool-button
"
;
export
default
{
components
:
{
toolButton
},
...
...
@@ -45,8 +47,16 @@ export default {
type
:
Boolean
,
default
:
false
},
canPreview
:
{
type
:
Boolean
,
default
:
true
},
toolsOptions
:
{
type
:
Object
,
default
:
()
=>
{}
},
text
:
{
type
:
String
,
type
:
[
String
,
Number
]
,
default
:
""
},
selectionInfo
:
{
...
...
@@ -54,6 +64,16 @@ export default {
default
:
()
=>
{}
}
},
computed
:
{
toolsShow
()
{
const
toolsList
=
this
.
toolButtonList
;
const
toolsOptions
=
this
.
toolsOptions
;
if
(
!
toolsOptions
)
return
toolsList
;
return
toolsList
.
filter
(
item
=>
{
return
isNotFalse
(
toolsOptions
[
item
.
name
]);
});
}
},
data
()
{
return
{
toolButtonList
:
[
...
...
src/components/header/tool-button.vue
浏览文件 @
02e81456
...
...
@@ -20,22 +20,22 @@ export default {
default
:
false
},
text
:
{
type
:
String
,
default
:
''
type
:
[
String
,
Number
]
,
default
:
""
},
selectionInfo
:
{
type
:
Object
,
default
:
()
=>
{}
default
:
()
=>
{}
},
uploadPath
:
{
type
:
String
,
default
:
''
default
:
""
}
},
data
()
{
return
{
ulNum
:
1
}
}
;
},
methods
:
{
handleTool
(
type
,
startStr
,
endStr
)
{
...
...
@@ -53,21 +53,21 @@ export default {
case
"
ol
"
:
let
ulNum
=
this
.
ulNum
;
this
.
updateText
(
`\n
${
ulNum
}
. `
,
""
);
this
.
ulNum
++
this
.
ulNum
++
;
break
;
case
"
fullScreen
"
:
this
.
$emit
(
'
setFullScreen
'
,
true
)
this
.
$emit
(
"
setFullScreen
"
,
true
);
break
;
default
:
break
;
}
},
updateText
(
startStr
,
endStr
)
{
const
originalText
=
this
.
text
const
selectionInfo
=
this
.
selectionInfo
const
newText
=
formatText
(
originalText
,
selectionInfo
,
startStr
,
endStr
)
this
.
$emit
(
'
updateText
'
,
newText
)
}
const
originalText
=
this
.
text
;
const
selectionInfo
=
this
.
selectionInfo
;
const
newText
=
formatText
(
originalText
,
selectionInfo
,
startStr
,
endStr
);
this
.
$emit
(
"
updateText
"
,
newText
);
}
}
};
</
script
>
...
...
src/main.js
浏览文件 @
02e81456
...
...
@@ -13,8 +13,11 @@ function initMdEditor(obj) {
onChange
,
onUpload
,
placeholder
,
value
,
canPreview
,
canAttachFile
,
themeOptions
themeOptions
,
toolsOptions
}
=
obj
;
if
(
!
el
||
!
document
.
querySelector
(
el
))
throw
new
Error
(
"
请指定容器
"
);
if
(
isNotEmpty
(
themeOptions
))
initStyle
(
themeOptions
);
...
...
@@ -34,6 +37,9 @@ function initMdEditor(obj) {
},
props
:
{
canAttachFile
,
value
,
canPreview
,
toolsOptions
,
placeholder
}
})
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录