当前位置：首页 > news >正文

前端Vue2项目使用md编辑器

news 来源：原创 2025/6/8 7:38:43

项目中有一个需求，要在前端给用户展示内容，内容有 AI 生成的，返回来的是 md 格式，所以需要给用户展示 md 格式，并且管理端也可以编辑这个 md 格式的文档。

使用组件库 v-md-editor。

https://code-farmer-i.github.io/vue-markdown-editor/zh/examples/base-editor.html#%E5%BC%95%E5%85%A5

使用npm 命令进行安装 
# 使用 npm  npm i @kangc/v-md-editor -S

对于用户端需要展示出来，管理端需要编辑，官方给的全局组件是用来编辑的。我使用局部注册的来管理。

在 main.js 中导入编辑和预览组件，使用 Vue.use（）进行全局的注册。

import Vue from 'vue'
import App from './App.vue'Vue.config.productionTip = falseimport 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';import VMdPreview from '@kangc/v-md-editor/lib/preview';
import '@kangc/v-md-editor/lib/style/preview.css';import '@kangc/v-md-editor/lib/theme/style/github.css';
import hljs from 'highlight.js';// highlightjsVMdEditor.use(githubTheme, {Hljs: hljs,
});
VMdPreview.use(githubTheme, {Hljs: hljs,
});
Vue.use(VMdEditor);
Vue.use(VMdPreview);import router from './router'; // 导入路由配置
new Vue({router,render: h => h(App),
}).$mount('#app')

editView

<script>export default {data() {return {markdown: ``,};}
};
</script><template><div><v-md-editor v-model="markdown" height="400px" width="400px"></v-md-editor></div>
</template><style scoped>
/* 组件样式 */
</style>
//通过 v-model 进行双向的绑定

注意注册的组件时机选择应该是 created()，不太清楚为什么。官方也没有给说明文档。

showView

<template><div><v-md-preview :text="markdown"></v-md-preview></div>
</template><script>
// 只在本组件内引入需要的模块
export default {data() {return {markdown: `# 我的 Markdown 示例## 介绍Markdown 是一种轻量级标记语言，常用于编写格式化文本，常见应用包括文档编写、博客、GitHub 上的 README 文件等。## 示例代码\`\`\`python
def add(a, b):return a + bresult = add(3, 5)
print("结果是:", result)
\`\`\``};}
};
</script><style scoped>
/* 组件样式 */
</style>实际的markdown 可以由后端的接口进行返回

编辑界面

编写使用 markdown 语法，右边显示初对应的内容。

展示界面

这个是一个简单的版本，后面对于内容要保存到数据库中，要看官方文档，还有图片等上传。

前端Vue2项目使用md编辑器

项目中有一个需求，要在前端给用户展示内容，内容有 AI 生成的，返回来的是 md 格式，所以需要给用户展示 md 格式，并且管理端也可以编辑这个 md 格式的文档。使用组件库 v-md-editor。 https://code-farmer-i.github.i…...

编程日记 2025/6/1 8:29:26

Docker核心命令与Yocto项目的高效应用

随着软件开发逐渐向分布式和容器化方向演进，Docker 已成为主流的容器化技术之一。它通过标准化的环境配置、资源隔离和高效的部署流程，大幅提高了开发和构建效率。Yocto 项目作为嵌入式 Linux 系统构建工具，与 Docker 的结合进一步增强了开发…...

编程日记 2025/5/30 6:49:04

kong 网关和spring cloud gateway网关性能测试对比

该测试只是简单在同一台机器设备对spring cloud gateway网关和kong网关进行对比，受限于笔者所拥有的资源，此处仅做简单评测。一、使用spring boot 的auth-service作为服务提供者该服务提供了一个/health接口，接口返回"OK"&…...

编程日记 2025/6/1 16:29:05

DDoS攻击防护能力测试：Python版脚本

引言在互联网服务日益复杂和流量持续增长的今天，确保服务器能够应对高并发请求并具备良好的抗DDoS攻击的能力至关重要。声明以下代码仅在合法的前提下使用。工具设计原理脚本的核心在于它能够创建多个线程来并发执行不同的攻击方法，从而实现对目标…...

编程日记 2025/5/30 16:09:41

白玉微瑕：闲谈 SwiftUI 过渡（Transition）动画的“口是心非”（下）

概述秃头小码农们都知道，SwiftUI 不仅仅是一个静态 UI 构建框架那么简单，辅以海量默认或自定义的动画和过渡（Transition）特效，我们可以将 App 界面的绚丽升华到极致。不过，目前 SwiftUI 中的过渡&#x…...

