Vue Markdown编辑器

效果展示

因工作中需要使用 是在https://gitee.com/wike2019/wike__md_editor中自己摸索完成 如有侵权请 告知本人 本人立刻删除此文章

简介

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

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

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

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

特点

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

体积小，加载速度快

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

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

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

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

使用方式

通过 npm 安装 wk_md：
npm i wk_md --save

项目介绍

使用方法

将项目在git地址中下载 将md文件夹放置在自己项目的components文件中

在需要使用的vue页面中引入组件，和普通组件引入方法一样

在components中注册组件

在页面中使用组件

使用方法代码

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

更多方法在git地址中：https://gitee.com/wike2019/wike__md_editor