1.使用markdown

首先下载mavon-editor

 npm install mavon-editor --save

然后再main.js中引入文件

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

在vue的template中添加以下组件

<mavon-editor v-model="context" :toolbars="toolbars" />
<el-button @click="sendBolg">发送</el-button>

在 data中放入以下数据，看自己需要进行打开关闭功能。

 data () {return {context: ' ',//输入的数据toolbars: {bold: true, // 粗体italic: true, // 斜体header: true, // 标题underline: true, // 下划线mark: true, // 标记superscript: true, // 上角标quote: true, // 引用ol: true, // 有序列表link: true, // 链接imagelink: true, // 图片链接help: true, // 帮助code: true, // codesubfield: true, // 是否需要分栏fullscreen: true, // 全屏编辑readmodel: true, // 沉浸式阅读undo: true, // 上一步trash: true, // 清空save: true, // 保存（触发events中的save事件）navigation: true // 导航目录}};},

在methods中定义获取markdown内容方法

  methods: {sendBolg () {console.log(this.context)}

点击发送即可看到自己编辑的内容，不过内容是md格式的，我们可以把它转换为html格式。

2. md转换html

首先下载插件showdown

npm install showdown --save

然后再main.js中引入

// showdown
import showdown from 'showdown';
Vue.prototype.converter = new showdown.Converter();

在方法里面使用

  methods: {sendBolg () {console.log(this.context)var htmlContent = this.converter.makeHtml(this.context)console.log(htmlContent)}},

可见已经转换为html格式了

vue使用markdown相关推荐

Vue集成markdown
第一步安装mavon-editor npm install mavon-editor --save 第二步在main.js注册mavon-editor并使用 // 全局注册// import wi ...
技能学习：学习使用php（tp6框架） + vue.js，开发前端全栈网站-8.使用mavoneditor(vue的markdown编辑器)，并批量上传图片
技能学习:学习使用php(tp6框架) + vue.js,开发前端全栈网站-8.使用mavoneditor(vue的markdown编辑器),并批量上传图片技能学习:学习使用php(tp6框架) + ...
vue 适配Markdown格式
vue 适配Markdown格式 1. 安装mavonEditor $ npm install mavon-editor --save 或者 $ yarn add mavon-editor 2. 在m ...
SpringBoot和Vue集成Markdown和多级评论——基于SpringBoot和Vue的后台管理系统项目系列博客（二十三）
系列文章目录系统功能演示--基于SpringBoot和Vue的后台管理系统项目系列博客(一) Vue2安装并集成ElementUI--基于SpringBoot和Vue的后台管理系统项目系列博客(二) ...
Vue渲染Markdown数据
零,最简单方法今天在找基于Vue的markdown编辑器时,找到了mavonEditor模块,本来想着通过抽离抽出展示Markdown数据相关的代码,结果忙活了一阵,突然看见文档有提示怎么只展示Ma ...
Vue实现markdown编辑器
安装 mavon-editor npm install mavon-editor --save 引入mavonEditor import Vue from 'vue'import mavonEdito ...
Vue使用Markdown文档
如果文章对你有帮助欢迎[关注❤️❤️❤️点赞
html导入.md文件并渲染,vue 导入.md文件（markdown转HTML）
前言刚接到这个需求的时候,觉得很简单(的确很简单)但是这玩意的坑真的也让人无奈. 网上找了很多的资料,都没有写出痛点(这就很难过了).通过实践并且在我们项目中平稳运行,想分享给后面的人我的博客上也 ...
使用 Vue 和 Electron 开发一款简单的 Markdown 编辑器
2021SC@SDUSC 本文并不涉及自己设计一套 Markdown 渲染组件的部分,Markdown 渲染组件可通过 marked 和 highlight.js 自行实现.但本文重点在于如何使用 E ...
Vue项目集成Markdown标记语言编辑器（MavonEditor）
文章目录前言一.可用的Markdown集成技术二.使用步骤 1.安装mavonEditor包 2.导入并使用mavonEditor 3.官方API 总结前言 Markdown是一种标记语言,相 ...

vue使用markdown

1.使用markdown

首先下载mavon-editor

然后再main.js中引入文件

在vue的template中添加以下组件

在 data中放入以下数据，看自己需要进行打开关闭功能。

在methods中定义获取markdown内容方法

点击发送即可看到自己编辑的内容，不过内容是md格式的，我们可以把它转换为html格式。

2. md转换html

首先下载插件showdown

然后再main.js中引入

在方法里面使用

可见已经转换为html格式了

vue使用markdown相关推荐

最新文章

热门文章