Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
璃白.
markdown-editor
提交
77c78aa2
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,发现更多精彩内容 >>
提交
77c78aa2
编写于
6月 07, 2021
作者:
璃白.
🌻
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
feat:第一版
上级
95dde5e4
变更
7
隐藏空白更改
内联
并排
Showing
7 changed file
with
93 addition
and
56 deletion
+93
-56
dist/index.html
dist/index.html
+9
-6
src/assets/js/utils.js
src/assets/js/utils.js
+21
-6
src/components/content/md-textarea.vue
src/components/content/md-textarea.vue
+14
-5
src/components/footer/upload-files.vue
src/components/footer/upload-files.vue
+1
-2
src/main.js
src/main.js
+10
-2
src/store/index.js
src/store/index.js
+37
-34
webpack.config.js
webpack.config.js
+1
-1
未找到文件。
dist/index.html
浏览文件 @
77c78aa2
...
...
@@ -9,7 +9,7 @@
</head>
<body>
<div
id=
"app"
></div>
<script
src=
"./
bundle
.js"
></script>
<script
src=
"./
markdown-editor
.js"
></script>
<script>
new
MdEditor
({
el
:
"
#app
"
,
// required
...
...
@@ -20,18 +20,21 @@
textColorActive
:
"
#000
"
},
canAttachFile
:
true
,
placeholder
:
"
请输入内容
"
,
onChange
:
function
(
res
)
{
console
.
log
(
res
);
},
onUpload
:
function
(
file
List
,
callback
)
{
onUpload
:
function
(
file
,
callback
)
{
new
Promise
((
res
,
rej
)
=>
{
setTimeout
(()
=>
{
res
(
file
List
);
res
(
file
);
},
2000
);
}).
then
(
res
=>
{
callback
(
"
https://img2.baidu.com/it/u=3681880960,455182084&fm=26&fmt=auto&gp=0.jpg
"
);
var
reader
=
new
FileReader
();
reader
.
readAsDataURL
(
res
);
reader
.
onload
=
()
=>
{
callback
(
reader
.
result
);
};
});
}
});
...
...
src/assets/js/utils.js
浏览文件 @
77c78aa2
import
store
from
'
@/store
'
import
store
from
"
@/store
"
;
// 获取选中文本信息
...
...
@@ -8,21 +8,36 @@ export function getSelectionInfo(selectorId) {
const
{
selectionStart
=
0
,
selectionEnd
=
0
}
=
selector
;
if
(
selectionStart
===
selectionEnd
)
return
""
;
return
{
selectorId
,
selectionStart
,
selectionEnd
};
}
export
const
getPosition
=
function
(
selectorId
)
{
const
element
=
document
.
getElementById
(
selectorId
);
let
cursorPos
=
0
;
if
(
document
.
selection
)
{
//IE
var
selectRange
=
document
.
selection
.
createRange
();
selectRange
.
moveStart
(
"
character
"
,
-
element
.
value
.
length
);
cursorPos
=
selectRange
.
text
.
length
;
}
else
if
(
element
.
selectionStart
||
element
.
selectionStart
==
"
0
"
)
{
cursorPos
=
element
.
selectionStart
;
}
return
cursorPos
;
};
// 工具栏格式化文本
export
function
formatText
(
text
,
selectionInfo
,
startStr
=
""
,
endStr
=
""
)
{
if
(
!
selectionInfo
)
return
text
+
startStr
+
endStr
;
return
(
if
(
!
selectionInfo
)
return
;
const
newText
=
text
.
slice
(
0
,
selectionInfo
.
selectionStart
)
+
startStr
+
text
.
slice
(
selectionInfo
.
selectionStart
,
selectionInfo
.
selectionEnd
)
+
endStr
+
text
.
slice
(
selectionInfo
.
selectionEnd
)
)
;
text
.
slice
(
selectionInfo
.
selectionEnd
)
;
return
newText
;
}
//
...
...
@@ -67,7 +82,7 @@ export function initStyle({
}
}
//
//
export
function
isNotEmpty
(
val
)
{
return
val
!==
null
&&
val
!==
undefined
;
}
src/components/content/md-textarea.vue
浏览文件 @
77c78aa2
...
...
@@ -7,6 +7,7 @@
@
blur=
"setFocus(false)"
@
paste=
"pasteFile"
v-model=
"textContent"
:placeholder=
"placeholder"
rows=
"10"
>
</textarea>
...
...
@@ -19,7 +20,7 @@
</
template
>
<
script
>
import
{
mapState
,
mapMutations
}
from
"
vuex
"
;
import
{
getSelectionInfo
}
from
"
@/assets/js/utils
"
;
import
{
getSelectionInfo
,
getPosition
}
from
"
@/assets/js/utils
"
;
export
default
{
data
()
{
return
{
...
...
@@ -43,32 +44,40 @@ export default {
document
.
removeEventListener
(
"
mouseup
"
,
this
.
checkSelection
);
},
computed
:
{
...
mapState
([
"
text
"
,
"
fullScreen
"
])
...
mapState
([
"
text
"
,
"
fullScreen
"
,
"
placeholder
"
])
},
methods
:
{
...
mapMutations
([
"
setText
"
,
"
setFullScreen
"
,
"
setSelectionInfo
"
,
"
setFileList
"
,
"
setFocus
"
]),
checkSelection
()
{
const
info
=
getSelectionInfo
(
this
.
id
);
if
(
!
info
)
return
;
if
(
!
info
)
{
const
cursorPoint
=
getPosition
(
this
.
id
);
this
.
setSelectionInfo
({
selectorId
:
this
.
id
,
selectionStart
:
cursorPoint
,
selectionEnd
:
cursorPoint
});
return
;
}
this
.
setSelectionInfo
(
info
);
},
pasteFile
(
event
)
{
let
fileList
=
[];
const
items
=
(
event
.
clipboardData
||
window
.
clipboardData
).
items
;
for
(
let
i
=
0
;
i
<
items
.
length
;
i
++
)
{
console
.
log
(
items
[
i
]);
if
(
items
[
i
].
type
.
indexOf
(
"
image
"
)
!==
-
1
)
{
fileList
.
push
(
items
[
i
].
getAsFile
());
break
;
}
}
if
(
!
fileList
.
length
)
return
;
console
.
log
(
fileList
);
this
.
setFileList
(
fileList
[
0
]
);
}
}
};
...
...
src/components/footer/upload-files.vue
浏览文件 @
77c78aa2
...
...
@@ -8,7 +8,6 @@
name=
"md-upload-file"
id=
"md-upload-file"
@
change=
"upload"
multiple
/>
<span>
添加附件
</span>
</div>
...
...
@@ -27,7 +26,7 @@ export default {
...
mapMutations
([
"
setText
"
,
"
setFileList
"
]),
upload
(
e
)
{
const
fileList
=
Array
.
from
(
e
.
target
.
files
);
this
.
setFileList
(
fileList
);
this
.
setFileList
(
fileList
[
0
]
);
}
}
};
...
...
src/main.js
浏览文件 @
77c78aa2
...
...
@@ -9,15 +9,23 @@ import "@/assets/style/global.less";
Vue
.
use
(
Vtip
.
directive
);
function
initMdEditor
(
obj
)
{
const
{
el
,
onChange
,
onUpload
,
canAttachFile
,
themeOptions
}
=
obj
;
const
{
el
,
onChange
,
onUpload
,
placeholder
,
canAttachFile
,
themeOptions
}
=
obj
;
if
(
!
el
||
!
document
.
querySelector
(
el
))
throw
new
Error
(
"
请指定容器
"
);
if
(
isNotEmpty
(
themeOptions
))
initStyle
(
themeOptions
);
if
(
isNotEmpty
(
canAttachFile
))
store
.
commit
(
"
setCanAttachFile
"
,
canAttachFile
);
if
(
isNotEmpty
(
placeholder
))
store
.
commit
(
"
setPlaceholder
"
,
placeholder
);
new
Vue
({
store
,
render
:
(
h
)
=>
render
:
h
=>
h
(
App
,
{
on
:
{
change
(
val
)
{
...
...
src/store/index.js
浏览文件 @
77c78aa2
...
...
@@ -9,6 +9,7 @@ export default new Vuex.Store({
fullScreen
:
false
,
isFocus
:
false
,
showPreview
:
false
,
placeholder
:
"
请输入内容
"
,
toolButtonList
:
[
{
name
:
"
bold
"
,
...
...
@@ -82,48 +83,47 @@ export default new Vuex.Store({
],
fileList
:
""
,
ulNum
:
1
,
text
:
`
# 标题一标题一标题一
## 标题二标题二
666
\`
行内代码
\`
666
\`\`\`
js
// 是注释呀
/**
* @params x
*/
function fn() {
return null;
}
\`\`\`
**粗体文字**
//
text: `
//
# 标题一标题一标题一
//
## 标题二标题二
//
666\`行内代码\`666
//
\`\`\`js
//
// 是注释呀
//
/**
//
* @params x
//
*/
//
function fn() {
//
return null;
//
}
//
\`\`\`
//
**粗体文字**
_斜体文字_
//
_斜体文字_
> 这段是引用的内容\n
> 这段是引用的内容
> 这段是引用的内容
//
> 这段是引用的内容\n
//
> 这段是引用的内容
//
> 这段是引用的内容
[链接](url)
//
[链接](url)
// - 无序列表
// - 无序列表
// - 无序列表
- 无
序列表
- 无
序列表
- 无
序列表
// 1. 有
序列表
// 2. 有
序列表
// 3. 有
序列表
// - [ ] 任务列表
// - [x] 任务列表
// - [ ] 任务列表
1. 有序列表
2. 有序列表
3. 有序列表
- [ ] 任务列表
- [x] 任务列表
- [ ] 任务列表
| header | header |
| ------ | ------ |
| cell | cell |
| cell | cell |`
,
// | header | header |
// | ------ | ------ |
// | cell | cell |
// | cell | cell |`,
selectionInfo
:
""
,
text
:
""
,
html
:
""
,
canAttachFile
:
true
},
...
...
@@ -155,6 +155,9 @@ _斜体文字_
},
setFileList
(
state
,
val
)
{
state
.
fileList
=
val
;
},
setPlaceholder
(
state
,
val
)
{
state
.
placeholder
=
val
;
}
}
});
webpack.config.js
浏览文件 @
77c78aa2
...
...
@@ -3,7 +3,7 @@ const VueLoaderPlugin = require("vue-loader/lib/plugin");
module
.
exports
=
{
entry
:
path
.
resolve
(
__dirname
,
"
./src/main.js
"
),
output
:
{
filename
:
"
bundle
.js
"
,
filename
:
"
markdown-editor
.js
"
,
path
:
path
.
resolve
(
__dirname
,
"
dist
"
)
},
devServer
:
{
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录