编程日记 2025/5/30 5:04:38

5.4 解锁 OpenAI - Translator：模块设计，构建翻译系统的 “基石”

OpenAI-Translator 模块设计 OpenAI-Translator 作为一款基于 OpenAI GPT 模型的智能翻译助手，其模块设计至关重要。为了保证翻译的高效性、准确性与可扩展性，系统需要一个结构清晰、功能强大的模块化设计。本文将对 OpenAI-Translator 的各个模块进行详细解析，涵盖其核心功…...

编程日记 2025/6/2 17:17:44

数据分析变异系数

目录变异系数的应用场景包括： 特点： 注意事项： np.nanvar——方差，np.sanstd标准差简单来讲就是平均值/标准差变异系数（Coefficient of Variation, CV）是一种相对量的变异指标，常用于衡…...

编程日记 2025/6/3 13:57:55

C语言——编译与链接

目录前言一程序的两种环境 1翻译环境 2执行环境二预处理 1预处理符号 2#define 2.1#define 定义标识符 2.2#define 定义宏 2.2.1#和## 2.3带副作用的宏参数 2.4宏和函数的比较 2.5命名约定 3#undef 4命令行定义 5条件编译 5.1单分支 5.2多分支 5.3判断是…...

编程日记 2025/6/4 12:21:01

NewStar CTF week1 web wp

谢谢皮蛋做这题之前需要先去学习一些数据库的知识 1 order by 2 1可以理解为输入的id，是一个占位符，按第二列排序用来测试列数，如果没有两列则会报错-1 union select 1,2 -1同样是占位符，union的作用是将注入语句合并到原始语句…...

编程日记 2025/6/2 17:00:27

Android BitmapShader简洁实现马赛克，Kotlin（一）

Android BitmapShader简洁实现马赛克，Kotlin（一） 这一篇， Android使用PorterDuffXfermode模式PorterDuff.Mode.SRC_OUT橡皮擦实现马赛克效果，Kotlin（3）-CSDN博客基于PorterDuffXfermode实现马…...

编程日记 2025/6/3 16:52:10

NavVis手持激光扫描帮助舍弗勒快速打造“数字孪生”工厂-沪敖3D

在全球拥有近100家工厂的舍弗勒，从2016年开启数字化运营进程，而当前制造、库存、劳动力和物流的数字化，已无法支持其进一步简化工作流程，亟需数字化物理制造环境，打造“数字孪生”工厂。 NavVis为其提供NavVis VLX 3…...

编程日记 2025/6/3 8:04:53

web服务器网站部署的架构

WEB服务器工作原理 Web web是WWW(World Wide Web)的简称，基本原理是：请求(客户端)与响应(服务器端)原理，由遍布在互联网中的Web服务器和安装了Web浏览器的计算机组成客户端发出请求的方式：地址栏请求、超链接请求、表单请求 …...

编程日记 2025/6/4 15:35:35

ecovadis验厂相关要求

EcoVadis验厂的相关要求主要包括以下几个方面： 一、企业基本资质要求合法注册与运营：企业必须是合法注册并运营的法人实体，具备合法的经营资质，如营业执照、税务登记证等。无严重违法记录：在过去三年内，…...

编程日记 2025/6/4 16:18:25

SSM开发(一)JAVA,javaEE,spring,springmvc,springboot,SSM,SSH等几个概念区别

目录 JAVA 框架 javaEE spring springmvc springboot SSM SSH maven JAVA 一种面向对象、高级编程语言，Python也是高级编程语言；不是框架(框架：一般用于大型复杂需求项目，用于快速开发)具有三大特性，所谓Jav…...

编程日记 2025/5/30 20:28:36

Spring Boot中选择性加载Bean的几种方式

说明：用过Spring框架的都知道其自动装配的特性，本文介绍几种选择性加载Bean的方式。Spring自动装配参考以下两篇文章： 基于SpringBoot的三层架构开发&统一响应结果 SpringBoot自动装配原理简单分析 ConditionalOnProperty Conditiona…...

编程日记 2025/6/4 11:02:25

【JVM】垃圾收集器详解

你将学到 1. Serial 收集器 2. ParNew 收集器 3. Parallel Scavenge 收集器 4. Serial Old 收集器 5. Parallel Old 收集器 6. CMS 收集器 7. G1 收集器在 Java 中，垃圾回收（GC）是自动管理内存的一个重要机制。HotSpot JVM 提供了多种…...

编程日记 2025/5/31 3:41:46

