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;更好地满足学习需…

本地仓库如何与远程仓库进行关联

目录 设置Git 全局设置: 创建一个远程仓库 创建本地仓库 连接远程仓库 查看远程仓库origin的关联信息 查看所有远程仓库 切换远程仓库 设置Git 全局设置: git config --global user.name "your name" git config --global user.email "your email163.co…

目标检测数据集 - 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;帮助企业轻松应对各种音频处理挑战。 一…

【服务器】服务器四个网口有几块网卡?

具有四个网口的服务器的网卡数量可能有点混乱。乍一看&#xff0c;您可能会假设服务器有四块网卡&#xff0c;每个端口一块。然而&#xff0c;这并非总是如此。在本文中&#xff0c;我们将分析具有四个网络端口的服务器的不同配置以及它可能有多少个网卡。 一个网卡&#xff0…

2024/1/24 图的基本应用

目录 查找文献 图的遍历 查找文献 P5318 【深基18.例3】查找文献 - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) 思路&#xff1a;这道题就是先建图&#xff0c;然后dfs深搜输出&#xff0c;bfs宽搜输出就行了 完整代码&#xff1a; #include <bits/stdc.h> #defi…

网安培训第二期——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网…

100 道 Linux 面试题 附答案(二)

五、编程题 判断一文件是不是字符设备文件&#xff0c;如果是将其拷贝到 /dev 目录下&#xff1f; #!/bin/bash read -p "Input file name: " FILENAME if [ -c "$FILENAME" ];thencp $FILENAME /dev fi添加一个新组为 class1 &#xff0c;然后添加属于这…

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

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

Python如何按指定列的空值删除行?

目录 1、按指定列的空值删除行2、滑动窗口按指定列的值填充最前面的缺失值 1、按指定列的空值删除行 数据准备&#xff1a; df pd.DataFrame({C1: [1, 2, 3, 4], C2: [A, np.NaN, C, D], C3: [V1, V2, V3, np.NaN]}) print(df.to_string()) C1 C2 C3 0 1 A V1 1 …

写作的金字塔原则

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

用的到的linux-Day1

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