mavonEditor 基于 Vue 的 Markdown 编辑器组件

• Z时代
• 2024-01-10
• 分类：IT

mavonEditor 以一个基于 Vue 的 Markdown 编辑器，支持多种个性化功能，支持所见即所得编辑模式、阅读模式等。

使用方法

安装

$ npm install mavon-editor --save

注册组件

// 全局注册
// import with ES6
import Vue from 'vue'
import mavonEditor from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'
// use
Vue.use(mavonEditor)
new Vue({
  'el': '#main',
  data() {
    return { value: '' }
  }
})

在 Vue 文件中编写代码

<div id="main">
  <mavon-editor v-model="value"/>
</div>

API 文档

props

/*
默认工具栏按钮全部开启, 传入自定义对象
例如: {
   bold: true, // 粗体
   italic: true,// 斜体
   header: true,// 标题
}
此时, 仅仅显示此三个功能键
*/
toolbars: {
  bold: true, // 粗体
  italic: true, // 斜体
  header: true, // 标题
  underline: true, // 下划线
  strikethrough: true, // 中划线
  mark: true, // 标记
  superscript: true, // 上角标
  subscript: true, // 下角标
  quote: true, // 引用
  ol: true, // 有序列表
  ul: true, // 无序列表
  link: true, // 链接
  imagelink: true, // 图片链接
  code: true, // code
  table: true, // 表格
  fullscreen: true, // 全屏编辑
  readmodel: true, // 沉浸式阅读
  htmlcode: true, // 展示html源码
  help: true, // 帮助
  /* 1.3.5 */
  undo: true, // 上一步
  redo: true, // 下一步
  trash: true, // 清空
  save: true, // 保存（触发events中的save事件）
  /* 1.4.2 */
  navigation: true, // 导航目录
  /* 2.1.8 */
  alignleft: true, // 左对齐
  aligncenter: true, // 居中
  alignright: true, // 右对齐
  /* 2.2.1 */
  subfield: true, // 单双栏模式
  preview: true, // 预览
}

events 事件绑定

代码高亮

如不需要 hightlight 代码高亮显示，你应该设置 ishljs 为 false

开启代码高亮 props

  // ishljs默认为true
  <mavon-editor :ishljs = "true"></mavon-editor>

为优化插件体积，从v2.4.2起以下文件将默认使用 cdnjs 外链:

• highlight.js
• github-markdown-css
• katex(v2.4.7)

代码高亮highlight.js中的语言解析文件和代码高亮样式将在使用时按需加载. github-markdown-css和katex仅会在mounted时加载

Notice: 可选配色方案 和 支持的语言 是从 highlight.js/9.12.0 导出的

不使用cdn，本地按需加载点击这里…

图片上传

<template>
  <mavon-editor ref=md @imgAdd="$imgAdd" @imgDel="$imgDel"></mavon-editor>
</template>
exports default {
  methods: {
    // 绑定@imgAdd event
    $imgAdd(pos, $file){
      // 第一步.将图片上传到服务器.
       var formdata = new FormData();
       formdata.append('image', $file);
       axios({
         url: 'server url',
         method: 'post',
         data: formdata,
         headers: { 'Content-Type': 'multipart/form-data' },
       }).then((url) => {
         // 第二步.将返回的url替换到文本原位置![...](0) -> ![...](url)
         /**
         * $vm 指为mavonEditor实例，可以通过如下两种方式获取
         * 1. 通过引入对象获取: `import {mavonEditor} from ...` 等方式引入后，`$vm`为`mavonEditor`
         * 2. 通过$refs获取: html声明ref : `<mavon-editor ref=md ></mavon-editor>，`$vm`为 `this.$refs.md`
         */
         $vm.$img2Url(pos, url);
       })
    }
  }
}

图片上传详情点击这里…

注

• 默认大小样式为 min-height: 300px , min-width: 300px 可自行覆盖
• 基础z-index: 1500
• 仅用作展示可以设置props: toolbarsFlag: false , subfield: false, defaultOpen: “preview”

快捷键

Dependencies (依赖)

• markdown-it
• auto-textarea

Markdown 语法拓展

• emoji
• subscript
• superscript
• container
• definition list
• abbreviation
• footnote
• insert
• mark
• todo list
• highlight
• katex
• images preview
• toc
• 可通过获取markdown-it对象引入其他语法插件

相关链接

• Github 地址：https://github.com/hinesboy/mavonEditor
• 在线实例：https://www.wenjiangs.com/markdowntohtml/#/

以上是 mavonEditor 基于 Vue 的 Markdown 编辑器组件 的全部内容， 来源链接： utcz.com/p/232469.html