WIKE 在现有MD编辑器上进行的二次开发，本项目长期维护，如果有定制需求请提issue

简介

一款使用marked和highlight.js开发的一款markdown编辑器，除常见markdown语法外，支持快捷输入、图片粘贴、代码复制、全屏编辑、预览等功能。

使用起来简单方便，只需几行代码，即可在你的页面上引入一个markdown编辑器，编辑区支持像专业编辑器那样。

1. 线上预览地址 https://wikecloud.com/md

2. git地址 https://gitee.com/wike2019/wike__md_editor

特点

方便扩展，根据实际需求，支持常见的功能配置，也可根据实际需求进行深度定制

体积小，加载速度快

源码有注释 方便学习理解，也可以二次开发

键盘事件监听，如保存、粘贴、回车时上次输入语法判断等

支持图片复制导入功能（目前只支持单张图片）

可扩展性强，除了提供的属性配置编辑器，也可直接在原有组件基础上进行二次开发

使用方式

通过 npm 安装 wk_md：

npm i wk_md --save

项目介绍

    ├── md/    ----- 组件目录
    │   ├── index.vue       ----- 编辑器主文件
    │   ├── utils/            ----- 工具函数
    │   ├── config/           ----- 配置信息
    │   │   └── tools.js/             ----- 工具栏配置信息
    │   │   └── marked.js/            ----- 编辑器配置信息
    |   │   └── alert.js/             ----- 弹窗配置信息
    |   │   └── event.js/             ----- 事件配置信息
    │   ├── components/         ----- 子组件
    │   │   └── dialog.vue           ----- 弹窗模板组件
    │   │   └── tools.vue            ----- 工具栏组件  
    │   │   └── alert.vue           -----  弹窗组件      
    │   ├── assets/              ----- 第三方,及项目资源文件

简单使用

<template>
    <div class="container">
          <wk_md
                v-model="val"
                ref="md"
                @on-ready="onReady"
                @on-upload-image="onUpladImage"
                @on-save="onSave"
                :height="800"
        ></wk_md>
    </div>
</template>

<script>
   import wk_md from 'wk_md';
   export default {
        components: {
            wike_md
        },
        mounted() {

        },
        data: function () {
            return {
                val: '',
                vm:null
            }
        },
        methods: {
            onReady({vm}) {
               this.vm=vm

            },
            onUpladImage(file) {
                this.vm.instance.insertImage("http://csdn.52wike.com/wike.jpeg");
            },
            onSave({value,html}) {
               //value 为md编辑器的内容
               //html 为md内容解析成的html
            },
        }
    }
</script>

编辑器基本属性

value

• Type: String/Number

• Default: ''

编辑器输入的文本，支持通过v-dodel数据双向绑定设置编辑器内容和获取编辑器的值。

width

• Type: String/Number

• Default: auto

编辑器的初始化宽度。

height

• Type: Number

• Default: 600

编辑器的初始化高度。

bordered

• Type: Boolean

• Default: true

编辑器是否含有边框。

autoSave

• Type: Boolean

• Default: false

是否开启自动保存，设置为开启时可通过绑定on-save事件获取编辑器内的值和代码块主题。

<wk_md @on-save="handleOnSave"/>

 handleOnSave({value,html}){
 		//value md编辑器的内容 
        //html  md编辑器解析成的html
        console.log(value,html);
 }

interval

• Type: Number

• Default: 10000

自动保存间隔时间，单位：mm，默认10000mm，需要autoSave = true时才有效

exportFileName

• Type: String

• Default: 我的文档

导出的md文件名称，默认 我的文档.md。

markedOptions

• Type: Object

• Default: {}

marked配置项,可以根据需求自定义。

<wk_md :markedOptions="{baseUrl:'http://***.oss-cn-shanghai.aliyuncs.com/'}"/>

toolbars

• Type: Object

• Default: 参见下表

头部菜单按钮，通过设置true or false控制决定是否显示，目前配置支持持控制按钮显示隐藏，后续将支持根据配置显示排列顺序。

| 名称 | 说明 | 默认是否显示 | | ---------- | ---------------- | ------------ | | strong | 粗体 | 是 | | italic | 斜体 | 是 | | overline | 删除线 | 是 | | h1 | 标题1 | 是 | | h2 | 标题2 | 是 | | h3 | 标题3 | 是 | | h4 | 标题4 | 是 | | h5 | 标题5 | 是 | | h6 | 标题6 | 是 | | hr | 分割线 | 是 | | quote | 引用 | 是 | | ul | 无序列表 | 是 | | ol | 有序列表 | 是 | | code | 代码块 | 是 | | link | 链接 | 是 | | image | image | 是 | | table | 表格 | 是 | | checked | 已完成列表 | 是 | | notChecked | 未完成列表 | 是 | | preview | 预览 | 是 | | fullscreen | 全屏 | 是 | | exportmd | 导出为*.md或者pdf文件 | 是 | | importmd | 导入本地*.md文件 | 是 | | save | 保存按钮 | 是 | | clear | 清空内容 | 是 | | sql | 解析sql | 是 | | html | 解析html | 是 | | importword | 导入word | 是 |

编辑器事件

on-ready

编辑器初始化完成时触发，返回值为Object，包含组件本身和insertContent方法。

onReady({vm,insertContent}) {
   //vm为组件对象
   //insertContent插入内容函数
},

on-save

编辑器保存事件，自动保存或者手动保存时触发，支持ctrl+s或command+s触发保存，返回值类型为Object，包含当前输入值value和md渲染成的html。

onSave({value,html}) {
   //value 为md编辑器的内容
   //html 为md内容解析成的html
},

on-upload-image

图片上传事件，用户自定义上传图片，复制粘贴图片截图、文件和点开菜单栏上传按钮时式触发，返回file文件，上传文件后可结合insertImage插入图片。

onUpladImage(file) {
	let formData = new FormData()
    formData.append('file', file, file.name)
    //将formdata发送到后台即可
    axios.post('服务器地址', formData).then((data) => {
       console.log(data)
       this.$refs.md.insertImage(data.data.url);
    })
}

问题反馈

对于功能上的缺陷、使用方法和希望扩展的功能，可以提 Issues。

作者qq 3223136293