Vue 中引入markdown富文本编辑器并根据md格式渲染

Vue 中引入markdown富文本编辑器

在vue组件中，比较好用的是mavon-editor，github文档地址 https://github.com/hinesboy/mavonEditor

安装

npm install mavon-editor --save

在 main.js 中注册该组件

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

在组件中使用

<!-- 表单的内容使用markdown富文本编辑器 -->
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px"><el-form-item label="标题" prop="title"><el-input v-model="ruleForm.title"></el-input></el-form-item><el-form-item label="摘要" prop="description"><el-input type="textarea" v-model="ruleForm.description"></el-input></el-form-item><el-form-item label="内容" prop="content"><mavon-editor class="mk-editor" v-model="ruleForm.content"></mavon-editor></el-form-item><el-form-item><el-button type="primary" @click="submitForm('ruleForm')">立即发布</el-button><el-button @click="resetForm('ruleForm')">重置</el-button></el-form-item>
</el-form>

后端传过来的内容如果是 markdown 格式的内容，需要进行渲染然后显示出来，这里我们可以使用一个插件 markdown-it，用于解析 md 文档，然后导入 github-markdown-c，所谓 md 的样式。
安装命令

# 用于解析 markdown 格式的文档：
npm install markdown-it --save
# markdown 样式
npm install github-markdown-css

接下来就可以在需要渲染的地方使用

<template><div class="markdown-body" v-html="xxx.content"></div>
</template><script>
import 'github-markdown-css'export default {name: "xx",components: {Header},data() {return {xxx: {id: "",title: "",content: ""}}},created() {var MardownIt = require("markdown-it")var md = new MardownIt()var result = md.render(xxx.content)}
</script>

Vue 中引入markdown富文本编辑器并根据md格式渲染相关推荐

Vue中使用vue-quil-editor富文本编辑器+el-upload实现带图片上传到SpringBoot后台接口
场景系统中经常会用到富文本编辑器,比如新增通知和公告功能,并且需要添加上传图片. vue-quill-editor官网: https://www.npmjs.com/package/vue-quil ...
vue中使用wangeditor富文本编辑器（含图片上传和回显）
最近在写vue的项目中,遇到一个需求,点击编辑,显示弹框,在弹框中的富文本编辑器中编辑自定义文本样式,可以上传图片并回显.编辑完成确定后显示在页面上. 首先先写一个editor.vue的页面.(建议单 ...
vue中使用element-tiptap富文本编辑器
element-tiptap富文本编辑器 npm安装 npm install element-tiptap --save yarn安装 yarn add element-tiptap 全局引入 imp ...
在Vue中使用CKEditor5富文本编辑器
在项目中遇到富文本编辑器需要实现粘贴图片的功能,使用场景:如用户在其他地方截图可以直接在富文本编辑器内粘贴. 找了一圈市面上开源免费的富文本编辑器,最后选中CKEditor.ckeditor doc ...
在Vue中使用Tinymce富文本编辑器+上传图片到七牛
公司官网后台需要做一个上传新闻.公告的功能,自然而然就需要用到了富文本编辑器. UEditor.Simditor.wangEditor.CKEditor.TinyMCE.Quill,这是当前比较热门的 ...
vue中使用quill富文本编辑器
因为公司的需求,对比了线在很火的几款富文本编辑器,最终选定了quill,他够轻量,拓展性也比较高,除了文档是英文的阅读不方便之外,都很适合公司项目.故整理出来,也方便以后使用. 在网上找了一个中文文档 ...
Vue 中使用 Tinymce 富文本编辑器
参考链接:https://www.cnblogs.com/wisewrong/p/8985471.html Tinymce : 从 word 粘贴过来还能保持绝大部分格式的编辑器一. 下载 npm ...
vue中使用markdown富文本，并在html页面中展示
想给自己的后台增加一个markdown编辑器,下面记录下引用的步骤引入组件mavon-editor 官网地址:https://github.com/hinesboy/mavonEditor // 插 ...
在vue3.0项目中使用tinymce富文本编辑器
目录一.安装二.完整代码三.事项说明四.参考文档之前看了好几篇关于 vue项目中使用 tinymce的文章, import引入大量 tinymce插件, /node_modules/ti ...

Vue 中引入markdown富文本编辑器并根据md格式渲染

Vue 中引入markdown富文本编辑器并根据md格式渲染相关推荐

最新文章

热门文章