非你网

git 地址： https://github.com/hinesboy/mavonEditor

操作一波

npm install mavon-editor

然后

# main.js
import mavonEditor from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'

Vue.use(mavonEditor)

创建地：

# src/views/blog/create.vue
<template>
  <div>
    <mavon-editor v-model="context" :toolbars="toolbars" @keydown="" />
  </div>
</template>

<script>
export default {
  name: 'MarkdownEditor',
  data() {
    return {
      context: '', // 输入的数据
      toolbars: {
        bold: true, // 粗体
        italic: true, // 斜体
        header: true, // 标题
        underline: true, // 下划线
        mark: true, // 标记
        superscript: true, // 上角标
        quote: true, // 引用
        ol: true, // 有序列表
        link: true, // 链接
        imagelink: true, // 图片链接
        help: true, // 帮助
        code: true, // code
        subfield: true, // 是否需要分栏
        fullscreen: true, // 全屏编辑
        readmodel: true, // 沉浸式阅读
        undo: true, // 上一步
        trash: true, // 清空
        save: true, // 保存（触发events中的save事件）
        navigation: true // 导航目录(1.4.2)
      }
    }
  },
}
</script>

参考

https://www.cnblogs.com/entfrm/p/12623344.html

更多皮肤主体：
https://www.mdnice.com/