Vue：Vue-cli2结合mavonEditor实现MarkDown编辑器

最新推荐文章于 2024-08-17 11:04:05 发布
最新推荐文章于 2024-08-17 11:04:05 发布
阅读量773 收藏 7
点赞数 1
分类专栏： Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/KaiSarH/article/details/115255879
版权

1. 安装

  • npm install mavon-editor --save

2. 注册

在main.js中进行引入注册

// 全局注册
// 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: '' }
    }
})

3. 基础使用

在组件中，直接通过<mavon-editor/>标签进行使用

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

<script>
export default {
  name: "MarkDown",
  data() {
    return {
      value:123
    }
  }
}
</script>

<style lang="scss" scoped>
#MarkDown {
  height: 100%;
  width: 100%;
  background-color: blue;
}
</style>

效果：
在这里插入图片描述

4. API

props

name 名称type 类型default 默认值describe 描述
valueString初始值
languageStringzh-CN语言选择，暂支持 zh-CN: 简体中文, zh-TW: 正体中文 ， en: 英文 ， fr: 法语， pt-BR: 葡萄牙语， ru: 俄语， de: 德语， ja: 日语
fontSizeString14px编辑区域文字大小
scrollStyleBooleantrue开启滚动条样式(暂时仅支持chrome)
boxShadowBooleantrue开启边框阴影
boxShadowStyleString0 2px 12px 0 rgba(0, 0, 0, 0.1)边框阴影样式
transitionBooleantrue是否开启过渡动画
toolbarsBackgroundString#ffffff工具栏背景颜色
previewBackgroundString#fbfbfb预览框背景颜色
subfieldBooleantruetrue： 双栏(编辑预览同屏)， false： 单栏(编辑预览分屏)
defaultOpenStringedit： 默认展示编辑区域 ， preview： 默认展示预览区域 , 其他 = edit
placeholderString开始编辑…输入框为空时默认提示文本
editableBooleantrue是否允许编辑
codeStyleStringcode-githubmarkdown样式： 默认github, 可选配色方案
toolbarsFlagBooleantrue工具栏是否显示
navigationBooleanfalse默认展示目录
shortCutBooleantrue是否启用快捷键
autofocusBooleantrue自动聚焦到文本框
ishljsBooleantrue代码高亮
imageFilterfunctionnull图片过滤函数，参数为一个File Object，要求返回一个Boolean, true表示文件合法，false表示文件不合法
imageClickfunctionnull图片点击事件，默认为预览，可覆盖
tabSizeNumber\ttab转化为几个空格，默认为\t
xssOptionsObjectnullxss规则配置，参考
toolbarsObject如下例工具栏
/*
    默认工具栏按钮全部开启, 传入自定义对象
    例如: {
         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 描述
changeString: value , String: render编辑区发生变化的回调事件(render: value 经过markdown解析后的结果)
saveString: value , String: renderctrl + s 的回调事件(保存按键,同样触发该回调)
fullScreenBoolean: status , String: value切换全屏编辑的回调事件(boolean: 全屏开启状态)
readModelBoolean: status , String: value切换沉浸式阅读的回调事件(boolean: 阅读开启状态)
htmlCodeBoolean: status , String: value查看html源码的回调事件(boolean: 源码开启状态)
subfieldToggleBoolean: status , String: value切换单双栏编辑的回调事件(boolean: 双栏开启状态)
previewToggleBoolean: status , String: value切换预览编辑的回调事件(boolean: 预览开启状态)
helpToggleBoolean: status , String: value查看帮助的回调事件(boolean: 帮助开启状态)
navigationToggleBoolean: status , String: value切换导航目录的回调事件(boolean: 导航开启状态)
imgAddString: filename, File: imgfile图片文件添加回调事件(filename: 写在md中的文件名, File: File Object)
imgDelString: filename图片文件删除回调事件(filename: 写在md中的文件名)

5. 代码高亮

  1. 安装highlight.js
    npm install highlight.js

  2. main.js中引入并注册全局指令

    // 引入高亮
import hljs from 'highlight.js'
import 'highlight.js/styles/googlecode.css'
// 注册指令
Vue.directive('highlight', function (el) {
    let blocks = el.querySelectorAll('pre code')
    blocks.forEach((block) => {
        hljs.highlightBlock(block)
    })
})

    在这里插入图片描述

  3. 组件中引入css

    import 'mavon-editor/dist/markdown/github-markdown.min.css'

    在这里插入图片描述

  4. 使用指令即可
    在这里插入图片描述

6. 完整组件代码

<template>
  <div id="MarkDown" v-highlight>
    <mavon-editor
        id="md"
        v-model="value" :fontSize="fontSize" :scrollStyle="scrollStyle"
        :placeholder="placeholder"
        :codeStyle="codeStyle" :ishljs="ishljs" :toolbars="toolbars"
        @save="saveImpl" @imgAdd="imgAddImpl" @imgDel="imgDelImpl"
    />
  </div>
</template>

<script>
import 'mavon-editor/dist/markdown/github-markdown.min.css'
import {textService,demo} from "@/service/api";

const 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: false, // 全屏编辑
  readmodel: false, // 沉浸式阅读
  htmlcode: false, // 展示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: false, // 预览
}

export default {
  name: "MarkDown",
  props: {
    editorContent: {type: String, default: null},
    fontSize: {type: String, default: `18px`},
    scrollStyle: {type: Boolean, default: true},
    placeholder: {type: String, default: `请输入内容`},
    ishljs: {type: Boolean, default: true},
    codeStyle: {type: String, default: "tomorrow-night-eighties"},
  },
  data() {
    return {
      toolbars: toolbars,
      editText: ""
    }
  },
  methods: {
    /**
     * ctrl + s 的回调事件(保存按键,同样触发该回调)
     * @param value
     * @param render
     */
    saveImpl(value, render) {
      textService().then(res => {
        console.log(res);
      })
    },
    /**
     * 图片文件添加回调事件(filename: 写在md中的文件名, File: File Object)
     * @param filename
     * @param imgFile
     */
    imgAddImpl(filename, imgFile) {
      const formdata = new FormData();
      formdata.append('image', imgFile);
      demo(formdata).then(res => {
        console.log(res);
      })
    },
    /**
     * 图片文件删除回调事件(filename: 写在md中的文件名)
     * @param filename
     */
    imgDelImpl(filename) {

    }
  },
  computed: {
    value: {
      get: function () {
        return this.editorContent
      },
      // setter
      set: function (newValue) {
        this.editText = newValue
      }
    }
  }
}
</script>

