https://github.com/codingcn/vue-markdown

A very nice markdown editor implemented by vuejs.
https://github.com/codingcn/vue-markdown

Last synced: 4 months ago
JSON representation

A very nice markdown editor implemented by vuejs.

• Host: GitHub
• URL: https://github.com/codingcn/vue-markdown
• Owner: codingcn
• Created: 2017-09-19T15:45:26.000Z (almost 9 years ago)
• Default Branch: develop
• Last Pushed: 2022-12-07T14:22:00.000Z (over 3 years ago)
• Last Synced: 2025-09-10T16:06:16.208Z (10 months ago)
• Language: Vue
• Size: 2.5 MB
• Stars: 2
• Watchers: 3
• Forks: 0
• Open Issues: 21
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# 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模板***

```

    


        

            

            

            


                提交

            

        

    


```

***js内容***

```

    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

            },

        }

    }

```

## Build Setup

``` bash

# 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`