vue3中使用markdown编辑器

首先安装

npm i md-editor-v3

 Setup 模板

<template><MdEditor v-model="text" />
</template><script setup>
import { ref } from 'vue';
import { MdEditor } from 'md-editor-v3';
import 'md-editor-v3/lib/style.css';const text = ref('Hello Editor!');
</script>

仅预览

<template><MdPreview :editorId="id" :modelValue="text" /><MdCatalog :editorId="id" :scrollElement="scrollElement" />
</template><script setup>
import { ref } from 'vue';
import { MdPreview, MdCatalog } from 'md-editor-v3';
// preview.css相比style.css少了编辑器那部分样式
import 'md-editor-v3/lib/preview.css';const id = 'preview-only';
const text = ref('# Hello Editor');
const scrollElement = document.documentElement;
</script>

更多详情信息,访问官方文档:https://imzbf.github.io/md-editor-v3/zh-CN/demo#%F0%9F%A4%96%20NPM%20%E5%AE%89%E8%A3%85icon-default.png?t=N7T8https://imzbf.github.io/md-editor-v3/zh-CN/demo#%F0%9F%A4%96%20NPM%20%E5%AE%89%E8%A3%85

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/646904.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

R语言-检验正态性

1.为什么要检验正态性 首先需要明确正态性与正态分布是有区别的&#xff0c;正态分布&#xff08;标准分布&#xff09;是统计数据的分布方式&#xff0c;是个钟形曲线&#xff0c;已平均值为对称轴&#xff0c;数据在对称轴两侧对称分布。正态性是检验实际数据与标准正态分布…

消息中间件之八股面试回答篇:一、问题概览+MQ的应用场景+RabbitMQ如何保证消息不丢失(生产者确认机制、持久化、消费者确认机制)+回答模板

问题概览 目前主流的消息队列技术&#xff08;MQ技术&#xff09;分为RabbitMQ和Kafka&#xff0c;其中深蓝色为只要是MQ&#xff0c;一般都会问到的问题。浅蓝色是针对RabbitMQ的特性的问题。蓝紫色为针对Kafka的特性的问题。 MQ的应用场景 MQ主要提供的功能为&#xff1a;异…

Linux shell编程学习笔记42:hdparm命令

ChatGPT 和文心一言哪个更好用&#xff1f; 从智能回复、语言准确性、知识库丰富度等方面比较&#xff0c;两大AI助手哪个更胜一筹&#xff1f;快来和我们分享一下你的看法吧~ 0 前言 获取硬盘序列号是信息资产管理和信息安全检测中经常要收集的信息&#xff0c;对于Linux来说…

Unity - 将项目转为HDRP

Camera window -> Package Manager 之后会出现HDRP向导窗口&#xff0c;均点击修复。 在Edit中&#xff0c;更改项目中的材质

景联文科技大模型数据集更新!教育题库新增高质量数学题、逻辑推理题及英文题

苏格拉底曾以“点燃火焰”的理念来诠释教育。随着大语言模型在教育中的不断应用&#xff0c;教育与AI的深度融合&#xff0c;让我们看到了“点燃火焰”的理念的更多可能性。 大语言模型可以通过与学生的互动&#xff0c;为他们提供个性化的学习体验&#xff0c;更好地满足学习需…

目标检测数据集 - MS COCO

文章目录 1. 数据集介绍2. 使用pycocotools读取数据3. 验证mAP 论文&#xff1a;Microsoft COCO: Common Objects in Context 网址&#xff1a;https://arxiv.org/abs/1405.0312 官网&#xff1a;https://cocodataset.org/ 1. 数据集介绍 MS COCO是一个非常大型&#xff0c;且…

音频特效SDK,满足内容生产的音频处理需求

美摄科技&#xff0c;作为音频处理技术的佼佼者&#xff0c;推出的音频特效SDK&#xff0c;旨在满足企业内容生产中的音频处理需求。这款SDK内置多种常见音频处理功能&#xff0c;如音频变声、均衡器、淡入淡出、音频变调等&#xff0c;帮助企业轻松应对各种音频处理挑战。 一…

网安培训第二期——sql注入+中间件+工具

文章目录 宽字节注入插入注入二次注入PDO模式(动态靶机&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;)sql注入读取文件sql注入导出文件linux命令 10.12笔记sqlmapsqlmap参数 10.13笔记sqlmap 文件读写前后缀常用tamper及适用场景 10.…

【Java】SpringMVC路径写法

1、多级路径 ✅类路径和方法路径都可以写成多级 ✅其中&#xff0c;类路径写在方法路径前面 ✅与Servlet不同&#xff0c;SpringMVC中写不写“/”都可以 RequestMapping("/hello/t1") RestController public class HelloSpring {RequestMapping( value "world…

