Vue如何整合mavon-editor编辑器(markdown编辑和预览)

目录
  • 简介
    • 说明
    • 官网网址
  • 使用编辑功能
    • 代码
    • 使用预览功能
    • 结果展示

简介

说明

本文介绍Vue如何使用markdown编辑器。

mavon-editor是目前比较主流的markdown编辑器，本文介绍它的使用方法。

官网网址

https://github.com/hinesboy/mavonEditor

安装mavon-editor依赖

npm install mavon-editor -P

注册mavon-editor编辑器

在main.js中加入如下内容：

import mavonEditor from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'
Vue.use(mavonEditor);

使用编辑功能

代码

<template>
  <div class="app-container">
    <el-button type="primary" @click="saveGuideData()">发布</el-button>

    <el-form :model="guideDetail" :rules="rules" ref="dataForm" label-width="100px">
      <el-form-item label="内容" prop="content">
        <mavon-editor v-model="guideDetail.content"></mavon-editor>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import {saveGuide} from "@/api/guide";
export default {
  name: "GuideEdit",
  data() {
    return {
      guideDetail: {
        content: ''
      },
      rules: {
        content: [
          {required: true, message: '请输入内容', trigger: 'blur'}
        ]
      },
    }
  },
  methods: {
    saveGuideData() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          saveGuide(this.guideDetail.content).then(() => {
            this.$notify({
              title: '成功',
              message: '创建成功',
              type: 'success',
              duration: 2000
            })
          })
        }
      })
    }
  }
}
</script>

<style scoped>

</style>

结果展示

使用预览功能

代码

<template>
  <div class="app-container">
    <mavon-editor v-model="guideDetail.content"
                  :subfield="false"
                  :defaultOpen="'preview'"
                  :editable="false"
                  :toolbarsFlag="false"
                  >
    </mavon-editor>
  </div>
</template>

<script>
export default {
  name: "GuideDetail",
  data() {
    return {
      guideDetail: {
        content: '### 这是第三级标题\n' +
            '这里是正文'
      },
    }
  }
}
</script>

<style scoped>

</style>

结果展示

