功能比较简单，使用vue-simplemde实现markdown文本编辑器。
https://github.com/F-loat/vue-simplemde
- 实现图片的拖拽、复制上传，到光标位置。
# 初始化图片拖拽拷贝上传逻辑
initPictureCopyAndDrop: ->
window.addEventListener "drop", (e) ->
if e.target.className == 'CodeMirror-scroll'
e.preventDefault()
, false
simplemde = @$refs.markdownEditor.simplemde
simplemde.codemirror.on 'drop', (editor, e) =>
if (!(e.dataTransfer && e.dataTransfer.files))
@$utils.showErrorMessage("当前浏览器不支持拖拽上传图片，请更换成chrome。")
return
dataList = e.dataTransfer.files
imageFiles = []
for image in dataList
if (image.type.indexOf('image') == -1)
continue
imageFiles.push(image)
@_uploadImagesFile(simplemde.codemirror, imageFiles)
e.preventDefault()
simplemde.codemirror.on 'paste', (editor, e) =>
if (!(e.clipboardData && e.clipboardData.items))
@$utils.showErrorMessage("当前浏览器不支持粘贴上传图片。")
return
try
dataList = e.clipboardData.items
if dataList[0].kind == 'file' && dataList[0].getAsFile().type.indexOf('image') != -1
@_uploadImagesFile(simplemde.codemirror, [dataList[0].getAsFile()])
catch
(e) =>
@$utils.showErrorMessage("粘贴上传图片失败。")
simplemde.codemirror.on('beforeChange', (instance, changeObj) =>
@content = simplemde.markdown(@knowledge.innerhtml)
)
# 上传图片base64加密
_uploadImagesFile: (simplemde, files) ->
reader = new FileReader()
if files.length > 0
reader.readAsDataURL(files[0])
reader.onload = =>
result = reader.result.replace(/^data:(.*;base64,)?/, '')
@_upload(result).then (res) ->
url = ""
doc = simplemde.getDoc()
cursor = doc.getCursor()
doc.replaceRange(url, cursor)
# 上传图片
_upload: (base64) ->
url = 'url'
opts = {
method: 'POST',
body: JSON.stringify({
'Pic-Data': base64,
'Pic-Size': '0 * 0',
'Pic-Encoding': 'base64',
'Pic-Path': '/nowater',
}),
}
return fetch(url, opts).then (res) =>
return res.text().then (text) =>
return "/nowater/#{text}"
- markdown格式转码为html，展示编辑效果，a链接跳转。
simplemde = @$refs.markdownEditor.simplemde
@content = simplemde.markdown(@help.innerhtml)
# 给markdown页面URL跳转是target到新页面
setTimeout( ->
anchors = document.getElementById('mark').getElementsByTagName('a')
for a in anchors
a.setAttribute('target', '_blank')
)
- css格式化样式。
.markdown-section {
display: block;
word-wrap: break-word;
overflow: hidden;
color: #333;
line-height: 1.7;
font-size: 16px;
text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
-moz-text-size-adjust: 100%
}
.markdown-section * {
box-sizing: border-box;
-webkit-box-sizing: border-box;
font-size: inherit
}
.markdown-section > :first-child {
margin-top: 0!important
}
.markdown-section > :last-child {
margin-bottom: 0!important
}
.markdown-section blockquote,
.markdown-section code,
.markdown-section figure,
.markdown-section img,
.markdown-section pre,
.markdown-section table,
.markdown-section tr {
page-break-inside: avoid
}
.markdown-section h2,
.markdown-section h3,
.markdown-section h4,
.markdown-section h5,
.markdown-section p {
orphans: 3;
widows: 3
}
.markdown-section h1,
.markdown-section h2,
.markdown-section h3,
.markdown-section h4,
.markdown-section h5 {
page-break-after: avoid
}
.markdown-section b,
.markdown-section strong {
font-weight: 700
}
.markdown-section em {
font-style: italic
}
.markdown-section blockquote,
.markdown-section dl,
.markdown-section ol,
.markdown-section p,
.markdown-section table,
.markdown-section ul {
margin-top: 0;
margin-bottom: .85em
}
.markdown-section a {
color: #4183c4;
text-decoration: none;
background: 0 0
}
.markdown-section a:active,
.markdown-section a:focus,
.markdown-section a:hover {
outline: 0;
text-decoration: underline
}
.markdown-section img {
-moz-box-shadow: 0px 0px 24px 2px #cacaca;
-webkit-box-shadow: 0px 0px 24px 2px #cacaca;
box-shadow: 0px 0px 24px 2px #cacaca;
margin: 16px 0 16px 16px;
max-width: 90%;
height: auto;
}
.markdown-section img {
border: 0;
max-width: 100%
}
.markdown-section hr {
height: 4px;
padding: 0;
margin: 1.7em 0;
overflow: hidden;
background-color: #e7e7e7;
border: none
}
.markdown-section hr:after,
.markdown-section hr:before {
display: table;
content: " "
}
.markdown-section hr:after {
clear: both
}
.markdown-section h1,
.markdown-section h2,
.markdown-section h3,
.markdown-section h4,
.markdown-section h5,
.markdown-section h6 {
margin-top: 1.275em;
margin-bottom: .85em;
font-weight: 700
}
.markdown-section h1 {
font-size: 2em
}
.markdown-section h2 {
font-size: 1.75em
}
.markdown-section h3 {
font-size: 1.5em
}
.markdown-section h4 {
font-size: 1.25em
}
.markdown-section h5 {
font-size: 1em
}
.markdown-section h6 {
font-size: 1em;
color: #777
}
.markdown-section code,
.markdown-section pre {
font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
direction: ltr;
margin: 0;
padding: 0;
border: none;
color: inherit
}
.markdown-section pre {
overflow: auto;
word-wrap: normal;
margin: 0;
padding: .85em 1em;
margin-bottom: 1.275em;
background: #f7f7f7
}
.markdown-section pre > code {
display: inline;
max-width: initial;
padding: 0;
margin: 0;
overflow: initial;
line-height: inherit;
font-size: .85em;
white-space: pre;
background: 0 0
}
.markdown-section pre > code:after,
.markdown-section pre > code:before {
content: normal
}
.markdown-section code {
padding: .2em;
margin: 0;
font-size: .85em;
background-color: #f7f7f7
}
.markdown-section code:after,
.markdown-section code:before {
letter-spacing: -.2em;
content: "\00a0"
}
.markdown-section table {
display: table;
width: 100%;
border-collapse: collapse;
border-spacing: 0;
overflow: auto
}
.markdown-section table td,
.markdown-section table th {
padding: 6px 13px;
border: 1px solid #ddd
}
.markdown-section table tr {
background-color: #fff;
border-top: 1px solid #ccc
}
.markdown-section table tr:nth-child(2n) {
background-color: #f8f8f8
}
.markdown-section table th {
font-weight: 700
}
.markdown-section ol,
.markdown-section ul {
padding: 0;
margin: 0;
margin-bottom: .85em;
padding-left: 2em
}
.markdown-section ol ol,
.markdown-section ol ul,
.markdown-section ul ol,
.markdown-section ul ul {
margin-top: 0;
margin-bottom: 0
}
.markdown-section ol ol {
list-style-type: lower-roman
}
.markdown-section blockquote {
margin: 0;
margin-bottom: .85em;
padding: 0 15px;
color: #858585;
border-left: 4px solid #e5e5e5
}
.markdown-section blockquote:first-child {
margin-top: 0
}
.markdown-section blockquote:last-child {
margin-bottom: 0
}
.markdown-section dl {
padding: 0
}
.markdown-section dl dt {
padding: 0;
margin-top: .85em;
font-style: italic;
font-weight: 700
}
.markdown-section dl dd {
padding: 0 .85em;
margin-bottom: .85em
}
.markdown-section dd {
margin-left: 0
}
.markdown-section .glossary-term {
cursor: help;
text-decoration: underline
}
网友评论