<style lang="scss" scoped>
#MarkDown {
  height: 100%;
  width: 100%;
  position: relative;

  #md {
    height: 100%;
    width: 100%;
  }
}
</style>
KaiSarH
关注
专栏目录
纯前端打造markdown编辑器
skysys的研究小屋
03-28 507
index.html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta na...
脚手架、vue-cli与@vue/cli概念辨析
skysys的研究小屋
01-22 1489
脚手架 「为减少重复性工作而做的重复性工作」的工具 例子 你要写一个项目0，源语言为ES6，用了sass, 后端是node.你每次完成一部分功能，你都要用把ES6编译到ES5、编译sass、压缩html文件。每次修改代码都要做的编译ES6、sass、压缩html这些就是重复性工作。 后来你知道了gulp, 然后你写了个gulp脚本，每次有代码改动，一句gulp build就帮你完成了上面说的这些重复性工作. 你写的gulp脚本就是为减少重复性工作而做的工作。你写完这个项目0之后，你又要写项目1，还是ES6、
推荐一款基于Vue的Markdown编辑器插件——mavonEditor
weixin_34279061的博客
04-21 2994
github地址 演示地址 特点 支持简体中文、英语、法语、西班牙语四种语言 移动端适配 语法拓展全面 支持图片上传 文档丰富、功能丰富且可配置 mavonEditor 基于Vue的markdown编辑器 English Documents Demo for jsfiddle example (图片展示) PC Install mavon-editor (安装) $ npm ...
在 Vue 2.0 中集成 Markdown 编辑器
最新发布
m0_73467713的博客
08-17 1297
-- 可以添加更多的自定义工具按钮 -->
前端：推荐一款开源免费的浏览器端Markdown编辑器Vditor
IT技术分享社区
06-05 3655
Vditor 是一款浏览器端的 Markdown 编辑器，支持所见即所得、即时渲染（类似 Typora）和分屏预览模式。它使用 TypeScript 实现，支持原生 JavaScript、Vue、React 和 Angular。提供桌面版。支持Windows、Linux、MacOS、浏览器扩展、安卓、IOS版本。
【前端编辑器分析（markdown,富文本）】
m0_67273164的博客
08-04 1073
学习目标： 提示：这里可以添加学习目标 加粗样式dsadccxz 例如：******* 一周掌握 Java 入门知识 List item **加粗样式** 学习内容： 提示：这里可以添加要学的内容 例如： 搭建 Java 开发环境 掌握 Java 基本语法 掌握条件语句 掌握循环语句 学习时间： 提示：这里可以添加计划学习的时间 例如： 周一至周五晚上 7 点—晚上9点 周六上午 9 点-上午 11 点 周日下午 3 点-下午 6 点 学习产出： 提示：这里统计学习计划的总量 例如：
超好用的前端开源 Markdown编辑器 赶紧收藏起来
江小举的博客
03-01 9592
在编写一些博客类的网站时，常常需要用到一些markdown编辑器。下面是是我收集的一些开源的前端markdown编辑器项目。 一、Editor 项目链接：https://github.com/lepture/editor 介绍：编辑器不是所见即所得的编辑器，它是纯文本markdown编辑器。 体验地址：https://lab.lepture.com/editor/ 二、tui.editor 项目...
Vue：Vue-cli2结合mavonEditor实现MarkDown编辑器，2024年最新前端面试题中高级
2301_82244392的博客
04-16 283
imgAdd | String: filename, File: imgfile | 图片文件添加回调事件(filename: 写在md中的文件名, File: File Object) || fullScreen | Boolean: status , String: value | 切换全屏编辑的回调事件(boolean: 全屏开启状态) || htmlCode | Boolean: status , String: value | 查看html源码的回调事件(boolean: 源码开启状态) |
vue3 v-md-editor markdown编辑器（VMdEditor）和预览组件（VMdPreview ）的使用
10-17
Vue3 V-Md-Editor是基于Vue3的Markdown编辑器组件，它提供了强大的Markdown编辑功能，同时集成了一款名为VMdPreview的预览组件，使得用户在编写Markdown文本时能够实时预览效果。这两个组件极大地提高了开发人员在...
脚手架vue-cli和@vue/cli的搭建及区别
热门推荐
qq_37635012的博客
04-14 1万+
vue-cli与@vue/cli vue脚手架版本目前有2,3,4.不管搭建哪个版本的脚手架，首先都需要安装node. node的安装 node的安装我们可以直接去node官网(http://nodejs.cn/)下载安装，node安装完之后，node自带的包管理工具npm也就安装好了，我们win系统直接开始在cmd窗口输入node -v查看node版本号，如下图能看到版本号说明node安装成功:...
Vue2使用monaco-editor
m0_51431448的博客
08-03 359
之前写了一篇vue3使用monaco-editor的博文（），vue3中使用过程很顺利，没发现什么问题。但是在vue2中使用碰到一些坑。不过最后总算是搞出来能用了。首先跟vue3一样，安装monaco-editor、monaco-editor-webpack-plugin这两个插件。vue3里面呢直接安装最新的就行了，但是在vue2中对版本有要求，不能太高了，经过最后的测试，
React-Markdown:基于react的前端markdown编辑器
03-10
Markdown在线转义编辑器组件使用指南 本项目基于React开发，可以以组件形式引用到项目中。 组件 定位：./ src / component / DocsOri 使用： //App.js //直接在需要使用该组件的地方约会，以虚拟Dom声明方式使用即可 //本组件替换填充父元素，最小宽度为800px，可在./src/component/DocsOri/index.module.css(.outerBlock）中进行修改 算法 优势： 无疑是其他Markdown在线编辑器，本组件利用客户端进行ast解析，可以有效缓解服务器压力 受到react-diffing算法的启发，采用diffing算法计算ast，性能控制更好（仍然有bug） 不足： 项目仍在开发中，支持的功能不完善（目前只支持header / block / strong / em / ul） 代码冗余，可优化项剩余过多（
mavonEditor:mavonEditor-基于Vue的markdown编辑器，支持各种个性化功能
05-10
mavonEditor 喜爱 & 想要将mavonEditor变得更好的小伙伴，邮这里 ps: 毕业/工作已经把我榨干，能维护mavonEditor的时间越来越少（近两年的重心没有在前端，忘大家谅解:)），希望有能力的小伙伴可以来共同维护好这个小小编辑器！ example (图片展示) PC Install mavon-editor (安装) $ npm install mavon-editor --save Use (如何引入) index.js: // 全局注册 // import with ES6 import Vue from 'vue' import mavonEditor from 'mavon-editor' import 'mavon-editor/dist/css/index.css' // use Vue.use(
mavonEditor：mavonEditor-基于Vue的markdown编辑器，支持多种个性化功能
02-03
mavonEditor：mavonEditor-基于Vue的markdown编辑器，支持多种个性化功能
前端页面插件集成-Markdown编辑器
小L的博客
01-05 3717
前端项目集成mavon-editor的Markdown插件，并回显到网页上。首先需要下载MarkDown的插件包，在前端项目的static中创建lieb目录 引入下载好的所有文件,引入css、js、Jquary文件,定义一个textarea区域 作为MarkDown的载体.
vue 中使用 markdown 编辑器（mavon-editor）
实习打字猿的博客
04-18 838
# npm 安装 npm install mavon-editor --save # 新建 mavonEditro.vue <template> <div> <mavon-editor v-model="content" @change="change" style="min-height: 600px" ...
在Vue中使用mavonEditor
weixin_43652669的博客
08-12 269
安装 npm install mavon-editor --save 引入 //在 main.js 全局注册 import mavonEditor from 'mavon-editor' import 'mavon-editor/dist/css/index.css' Vue.use(mavonEditor); 基础使用 <mavon-editor v-model="value" :ishljs="true" @imgAdd="$imgAdd" @imgDel="$imgDel" @sa
Vue 使用 Markdown标记语言编辑器（MavonEditor）
@必意玲
05-24 943
文章目录1. 实现效果2. 直接撸 `MavonEditor`，上代码2.1 npm安装 MavonEditor2.2 在需要使用Markdown的Vue组件导入mavonEditor2.3 vue页面使用3. 参考 1. 实现效果 本篇文章的实现效果图如下 2. 直接撸 MavonEditor，上代码 2.1 npm安装 MavonEditor npm install mavon-editor --s 2.2 在需要使用Markdown的Vue组件导入mavonEditor import { mavo
Vue 2.0：利用vue-cli和element-ui构建树形表格组件
本文档详细介绍了如何使用Vue 2.0结合vue-cli和element-ui构建一个树形treeTable组件。首先，我们概述了整个开发过程中的关键技术和工具： 1. **vue-cli的安装与使用**: vue-cli是一个流行的前端脚手架工具，用于...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

KaiSarH

如果觉得文章不错，可以支持下~

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值