到此这篇关于Vue整合mavon-editor编辑器(markdown编辑和预览)的文章就介绍到这了,更多相关Vue整合mavon-editor编辑器内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 一个HTML标签教你实现带动画的抖音LOGO效果

    一个HTML标签教你实现带动画的抖音LOGO效果

    目录 大家好，我是零一，今天给大家表演 仅用一个HTML标签实现带动画的抖音LOGO，涉及了很多知识点，欢迎交流讨论 先上结果，最终实现效果如下： 还原度应该还可以吧？ 抖音Logo结构 想要用CSS来画抖音的Logo，前提要先了解它的构造，一定是一些几何图形的拼接组合，因为之前很多业界大佬已经扒过抖音的Logo的结构了，我就拿来借用一下： 好的，有点复杂，简化一下，其实就是 4 个部分 每个颜色划出来的区域代表一个部分，所以最后是：1/4圆环 + 半圆 + 长条矩形 + 半径略大一些的1/4圆

  • unified如何处理markdown解析器详解

    unified如何处理markdown解析器详解

    目录 unified是什么 unified生态简介 工作原理 Parse Transform Stringify 牛刀小试 环境搭建 处理ESM类型包 最简用法 加载文档meta 一个实际使用例子: unified是什么 unified是用于文档处理的生态系统,核心包提供了文档处理的流程控制,具体功能由生态系统中各个插件提供.例如我们如果需要处理markdown,就需要使用markdown处理相关的插件.当然除了markdwon以外,还提供了处理HTML.JSX等的插件.其良好的扩展能力能让我们

  • 一文详解JavaScript 如何将 HTML 转成 Markdown

    一文详解JavaScript 如何将 HTML 转成 Markdown

    目录 npm script 参数配置 前言: 本篇带来:在 JavaScript 如何将 HTML 转成 Markdown?先收藏,总有一天要用到!! npm 我们主要是借助 Turndown这个库来实现的 npm 安装 npm i turndown es6 import 引入: import TurndownService from 'turndown' CommonJs require 引入: const TurndownService = require('turndown'); 接下来我

  • umi插件开发仿dumi项目实现markdown文件转为页面

    目录 引言 处理导入错误 loader返回渲染函数 添加react处理loader 用ts来写loader 改变原来的loader 创建新的loader 配置webpack 引言 前面我们已经成功将.md文件通过import加载到react组件中,并能拿到文件内容进行展示.但是点击markdown的导航链接还是会报错: 这个报错和前面的报错有点相似,只是前面是无法解析链接,这里是无法解析对象. 处理导入错误 在react渲染页面时,是调用一个个渲染函数来渲染页面,我们来对比一下button页和m

  • umi插件开发仿dumi项目加载markdown文件实现详解

    目录 引言 为什么不能直接展示markdown chainWebpack webpack loader 实现过程 新建插件 新建loader 新建测试文档 运行项目 解决文件加载类型错误 webpack ruletype 解决错误 引言 前面章节中我们已经顺利将tsx组件转换为页面展示,但是目前提供的功能和umi的约定式路由功能差不多,接下来我们将实现将markdown文件转换为页面展示. 为什么不能直接展示markdown 我们前面所使用的页面写法都是react组件式写法,umi通过webpa

  • Vue3解析markdown并实现代码高亮显示的详细步骤

    Vue3解析markdown并实现代码高亮显示的详细步骤

    目录 具体实现步骤如下: 一.安装依赖库 二.在main.js文件中引入highlight.js及样式并创建一个自定义的全局指令 三.在Vue组件中应用marked解析及实现代码高亮 四.显示效果 Vue实现博客前端,需要实现markdown的解析,如果有代码则需要实现代码的高亮.Vue的markdown解析库有很多,如markdown-it.vue-markdown-loader.marked.vue-markdown等.这些库都大同小异.这里选用的是marked,代码高亮的库选用的是high

  • glow工具在命令行读取Markdown好物分享

    glow工具在命令行读取Markdown好物分享

    目录 写在前面 准备工作 Glow的安装和使用 安装 使用 写在最后 写在前面 这篇文章推荐一个由Golang编写的一个命令行工具——Glow,这个CLI工具可以在命令行读取Markdown,Markdown对于码农来说也是非常重要的,几乎所有的文档全部都有Markdown的身影. 笔者热衷于使用命令行,感觉命令行使用起来非常舒爽,有的时候需要阅读Markdown,但是cat命令并没有加粗什么的,展示的Markdown阅读起来也不是很友好,这里推荐Glow来舒适的展示Markdown,效果图如下

  • Vue如何整合mavon-editor编辑器(markdown编辑和预览)

    目录 简介 说明 官网网址 使用编辑功能 代码 使用预览功能 结果展示 简介 说明 本文介绍Vue如何使用markdown编辑器. mavon-editor是目前比较主流的markdown编辑器,本文介绍它的使用方法. 官网网址 https://github.com/hinesboy/mavonEditor 安装mavon-editor依赖 npm install mavon-editor -P 注册mavon-editor编辑器 在main.js中加入如下内容: import mavonEdi

  • Vue.js 2.0 移动端拍照压缩图片预览及上传实例

    Vue.js 2.0 移动端拍照压缩图片预览及上传实例

    在学习和使用Vue.js 2.0 的过程中遇到不少不一样的地方,本来移动端开发H5应用,准备将mui框架和Vue.js+vue-router+vuex 全家桶结合起来使用,但是在拍照上传的实现过程中遇到了无法调用plus的H5+接口的问题,所以最后拍照上传功能还是使用input file方式里解决的.但是内心还是不甘心的,由于项目进度推进,迭代版本,所以不得不放弃,后续可能我将此功能使用调用H5+接口实现. 首先我来讲我实现这个拍照预览压缩上传的思路,准确的说应该是拍照或选择图片压缩之后预览及上

  • jsoneditor二次封装实时预览json编辑器组件react版

    jsoneditor二次封装实时预览json编辑器组件react版

    目录 前言 设计思路 正文 jsoneditor的使用 结合react进行二次封装 前言 做为一名前端开发人员,掌握vue/react/angular等框架已经是必不可少的技能了,我们都知道,vue或react等MVVM框架提倡组件化开发,这样一方面可以提高组件复用性和可扩展性,另一方面也带来了项目开发的灵活性和可维护,方便多人开发协作.接下来文章将介绍如何使用react,开发一个自定义json编辑器组件.我们这里使用了jsoneditor这个第三方库,官方地址: jsoneditor 通过实现

  • vue裁切预览组件功能的实现步骤

    vue版本裁切工具,包含预览功能 最终效果: qiuyaofan.github.io/vue-crop-de- 源码地址: github.com/qiuyaofan/v- 第一步:先用vue-cli安装脚手架(不会安装的看 vue-cli官网) // 初始化vue-cli vue init webpack my-plugin 第二步:创建文件 新建src/views/validSlideDemo.vue, src/components里新建VueCrop/index.js,VueCrop.vue

  • vue图片上传本地预览组件使用详解

    vue图片上传本地预览组件使用详解

    最近项目一直在使用vue,以前只是用vue做过一些简单的demo对数据进行增删改,并没有用于实际开发项目.今天就想了解一下如何用vue实现常见的图片上传前本地预览效果. 效果预览: <template> <div class="image-view"> <div class="addbox"> <input type="file" @change="getImgBase()">

  • Vue+UpLoad实现上传预览和删除图片的实践

    Vue+UpLoad实现上传预览和删除图片的实践

    1.用vue+Element完成一个图片上传.点图预览.加删除功能,如图: 2.首先我们再组件中引入这一段代码,每个属性的使用也都放在这里了: <el-upload class="upload-demo" action=""//引号里面填要上传的图片地址,用接口的话是公共的接口地址拼接一个图片的接口 :on-preview="handlePreview"//图片已经上传完成时点击触发(钩子函数) :on-remove="handl

  • vue中实现Monaco Editor自定义提示功能

    这次接到一个需求,要在浏览器的 IDE 中支持自定义提示功能,如下所示: 可以看到,它可以根据用户输入的内容来一项一项排除,只显示完全匹配的那一项. 项目的框架是 Vue ,编辑器用的是 Monaco Editor . 什么是 Monaco Editor vscode 是我们经常在用的编辑器,它的前身是微软的一个叫 Monaco Workbench 的项目,而 Monaco Editor 就是从这个项目中成长出来的一个 web 编辑器,他们很大一部分的代码都是共用的,所以 Monaco Edit

  • 关于在vue 中使用百度ueEditor编辑器的方法实例代码

    1. 安装  npm i vue-ueditor --save-dev 2.从nodemodels  取出ueditor1_4_3_3 这整个目录,放入vue 的 static 目录 3.配置 ueditor.config.js 的  21行代码  更改路径   var URL = '/static/ueditor1_4_3_3/' || getUEBasePath();  (1)     serverUrl: URL + 'php/controller.php',  这里是你配置的上传内容的

  • vue项目中使用tinymce编辑器的步骤详解

    Tinymce富文本也是一款很流行编辑器 把文件放在static下,然后在index.html文件中引入这个文件 <script src="static/tinymce/tinymce.min.js"></script> <tinymce :height=200 ref="editor" v-model="editForm.fdcNote"></tinymce> 在其他子文件中引入这个 import

  • VUE和Antv G6实现在线拓扑图编辑操作

    效果图如下: 我使用的是G6 2.0,也可以使用 G6 3.0,3.0的拓扑图单独作为一个编辑器使用,使用更加方便.不过2.0的比较简单,容易上手. 1.首先在Antv官网上找到蚂蚁Antv G6插件,引入插件. 也可以npm 方式引入. 2.写组件 export default { name: "index", components: {}, mounted() { this.initG6(); }, data() { return { action: '', name: '', f

随机推荐