【实用技能】如何在Stimulsoft产品中使用用户函数，快速创建报表及仪表盘

Stimulsoft Ultimate （原Stimulsoft Reports.Ultimate）是用于创建报表和仪表板的通用工具集。该产品包括用于WinForms、ASP.NET、.NET Core、JavaScript、WPF、PHP、Java和其他环境的完整工具集。无需比较产品功能，Stimulsoft Ultimate包含了…...

编程日记 2025/5/28 22:44:54

MySQL四种隔离级别

MySQL的隔离级别是在事务这个大主题下面产生的说法。那么什么是事务，事务就是一组sql语句，要么全部执行成功，要么都不执行，不能只执行成功其中的部分sql。事务的最终目的是为了保证数据库数据的完整性、一致性和可用性。要保…...

编程日记 2025/6/2 18:36:41

Unity入门1

安装之后无法获得许可证，可以考虑重装新建项目单击空白处生成脚本双击c#文件会自动打开vstudio 检查引用如果没有引用，重开vstu，或者重新加载项目 hierarchy层级 scenes场景 assets资产 inspector督察 icon图标资源链接&…...

编程日记 2025/6/4 12:19:25

qml Loader详解

1、概述 QML Loader是Qt Quick框架中的一个关键元素，它允许开发者动态地加载和卸载QML组件。这种动态加载机制对于提升应用程序的性能、响应速度和用户体验至关重要。通过Loader，应用程序可以在需要时才加载特定的组件，而不是在启动时一次性…...

编程日记 2025/6/3 20:23:28

《安富莱嵌入式周报》第349期：VSCode正式支持Matlab调试，DIY录音室级麦克风，开源流体吊坠，物联网在军工领域的应用，Unicode字符压缩解压

周报汇总地址：嵌入式周报 - uCOS & uCGUI & emWin & embOS & TouchGFX & ThreadX - 硬汉嵌入式论坛 - Powered by Discuz! 视频版： 《安富莱嵌入式周报》第349期：VSCode正式支持Matlab调试，DIY录音室级麦克风…...

编程日记 2025/6/2 5:59:51

web端ActiveMq测试工具

如何用vue3创建简单的web端ActiveMq测试工具？ 1、复用vue3模板框架创建main.js,引入APP文件，createApp创建文件，并加载element插件，然后挂载dom节点 2、配置vue.config.js脚本配置 mport { defineConfig } from "vite&qu…...

编程日记 2025/6/4 9:48:10

1561. 你可以获得的最大硬币数目

