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 编辑器组件的资料请关注开心学习网其它相关文章!
您可能感兴趣
- springbootvue数据交互系统(Springboot运用vue+echarts前后端交互实现动态圆环图)
- vue 路由的两种模式(Vue3使用路由VueRouter4的简单示例)
- vue全局配置文件env(vue项目多环境配置.env的实现)
- vue-router底层实现原理(vue-router history模式服务器端配置过程记录)
- vuejs filter过滤器的使用(Vue过滤器filter实现及应用场景详解)
- vue 修改后刷新(Vue使用三种方法刷新页面)
- vuephp后台开发框架(Vue+thinkphp5.1+axios实现文件上传)
- vue虚拟dom如何转换成真实dom的(vue中对虚拟dom的理解知识点总结)
- vue找不到水印设置(Vue使用自定义指令实现页面底部加水印)
- electronvue最新版本(Vue3和Electron实现桌面端应用详解)
- 使用vue独立开发组件(vue单文件组件的实现)
- vue中的ref(Vue3.0中Ref与Reactive的区别示例详析)
- vue实现pc聊天页面(vue实现web在线聊天功能)
- vue原样表格导出excel(Vue导出Excel功能的全过程记录)
- vue引用js库报错(Vue插件报错:Vue.js is detected on this page.问题解决)
- vue 动态绑定指令(vue动态绑定图标的完整步骤)
- 相声转行影帝,被何晴抛弃,甩10年女友闪婚生子,刘威不靠谱情史(相声转行影帝被何晴抛弃)
- 岳云鹏不说相声,改行演员了 网友 快回来说相声(岳云鹏不说相声)
- 乔欣首演古装大女主,颜值演技双在线(乔欣首演古装大女主)
- 于正又推女性古装大剧 杨蓉乔欣演女配,两位女主成 重头戏(于正又推女性古装大剧)
- 乔欣古装女主戏获热度 作为女主,却没吃到红利(乔欣古装女主戏获热度)
- 爱情是什么(爱情是什么最经典的话)
热门推荐
- vue表单上传图片数据(vue-cropper插件实现图片截取上传组件封装)
- php密钥怎么加密(php校验公钥是否可用的实例方法)
- vue可以使用模态框modal吗(vue基于Teleport实现Modal组件)
- pythonqt入门教程(使用python实现mqtt的发布和订阅)
- vscode开发数据库(Vscode上使用SQL的方法)
- .NET中dynamic和var的区别
- display:inline、block、inline-block 的区别
- phpstudy 目录浏览宽度(JspStudy如何设置PHP根目录可编辑)
- C#中hashtable 的使用方法
- dockerfile 添加yum文件(使用YUM 安装 docker的方法步骤)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9