Skip to content

A very nice markdown editor implemented by vuejs.

Notifications You must be signed in to change notification settings

codingcn/vue-markdown

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

8 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

vue-md

虽然现在有很多开源Markdown在线编辑器,但都过于臃肿,所以自己又造了一个轮子,easy enough!

功能与特性

  • 基于webpack构建,单组件开发,方便再次开发扩展,开箱即用。
  • 简洁不臃肿,只实现了一些基本功能。
  • 支持所有标准markdown语法/代码高亮/表格插入等。
  • 图片支持拖拽、截图粘贴两种上传方式,支持实时预览、(跨域)上传。
  • 支持全屏、分栏、预览等编辑模式。
  • 样式参考:https://carbon.now.sh/

注:关于一些个性化功能,比如 工具栏TOC目录 。其实只要熟悉了markdown语法之后,是没有人会通过快捷工具栏来写markdown内容的,TOC目录的话我尝试写了一下,实现也很简单,就是在读取markdown编译后的html内容的时候,从中选取下h2 h3 h4...几个节点而已。同学们如果需要的话,可以自己尝试着去做一下,不懂的地方欢迎交流。

使用方法

图片上传(后端) 作者提供了PHP的服务器端代码,请自行参考修改,代码位置/php_server_demo

vue模板

<template>
    <div>
        <form action="http://localhost/vue-md/php_server_demo/form.php" method="post">
            <editor v-bind:markdown="form.markdown_md"
                    v-bind:upload_action_editor="upload_action_editor"
                    v-on:getEditorContent="getEditorContent"
            >
            </editor>
            <div style="margin: 1rem auto; width: 85%;">
                <button>提交</button>
            </div>
        </form>
    </div>
</template>

js内容

<script>
    import editor from './Editor'

    export default {
        name: 'app',
        components: {
            editor
        },
        data: function () {
            return {
                form: {
                    content_html: '',
                    markdown_md: '```\n' +
                    '<?php\n' +
                    '    echo \'hello world.\';\n' +
                    '?>\n' +
                    '```',   // 默认填充的markdown数据
                },
                upload_action_editor: 'http://localhost/vue-md/php_server_demo/upload.php'   // 图片上传服务器地址
            }
        },
        methods: {
            getEditorContent(data) {
                this.form.content_md = data.content_md
                this.form.content_html = data.content_html
            },
        }
    }
</script>

Build Setup

# install dependencies
cnpm install

# serve with hot reload at localhost:8080
npm run serve

# build for production with minification
npm run build

该Markdown编辑器由以下优秀项目驱动

axios github-markdown-css highlight.js marked promise-polyfill vue

About

A very nice markdown editor implemented by vuejs.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published