如何在vue3中加入markdown语法

这篇具有很好参考价值的文章主要介绍了如何在vue3中加入markdown语法。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1、首先需要安装 md-editor-v3

yarn add md-editor-v3

或者是在vue图形化界面中直接搜索 md-editor-v3 进行安装。

2、引入该编辑页

引入可以参考这个,根据自己的需求进行修改和添加。

<template>
        <md-editor v-model="text"/>
</template>
  
<script>
import { ref } from 'vue';
import { MdEditor } from 'md-editor-v3';

export default {
    components: {
        MdEditor
    },
    setup() {
        const text = ref('# Hello Editor');
        return {
            text,
        }
    }
}
</script>

<style>
@import 'md-editor-v3/lib/style.css';
</style>

3、自定义

参考md-editor-v3,文档比较详细。可以参考一下。=文章来源地址https://www.toymoban.com/news/detail-649539.html

到了这里,关于如何在vue3中加入markdown语法的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue3创建项目报错Vue.js - The Progressive JavaScript Framework TypeError: (0 , import_node_ut

    报错信息: Vue.js - The Progressive JavaScript Framework TypeError: (0 , import_node_util.parseArgs) is not a function     at init (C:UsersAdministratorAppDataLocalnpm-cache_npx2f7e7bff16d1c534node_modulescreate-vueoutfile.cjs:4481:72)     at Object.anonymous (C:UsersAdministratorAppDataLocalnpm-cache_npx2f7e7bff16d1c534node_module

    2024年04月10日
    浏览(143)
  • vue-markdown|基于marked.js的Vue Markdown插件

    vue-markdown 是一个基于 marked.js 的 Vue Markdown 插件。它是一个简单易用的 Markdown 解析器,可以方便地将 Markdown 文档解析为 HTML。它有如下特点: 功能强大:支持 Markdown 语法的全部特性,例如标题、列表、链接等。 易于使用:只需要在 Vue 组件中引入 vue-markdown 插件,并使用简单

    2024年02月14日
    浏览(41)
  • vue3中使用cherry-markDown步骤

    附cherry-markDown官网及api使用示例 官网:GitHub - Tencent/cherry-markdown: ✨ A Markdown Editor api:Cherry Markdown API 考虑到复用性,我在插件的基础上做了二次封装,步骤如下: 1.下载  npm install cherry-markdown --save 2..先在html中定义一个markDown容器,设置id及样式 3.在js中引入markDown 4.定义需

    2024年02月12日
    浏览(30)
  • 【JavaScript】JS语法入门到实战

    JavaScript (简称 JS) 是世界上最流行的编程语言之一 是一个脚本语言, 通过解释器运行 主要在客户端(浏览器)上运行, 现在也可以基于 node.js 在服务器端运行 JavaScript 最初只是为了完成简单的表单验证(验证数据合法性),结果后来不小心就火了。当前 JavaScript 已经成为了一个通用

    2024年02月09日
    浏览(55)
  • JavaScript基础——1.js基础语法

    js全称JavaScript,是一种轻量级的面向对象的 编程语言 ,既能用在浏览器中控制页面交互,也能用在服务器端作为网站后台(借助 Node.js),因此 JavaScript 是一种全栈式的编程语言。 JavaScript 与 HTML 和 CSS 共同构成了我们所看到的网页,其中: HTML 用来定义网页的内容,例如标

    2024年04月28日
    浏览(36)
  • JavaScript基础语法02——JS书写位置

    哈喽,大家好,我是雷工! 今天继续学习JavaScript基础语法,JS的书写位置,俗话说:好记性不如烂笔头,边学边记,方便回顾。 代码写在标签内部 示例: 2.1、要将JS代码直接写在HTML文件里面。 2.2、在HTML文件中添加一个script,用script标签包住,script标签中的代码就是JS代码

    2024年02月10日
    浏览(40)
  • 【JS笔记】JavaScript语法 《基础+重点》 知识内容,快速上手(四)

    BOM(Browser Object Model): 浏览器对象模型 其实就是操作浏览器的一些能力 我们可以操作哪些内容 获取一些浏览器的相关信息(窗口的大小) 操作浏览器进行页面跳转 获取当前浏览器地址栏的信息 操作浏览器的滚动条 浏览器的信息(浏览器的版本) 让浏览器出现一个弹出

    2024年01月18日
    浏览(49)
  • 【Vue3 知识第三讲】模板语法、Vue3指令

    插值表达式 {{ data }} 可以用于渲染 Vue 中提供的数据。 数字化管理平台 Vue3+Vite+VueRouter+Pinia+Axios+ElementPlus 权限系统-商城 个人博客地址 注:vue中的插值提供了真正的js环境,因此我们可以直接使用 JS 表达式 2.1 概述 指令是什么 指令就是一个自定义属性,Vue中的指令都是以 v

    2024年02月10日
    浏览(41)
  • Vue3语法大全

    Vue.js是一个渐进式JavaScript框架,旨在通过尽可能简单的 API 实现响应式的数据绑定和组合的视图组件。Vue3是Vue.js框架的下一个主要版本,在这个版本中,Vue.js团队不仅优化了性能,而且还引入了一些新的语法。本篇博客将介绍Vue3中的所有语法。 组合式API是Vue3中最重要的新特

    2024年02月10日
    浏览(42)
  • 04 - Vue3语法系统进阶 - 全面掌握Vue3特性

    Vue是基于MVVM设计模式进行实现的,视图与数据不直接进行通信,但是Vue并没有完全遵循这一原则,而是允许开发者直接进行原生DOM操作。 在Vue中可通过 ref 属性来完成这一行为,通过给标签添加 ref 属性,然后再通过 vm.$refs 来获取DOM 把 ref 属性添加给组件,可以获取到组件的

    2024年02月12日
    浏览(40)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包