一款强大的Vue-markdown编辑器插件_天道酬勤-CSDN博客

安宇雨 - 随手采集
2021-06-16 16:45:20
随手采集
0000-未整理-等待研究

example (图片展示)

PC-GIF

查看更多图片点击这里...

Use Setup (开始)

Install mavon-editor (安装)

$ npm install mavon-editor --save

Use (如何引入)

index.js:

    // 全局注册    // import with ES6    import Vue from 'vue'    import mavonEditor from 'mavon-editor'    // markdown-it对象：md.s_markdown, md => mavonEditor实例    //                 or    //                 mavonEditor.markdownIt     import 'mavon-editor/dist/css/index.css'    // use    Vue.use(mavonEditor)    new Vue({        'el': '#main',        data() {            return { value: '' }        }    })

index.html

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

更多引入方式点击这里...

代码高亮

如不需要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, default_open: "preview"

API 文档

props

name 名称

type 类型

default 默认值

describe 描述

value

String

初始值

language

String

语言选择，暂支持 cn: 中文简体， en: 英文， fr: 法语

scrollStyle

Boolean

true

开启滚动条样式(暂时仅支持chrome)

subfield

Boolean

true

true：双栏(编辑预览同屏)， false：单栏(编辑预览分屏)

default_open

String

edit：默认展示编辑区域， preview：默认展示预览区域 , 其他 = edit

placeholder

String

开始编辑...

输入框为空时默认提示文本

editable

Boolean

true

是否允许编辑

code_style

String

code-github

markdown样式：默认github, 可选配色方案

toolbarsFlag

Boolean

true

工具栏是否显示

toolbars

Object

如下例

工具栏

ishljs

Boolean

true

代码高亮(cdn外链)

 /*    默认工具栏按钮全部开启, 传入自定义对象    例如: {         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

name 方法名

params 参数

describe 描述

change

String: value , String: render

编辑区发生变化的回调事件(render: value 经过markdown解析后的结果)

save

String: value , String: render

ctrl + s 的回调事件(保存按键,同样触发该回调)

fullscreen