MavonEditor是一款基于Vue的Markdown编辑器，它结合了Markdown语法和Typora的实时预览功能，提供了一个所见即所得（WYSIWYG）的编辑体验。MavonEditor不仅支持基本的Markdown语法，还支持LaTeX公式、代码高亮、目录生成、自动目录锚点链接等功能，使其成为撰写技术文档、博客文章等的
说明mavon-editor是一款基于Vue的markdown编辑器,因为当前项目是采用Nuxt,所以这里所展示的教程是针对Nuxt引入mavon-editor插件,如果你只是采用了 Vue,没有用Nuxt框架,那么你可以看mavon-editor官方文档,有详细说明,其实它们只有在引入mavon-editor方式有细微差别,使用都是一样的。mavonEditor官方地址 一、Nuxt引入mavon-e...
createApp }from'vue'importAppfrom'./App.vue'importrouterfrom'./router'// markdown编辑器importVMdEditorfrom'@kangc/v-md-editor';import'@kangc/v-md-editor/lib/style/base-editor.css';importgithubThemefrom'@kangc/v-md-editor/lib/theme/github.js';import'@kangc/v-md-editor/lib/theme/style...
v-md-editor https://code-farmer-i.github.io/vue-markdown-editor/zh/ md-editor-v3@4.17.0 https://imzbf.github.io/md-editor-v3/en-US/demo 下载之后,其实我们的渲染需要格式,而不是需要这种编辑器,所以我们其实两款,使用的都是preview的功能, 第一款<template><v-md-preview:text="text"></v-...
Vue引入mavon-editor插件实现markdown功能 说明mavon-editor是一款基于Vue的markdown编辑器,因为当前项目是采用Nuxt,所以这里所展示的教程是针对Nuxt引入mavon-editor插件,如果你只是采用了 Vue,没有用Nuxt框架,那么你可以看mavon-editor官方文档,有详细说明,其实它们只有在引入mavon-editor方式有细微差别,使用都是一样的。
以下是一些常用的Markdown插件及其简要介绍: v-md-editor: 简介:v-md-editor是一个功能强大的Markdown编辑器组件,支持Vue 3。它提供了丰富的编辑和预览功能,并且文档详细。 安装:可以通过npm或yarn进行安装,例如npm i @kangc/v-md-editor@next -S。 使用:引入组件后,可以在模板中使用<v-md-editor>...
mavonEditor 以一个基于 Vue 的 Markdown 编辑器，支持多种个性化功能，支持所见即所得编辑模式、阅读模式等。使用方法 安装 $ npm install mavon-editor --save 注册组件 // 全局注册// import with ES6import Vue from 'vue'import mavonEditor from 'mavon-editor'import 'mavon-editor/dist/css/index.css'...
1、npm安装插件 npm i @kangc/v-md-editor -S 2、main.js 全局引入插件 /* v-md-editor 编辑器 start *//* 1、v-md-editor 基础引用 */importVueMarkdownEditor from'@kangc/v-md-editor';import'@kangc/v-md-editor/lib/style/base-editor.css';importvuepressTheme from'@kangc/v-md-editor/...
// md为 markdown-it 实例,可以在此处进行修改配置,并使用 plugin 进行语法扩展 // md.set(option).use(plugin); }, }); 扩展代码高亮语言包 请通过babel-plugin-prismjs(opens new window)插件按需引入对应的语言包。 安装babel-plugin-prismjs 插件 ...
let markdown=this.$refs.editor.d_value; // 修改 markdownthis.$refs.editor.d_value ='> hello world';// 获取编译后的 htmllet html =this.$refs.editor.d_render; 注意,一般都是使用this.$refs这样的方式来获取或修改数据,如果只使用this则只能获取到markdown和修改this.$refs这样的方式来获取或修改...