vue怎么操作表格(如何在在Vue3中使用markdown 编辑器组件)
类别:编程学习 浏览量:130
时间:2022-01-23 02:05:39 vue怎么操作表格
如何在在Vue3中使用markdown 编辑器组件目录
- 安装
- 引入组件
- 基础用法
- 保存后的 markdown 或者 html 文本如何渲染在页面上?
# 使用 npm npm i @kangc/v-md-editor@next -S # 使用yarn yarn add @kangc/v-md-editor@next
import { creatApp } from 'vue'; import VMdEditor from '@kangc/v-md-editor'; import '@kangc/v-md-editor/lib/style/base-editor.css'; import githubTheme from '@kangc/v-md-editor/lib/theme/github.js'; import '@kangc/v-md-editor/lib/theme/style/github.css'; VMdEditor.use(githubTheme); const app = creatApp(/*...*/); app.use(VMdEditor);
<template> <v-md-editor v-model="text" height="400px"></v-md-editor> </template> <script> import { ref } from 'vue'; export default { setup () { const text = ref(''); return { text } } } </script>
1.渲染保存后的 markdown 文本
方式一:如果你的项目中引入了编辑器。你可以直接使用编辑器的预览模式来渲染。例如
<template> <v-md-editor :value="markdown" mode="preview"></v-md-editor> </template> <script> import { ref } from 'vue'; export default { setup () { const markdown = ref(''); return { markdown } } } </script>
方式二:如果你的项目不需要编辑功能,只需要渲染 markdown 文本你可以只引入 preview 组件来渲染。例如
// main.js import { creatApp } from 'vue'; import VMdPreview from '@kangc/v-md-editor/lib/preview'; import '@kangc/v-md-editor/lib/style/preview.css'; // 引入你所使用的主题 此处以 github 主题为例 import githubTheme from '@kangc/v-md-editor/lib/theme/github'; import '@kangc/v-md-editor/lib/theme/style/github.css'; VMdPreview.use(githubTheme); const app = creatApp(/*...*/); app.use(VMdPreview);
<template> <v-md-preview :text="markdown"></v-md-preview> </template> <script> import { ref } from 'vue'; export default { setup () { const markdown = ref(''); return { markdown } } } </script>
2.渲染保存后的 html 文本
如果你的项目不需要编辑功能,只需要渲染 html 你可以只引入 preview-html 组件来渲染。例如:
// main.js import { creatApp } from 'vue'; import VMdPreviewHtml from '@kangc/v-md-editor/lib/preview-html'; import '@kangc/v-md-editor/lib/style/preview-html.css'; // 引入使用主题的样式 import '@kangc/v-md-editor/lib/theme/style/vuepress'; const app = creatApp(/*...*/); app.use(VMdPreviewHtml);
<template> <!-- preview-class 为主题的样式类名,例如vuepress就是vuepress-markdown-body --> <v-md-preview-html :html="html" preview-class="vuepress-markdown-body"></v-md-preview-html> </template> <script> import { ref } from 'vue'; export default { setup () { const html = ref('<li data-v-md-line="1"><h1 align="center">Markdown Editor built on Vue</h1>'); return { html } }, }; </script>
更多高级用法参考官方文档:v-md-editor
以上就是如何在在Vue3中使用markdown 编辑器组件的详细内容,更多关于Vue3中使用markdown 编辑器组件的资料请关注开心学习网其它相关文章!
您可能感兴趣
- vue自定义组件定义事件(基于Vue实现自定义组件的方式引入图标)
- mongovue的使用
- google 调试vue(Vue实现Google第三方登录的示例代码)
- vue点击事件动态禁用(vue开发移动端使用better-scroll时click事件失效的解决方案)
- vue获取图片并展示(vue卡片式点击切换图片组件使用详解)
- vue全局配置文件env(vue项目多环境配置.env的实现)
- vue各组件如何引用(Vue局部组件数据共享Vue.observable的使用)
- 详解从vue的组件传值着手观察者模式(详解从vue的组件传值着手观察者模式)
- vue-router起步教程交流(vue3使用vue-router的完整步骤记录)
- vue如何在tab标签页循环加定时器(vue实现tab标签标签超出自动滚动)
- spring boot docker部署(docker部署springboot和vue项目的实现步骤)
- vue实现聊天(Vue+ssh框架实现在线聊天)
- vue前台解析pdf文件流(Vue实现在线预览pdf文件功能利用pdf.js/iframe/embed)
- vue多个对象实现双向数据绑定(利用js实现Vue2.0中数据的双向绑定功能)
- vue3.0零基础入门(快速掌握Vue3.0中如何上手Vuex状态管理)
- vue elementui 按钮样式修改(vue+elementui 实现新增和修改共用一个弹框的完整代码)
- 给孩子选购保温杯,注意这4个步骤,比颜值更重要(给孩子选购保温杯)
- 保温好 容量大 颜值高 保温杯你给娃娃买对了吗(保温好容量大颜值高)
- 《道德经》 人生避开骄狂,才能免去祸患(道德经人生避开骄狂)
- 郭麒麟(郭麒麟)
- 古人十句 戒骄 名言,醍醐灌顶,受益匪浅(古人十句戒骄名言)
- 《道德经》:功成不局,泰而不骄(道德经:功成不局)
热门推荐
- vmware虚拟机搭建服务器(VMware虚拟机建立HTTP服务步骤解析)
- redis的scan命令的使用(scrapy-redis源码分析之发送POST请求详解)
- css样式词大全(超全面CSS样式整理)
- 执行mysqldump命令后数据库无反应(关于xampp启动不了mysql数据库的解决方法)
- vue浏览pdf文件(如何在vue中使用pdfjs预览pdf文件)
- mysql8.0查询操作(MySQL 8.0 redo log的深入解析)
- python中如何清空列表数据(Python批量删除只保留最近几天table的代码实例)
- docker-compose命令(docker-compose教程之安装使用和快速入门)
- svg怎么在html中显示(html svg生成环形进度条的实现方法)
- iis默认文档位置(在IIS6中新增可下载文件类型的方法)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9