Vue editor md2

基于vue 对editor.md的封装

Version: 1.0.11 Updated: 11/05/2018

By: chenyuqiao License: MIT

Downloads Last 30 Days: 23

Install

npm i vue-editor-md2
yarn add vue-editor-md2

CDNs

bundle.run: https://bundle.run/vue-editor-md2

jsDelivr: https://cdn.jsdelivr.net/npm/vue-editor-md2

unpkg: https://unpkg.com/vue-editor-md2

vue-editor-md

基于vue 对editor.md的封装 editor.md官方地址:https://pandao.github.io/editor.md/ 开源在线 Markdown 编辑器

##install

npm install --save vue-editor-md

use

#####1. 全局引入

import editor from "./lib/vueEditorMd.js"
Vue.use(editor)
//模板使用
<template>
    <vueEditorMd/>
</template>

#####2. 子组件引入

<template>
    <div>
        <vueEditorMd/>
    </div>
</template>
<script>
    import {vueEditorMd} from "vueEditorMd"
    export default({
        components:{
            vueEditorMd
        }
    })
</script>

props

prop 类型 (type) 默认值 (default) 描述
value String none 编辑器赋值
placeholder String none placeholder默认值
tooBars Array ["undo","redo","bold","del","italic","quote","list-ul","list-ol","hr","link","reference-link","code","code-block","datetime","file", "watch","preview","fullscreen", "help"] 更多名称参考 官方文档
theme Object { editor:"default",previewTheme:"default",editorTheme:"default"} 官方文档
size Object {width:"100%",height:"600px"}
keyMap Object {"Ctrl-S":(cm)=>{ alert('ctrl+s') }} 官方文档

emit

事件名称 (Event name) 参数(params) 描述(discription)
change data 监听用户input 获取markdown源码,及 生成的html
save data 监听用户使用快捷键ctrl+s/command+s 保存文本事件,携带文本内容

Events

事件名称 (Event name) 参数(params) 描述(discription)
insert data 父组件直接调用insert(内容string)方法向光标位置插入或替换指定内容
Categories: Vue js