不学前沿技术与朽木浮草何异 ?Java11新特性

不学前沿技术与朽木浮草何异 &#xff1f;Java11新特性 于 2018 年 9 月 25 日正式发布&#xff0c;这是很重要的一个版本&#xff01;Java 11 和 2017 年 9 月份发布的 Java 9 以及 2018 年 3 月份发布的 Java 10 相比&#xff0c;其最大的区别就是&#xff1a;在长期支持(Lo…

013:获取K线图,增加周期可选

改进《001:如何获取A股个股的前复权K线数据》&#xff0c;增加周期可选。 代码&#xff1a; import tkinter as tk from tkinter import messagebox from tkcalendar import Calendar import pandas as pd import requests from urllib.parse import urlencodedef gen_secid(…

Docker:6种网络配置详解浅介

在Docker中&#xff0c;网络配置是一个重要的主题&#xff0c;因为容器需要与其他容器或外部网络进行通信。Docker提供了多种网络模式和配置选项&#xff0c;以便在不同的场景下满足用户的需求。 本文介绍这些网络模式的区别以及配置&#xff0c;相信看完以后你能够掌握Docker网…

16、Kafka ------ SpringBoot 整合 Kafka (配置 Kafka 属性 及对应的 属性处理类 解析)

目录 配置 Kafka 及对应的 属性处理类配置KafkaKafka配置属性的约定代码演示生产者相关的配置消费者相关的配置 代码&#xff08;配置文件&#xff09;application.properties 配置 Kafka 及对应的 属性处理类 配置Kafka spring.kafka.* 开头的配置属性&#xff0c;这些属性将由…

写作的金字塔原则

起源 芭芭拉明托 (Barbara Minto) 是 20 世纪 70 年代麦肯锡公司培训主管&#xff0c;她创立了金字塔原则。1963 年从哈佛商学院毕业后&#xff0c;明托加入了麦肯锡公司。在前往该公司位于巴黎和杜塞尔多夫的办公室出差时&#xff0c;她遇到了与她在美国和英国见过的同样的写作…

用的到的linux-Day1

前言&#xff1a; 从入门IT开始我们知道Linux操作系统与其他操作系统不同&#xff0c;Linux因为其独特的优势&#xff0c;被广泛应用在服务器领域&#xff0c;而且是一个近乎完美的操作系统&#xff0c;运行稳定、功能强大、安全性高、开源、可定制等等。 因此我打算从24年开始…

爬虫(一)

1. HTTP协议与WEB开发 1. 什么是请求头请求体&#xff0c;响应头响应体 2. URL地址包括什么 3. get请求和post请求到底是什么 4. Content-Type是什么1.1 简介 HTTP协议是Hyper Text Transfer Protocol&#xff08;超文本传输协议&#xff09;的缩写,是用于万维网&#xff08;…

力扣面试题 16.24. 数对和(双指针)

Problem: 面试题 16.24. 数对和 文章目录 题目描述思路及解法复杂度Code 题目描述 思路及解法 若本题目直接双循环暴力求解会超时&#xff0c;可以利用排序 双指针进行优化&#xff0c;具体&#xff1a; 1.对原数组进行升序排序&#xff1b; 2.双指针指向排好序的数组的头尾(…

【方法】如何打开7Z格式压缩文件?

7Z是一种常见的压缩文件格式&#xff0c;那遇到7Z压缩文件&#xff0c;要如何打开呢&#xff1f; 想要打开7Z压缩包&#xff0c;需要用到解压缩软件&#xff0c;比如WinRAR、7-Zip等软件。安装软件后&#xff0c;只需要用鼠标双击7Z压缩包&#xff0c;就可以打开压缩包&#x…

基于SSM的蛋糕甜品店管理系统(有报告)。Javaee项目。ssm项目。

演示视频&#xff1a; 基于SSM的蛋糕甜品店管理系统&#xff08;有报告&#xff09;。Javaee项目。ssm项目。 项目介绍&#xff1a; 采用M&#xff08;model&#xff09;V&#xff08;view&#xff09;C&#xff08;controller&#xff09;三层体系结构&#xff0c;通过Spring…

支付宝推出新年“五福节”活动,新增四大AI玩法;大型语言模型综合指南

&#x1f989; AI新闻 &#x1f680; 支付宝推出新年“五福节”活动&#xff0c;新增四大AI玩法 摘要&#xff1a;支付宝宣布今年的“集五福”活动升级为“五福节”&#xff0c;新增了四大AI玩法&#xff1a;飙戏小剧场、时空照相馆、会说话红包和大家来找福。用户可以通过拼…