vue使用markdown

功能比较简单，使用vue-simplemde实现markdown文本编辑器。
https://github.com/F-loat/vue-simplemde

1. 实现图片的拖拽、复制上传，到光标位置。

            # 初始化图片拖拽拷贝上传逻辑
            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 = "![](#{res})"
                            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}"

2. 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')
)

3. 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
}