v-mark-editor

基于markdown-it开发的vue md编辑器, 兼容[email protected]语法

安装

npm i -S v-mark-editor

引入插件

import Vue from 'vue'
import VMarkEditor from 'v-mark-editor'
Vue.use(VMarkEditor)

插入组件

<template>
  <div id="app">
    <v-mark-editor :options="options" @get-content-md="getUpdatedContent" @get-content-html="getUpdatedContent"/>
  </div>
</template>

options配置

options: {
  height: '800px', // 编辑器高度
  defaultContent: testContent, // 设置编辑器内容
  uploadImgPath: 'http://127.0.0.1/api/uploads/img', // 图片上传路径
  showEditor: true, // 展示编辑区域
  showPreviewer: true, // 展示预览区域
}

获取编辑器内容

/**
* @description: 监听内容md或者html变化
* @param {String} content
*/    
getUpdatedContent(content) {
  console.log(content)
}

图片上传服务器返回值

{
  code: 10001, // 上传成功返回10001
  data: "http://127.0.0.1/1.png", // 返回已经成功上传的图片路径
  message: "图片上传成功！" // 自定义上传提示语
}