class Solution:def maxCoins(self, piles: List[int]) -> int:piles.sort()res,n0,len(piles)for i in range(n//3):respiles[n-2-2*i]return res这里如果"你"想要获取最大，那么从最大的开始找每隔俩算一个最大累计，Bob默认自己从最小那找…...

编程日记 2025/6/2 6:10:06

NIO | 什么是Java中的NIO —— 结合业务场景理解 NIO （二）

实时通信应用的主流技术并非NIO ， 整理本文的目的是更好的理解 NIO 。在现代的即时聊天应用中，使用 WebSocket、MQTT 或 SignalR 等协议更为普遍。若您想了解当前主流的有关实时通信应用的技术 ， 请移步他文。 (一) 业务场景实…...

编程日记 2025/6/3 19:59:32

GD32L233RB 驱动数码管

1.数码管有8段A、B、C、D、E、F、G 和 H小数点以及片选信号（DIG） DIG用来选择那一位，A-G 用来显示段静态显示每次只能一次显示单个位动态显示（动态扫描）所有的位显示结束要在10ms左右显示2ms 消光1ms 实…...

编程日记 2025/5/24 16:12:48

AIGC视频生成模型：Stability AI的SVD(Stable Video Diffusion)模型

大家好，这里是好评笔记，公主号：Goodnote，专栏文章私信限时Free。本文详细介绍Stability AI的视频生成模型SVD(Stable Video Diffusion)模型，这家公司在图像生成领域富有盛名，开发并维护了知名开源项目SD系列…...

编程日记 2025/6/2 6:01:30

Linux 系统错误处理简介

Linux 系统错误处理简介 1. errno：错误代码的载体2. strerror()：错误信息的翻译官3. perror()：便捷的错误信息输出4. 系统调用与库函数的区别5. 错误处理的最佳实践在 C/C 程序开发中，我们经常需要处理各种错误情况 Linux 系统提…...

编程日记 2025/6/3 16:42:28

main.cpp #include <memory> using namespace std; #include "top.h" int sc_main(int i, char *av[]) { // 关闭关于 IEEE 1666 标准中过时特性的警告 sc_report_handler::set_actions("/IEEE_Std_1666/deprecated", SC_DO_NOTHING); cout <…...

编程日记 2025/6/3 5:05:50

C++打字模拟

改进于文宇炽筱_潜水 c版的打字效果_c自动打字-CSDN博客https://blog.csdn.net/2401_84159494/article/details/141023898?ops_request_misc%257B%2522request%255Fid%2522%253A%25227f97863ddc9d1b2ae9526f45765b1744%2522%252C%2522scm%2522%253A%252220140713.1301023…...

编程日记 2025/6/4 17:17:10

国产低功耗带LCD驱动和触摸按键功能的MCU

以下是国产低功耗、集成LCD驱动和触摸按键功能的MCU精选型号及其核心特性，结合性能、功耗和适用场景进行综合推荐： 1.灵动微MM32L0130系列 257 核心特性：低功耗：待机模式功耗低至100nA，支持多种低功耗模式。 LCD驱动&a…...

编程日记 2025/6/3 10:36:13

在 imx93 平台调试 nau88c10 声卡

一、环境介绍 linux 版本：6.6.52 soc：imx9331 codec：nau88c10 使用的内核文件为 Image，dtb 文件为：imx93-11x11-evk.dtb 二、硬件检查 i2s 信号线要接对 i2c 控制信号建议为 4.7k 上拉 codec 供电可以按参考设计…...

编程日记 2025/5/31 0:37:33

机器学习-分类算法评估标准

一. 准确率 accuracy 将预测结果和测试集的目标值比较，计算预测正确的百分比准确率越高说明模型效果越好 from sklearn import datasets from sklearn.model_selection import train_test_split from sklearn.neighbors import KNeighborsClassifier #加载鸢尾花…...

编程日记 2025/6/3 16:17:50

美区TikTok解封后如何回归使用？

随着2025年初美区TikTok解封的消息引起了广泛关注，许多用户纷纷开始重新关注这一全球最受欢迎的短视频平台。在经历了数月的禁用期后，TikTok在美国市场的回归，代表了这一平台的巨大潜力和挑战。从用户的使用习惯，到平台的内容策略…...

编程日记 2025/6/4 15:47:54

行人识别检测数据集，yolo格式，PASICAL VOC XML，COCO JSON,darknet等格式的标注都支持，准确识别率可达99.5%

作者简介： 高科，先后在 IBM PlatformComputing从事网格计算，淘米网，网易从事游戏服务器开发，拥有丰富的C，go等语言开发经验，mysql，mongo，redis等数据库，设计模…...

编程日记 2025/6/3 19:14:18

grafana + Prometheus + node_exporter搭建监控大屏

本文介绍生产系统监控大屏的搭建，比较实用也是实际应用比较多的方式，希望能够帮助大家对监控系统有一定的认识。 0、规划 grafana主要是展示和报警，Prometheus用于保存监控数据，node_exporter用于实时采集各个应用服务器的事实状…...

编程日记 2025/6/3 22:10:22

【腾讯云】docker创建网络遇到Unable to enable SKIP DNAT rule

docker创建网络遇到Unable to enable SKIP DNAT rule 背景今天打算在服务器上安装es,但是在创建网络时，提示 Error response from daemon: Failed to Setup IP tables: Unable to enable SKIP DNAT rule: (iptables failed: iptables --wait -t nat -I DOCKER…...

编程日记 2025/6/2 6:50:15

DeepSeek R1模型解读与使用

DeepSeek在推出R1预览版两个月后，发布了R1的正式版本，并且开源了模型，开放了API调用。我们直接来解读一下这款模型。这是官方的性能评测图。从左到右分别是DeepSeek-R1，o1正式版，32B蒸馏版R1，o1-mini&…...

编程日记 2025/6/3 5:31:35

AI新玩法：Flux.1图像生成结合内网穿透远程生图的解决方案

文章目录前言1. 本地部署ComfyUI2. 下载 Flux.1 模型3. 下载CLIP模型4. 下载 VAE 模型5. 演示文生图6. 公网使用 Flux.1 大模型6.1 创建远程连接公网地址 7. 固定远程访问公网地址前言在这个AI技术日新月异的时代，图像生成模型已经成为了创意工作者和开发者手中…...

编程日记 2025/6/3 21:52:10

api开发如何确保通过非官方库解析口令的合法性？

通过非官方库解析淘宝口令可能存在违反淘宝平台规则以及法律法规的风险，很难完全确保其合法性。如果确实有需求，可从以下几个方面尽量降低风险，提高合法性： 了解法律法规《中华人民共和国网络安全法》：需确保解析行为…...

编程日记 2025/6/4 1:35:41

第6章 ThreadGroup详细讲解(Java高并发编程详解：多线程与系统设计)

1.ThreadGroup 与 Thread 在Java程序中， 默认情况下， 新的线程都会被加入到main线程所在的group中， main线程的group名字同线程名。如同线程存在父子关系一样， Thread Group同样也存在父子关系。图6-1就很好地说明了父子thread、父…...

编程日记 2025/6/3 16:06:11

如何使用Python脚本将本地项目上传到 GitHub

前言这里我们通过创建一个新的github仓库，来测试我们的脚本能否上传我们本地的项目，并且进行更新。首先你需要先安装 Git，关于这部分我好像没有记录过，这里我搜索看了一下，这篇博客写的Git安装详解应该是比较齐全的&…...

编程日记 2025/6/1 10:53:40

css动画水球图

由于echarts水球图动画会导致ios卡顿，所以纯css模拟展示效果组件 <template><div class"water-box"><div class"water"><div class"progress" :style"{ --newProgress: newProgress % }"><…...

编程日记 2025/6/2 6:44:13

Shellcode

什么是shellcode shellcode通常是软件漏洞利用过程中使用一小段机器代码作用 1.启动shell，进行交互 2.打开服务器端口等待连接 3.反向连接端口 4.。。。如何编写shellcode 1.设置rdi指向/bin/sh 2.rsi0,rdx0 3.rax0x3b 4.syscall进行系统调用 64位系统…...

编程日记 2025/6/3 16:07:51

Element使用表单重置如果不使用prop，重置无法生效

文章目录为什么需要 prop？示例：使用 prop 的正确方式关键点总结在 element-ui 的 el-form 组件中， prop 属性是与表单验证和表单字段绑定密切相关的，尤其在使用 resetFields() 重置表单数据时。如果不使用 prop&#xff0…...

编程日记 2025/5/30 6:45:59

[Qt]系统相关-网络编程-TCP、UDP、HTTP协议

目录前言一、UDP网络编程 1.Qt项目文件 2.UDP类 QUdpSocket QNetworkDatagram 3.UDP回显服务器案例细节服务器设计客户端设计二、TCP网络编程 1.TCP类 QTcpServer QTcpSocket 2.TCP回显服务器案例细节服务器设计客户端设计三、HTTP客户端 1.HTTP…...

编程日记 2025/6/4 11:20:30

两台局域网电脑通过飞秋传输大文件失败的解决方案

问题描述： 局域网两台电脑之间传输大文件（超过20G），不想太复杂，就各装个飞秋。但是通过直接发送文件发现总是失败，一会就中断了。解决方法： 主界面上有一个文件共享的按钮，通过文…...

编程日记 2025/6/1 19:33:51

安卓程序作为web服务端的技术实现（二）：Room 实现数据存储

已经实现web服务器安卓程序作为web服务端的技术实现：AndServer 实现登录权限拦截-CSDN博客现在需要和正常web项目类似，那么就需要操作数据库一般web项目都是选择较为重型的数据库如MySQL，SQL server等这里是安卓项目，我目前…...

编程日记 2025/5/31 9:08:23

代码工艺：实践 Spring Boot TDD 测试驱动开发

TDD 的核心理念是 “先写测试，再写功能”，其过程遵循一个严格的循环，即 Red-Green-Refactor： TDD 的流程 1. Red（编写失败的测试） 根据需求，先编写一个测试用例，描述期望的行为。…...

编程日记 2025/6/4 16:54:02

MySQL命令及用法（精华版）

目录 DDL（数据定义语言） 数据库操作表操作 DML（数据操作语言） DQL（数据查询语言） 基本查询条件查询聚合函数分组查询排序查询分页查询 DCL（数据控制语言） 用户…...

编程日记 2025/6/2 6:00:01

73,【5】BUUCTF WEB [网鼎杯 2020 玄武组]SSRFMe（未解出）

进入靶场又是代码又是代码又是代码又是代码又是代码又是代码又是代码又是代码又是代码又是代码又是代码又是代码又是代码又是代码 <?php // 检查 URL 是否为内部 IP 地址 function check_inner_ip($url) {// 使用正则表达式检查 URL 格式是否以 http、https、gopher 或 d…...

编程日记 2025/5/30 18:09:47

相关文章：