Need help with vue-mdEditor?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

ovenslove
448 Stars 98 Forks 24 Commits 20 Opened issues

Description

基于VUE的markdown文本编辑器

Services available

!
?

Need anything else?

Contributors list

No Data

vue-mdeditor

基于VUE的markdown文本编辑器

更新历史

  • 2017/08/08
    • 修复组件配置属性的判定错误,感谢Imprevia
  • 2017/03/29
    • 编辑器双向同步滚动功能
    • 支持配置左上角版权标志(吃水不忘挖井人,谢过了),
    • 优化表格快捷输入
    • 其他优化
  • 2017/03/27
    • 新增顶部窗口配置
    • 优化参数配置可能出现的bug
    • 优化组件传值,增加html格式的输出内容,便于用户上传
    • 修复文档部分错误
  • 2017/03/24
    • 初始化项目
    • 完成基本的功能,包括:
      • H1-H6标题等快捷输入
      • 编辑区域tab缩进
      • 编译后文件预览并高亮
      • VUE组件传值,配置输入和输出等

DEMO案例

我知道你想先看看效果,特意准备了在线DEMO,点进去看看吧

传送门 ======> vue-mdeditor

运行实例

# 安装依赖
cnpm install

开启热更新服务器s在 localhost:4397 (4397为自定义端口,如果需要修改,请前往/config/index.js:26(port:4397)修改)

cnpm run dev

打包压缩项目,并输出生产模式文件

cnpm run build

打包压缩文件,过程带输出信息

cnpm run build --report

使用方法

使用前必知

本markdown组件采用vue-cli模式开发,适用于此类开发模式,其他模式请自行修改。

安装依赖 ```bash

本组件css采用sass编写,亦可修改为css(请自行修改),核心依赖marked组件,请务必安装,谢谢

markdown编译依赖 marked 地址:https://www.npmjs.com/package/marked

同步滚动依赖 vue-scroll 地址:https://www.npmjs.com/package/vue-scroll

cnpm i marked vue-scroll --save

cnpm i node-sass sass-loader --save-dev ```

配置要求

html


javascript
// 根据项目修改引入文件的路径(所需文件放在了static目录下)
import Vue from 'vue'
import marked from 'marked'
import scroll from 'vue-scroll'
Vue.use(scroll)
import hljs from '../../static/js/highlight.min.js'
import range from '../../static/js/rangeFn.js'
```css /根据项目修改引入文件的路径(所需文件放在了static目录下)/ /引入reset文件/ @import "../../static/css/reset"; /引入github的markdown样式文件/ @import "../../static/css/github-markdown.css"; /引入atom的代码高亮样式文件/ @import "../../static/css/atom-one-dark.min.css";
> 父组件中

```html

// 引入markdown组件
import markdown from '../components/markdown'
export default {
    name: 'index',
    data() {
        return {
            msg: {
                    mdValue:'## Vue-markdownEditor'
                }
            //初始化markdown编辑器的内容,通过props传入子组件
        }
    },
    components: {
        markdown // 声明mardown组件
    },
    methods: {
        // 监听事件,接收子组件传过来的数据
        childEventHandler:function(res){
        // res会传回一个data,包含属性mdValue和htmlValue,具体含义请自行翻译
            this.msg=res;
        }
    }
}

效果展示

vue-mdeditor

后期更新

  1. 更多的语法支持
  2. 更丰富的API文档
  3. 更人性化的使用体验
  4. 更傻瓜式的配置方式

喜欢就关注一下吧。@[email protected]!!!

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.