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

前端Vue2项目使用md编辑器

项目中有一个需求,要在前端给用户展示内容,内容有 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编辑器

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

OpenVela 架构剖析:从内核到应用

目录 一、总体架构概述 二、 内核层 2.1. OpenVela架构的内核基础 2.2. 内核层的主要职责 2.3. OpenVela对NuttX的扩展与优化 三、系统服务层 2.1. 进程管理 2.2. 内存管理 2.3. 文件系统 2.4. 网络通信 四、框架层 4.1. 模块化设计 4.2. API接口 4.3. 组件和服务…...

vue视频流播放,支持多种视频格式,如rmvb、mkv

先将视频转码为ts ffmpeg -i C:\test\3.rmvb -codec: copy -start_number 0 -hls_time 10 -hls_list_size 0 -f hls C:\test\a\output.m3u8 后端配置接口 import org.springframework.core.io.Resource; import org.springframework.core.io.UrlResource; import org.spring…...

记一个Timestamp时区问题的坑

resultSet.getTimestamp(“kpi_collect_time”)查出来的Timestamp居然是带时区的&#xff0c; 如果该Timestamp不是UTC时区的&#xff0c;Timestamp.toInstant().atZone(ZoneId.of(“UTC”))会把Timestamp转成UTC时区 使用Timestamp.toLocalDateTime()可以直接把时区信息抹除 …...

新年好(Dijkstra+dfs/全排列)

1135. 新年好 - AcWing题库 思路&#xff1a; 1.先预处理出1,a,b,c,d,e到其他点的单源最短路&#xff0c;也就是进行6次Dijkstra 2.计算以1为起点的这6个数的全排列&#xff0c;哪种排列方式所得距离最小&#xff0c;也可以使用dfs 1.Dijkstradfs #define int long longusing …...

如何“看到” Spring 容器?

Spring 容器是一个运行时的抽象工具&#xff0c;用来管理 Bean 的生命周期和依赖。虽然它本身不可直接观察&#xff0c;但可以通过以下方式间接“看到”容器的内容或行为。 2.1 容器是如何实例化的&#xff1f; Spring 容器的实例化是通过 ApplicationContext 或 BeanFactory …...

怎么使用CRM软件?操作方法和技巧有哪些?

什么是CRM&#xff1f; 嘿&#xff0c;大家好&#xff01;你知道吗&#xff0c;在当今这个数字化时代里&#xff0c;我们每天都在与各种各样的客户打交道。无论是大公司还是小型企业&#xff0c;都希望能够更好地管理这些关系并提高业务效率。这时候就轮到我们的“老朋友”——…...

Spingboot整合Netty,简单示例

Netty介绍在文章末尾 Netty介绍 项目背景 传统socket通信&#xff0c;有需要自身管理整个状态&#xff0c;业务繁杂等问题。 pom.xml <dependency><groupId>io.netty</groupId><artifactId>netty-all</artifactId><version>4.1.117.F…...

grafana新增email告警

选择一个面板 比如cpu 新增一个临界点表达式 input选A 就是A的值达到某个临界点 触发告警 我这边IS ABOVE0.15就是cpu大于0.15%就触发报警&#xff0c;这个值怎么填看指标的值显示 这里要设置一下报警条件 这边随便配置下 配置标签和通知&#xff0c;选择你的邮件 看下告警…...

Github 2025-01-20 开源项目周报 Top15

根据Github Trendings的统计,本周(2025-01-20统计)共有15个项目上榜。根据开发语言中项目的数量,汇总情况如下: 开发语言项目数量Python项目10Rust项目2TypeScript项目1C++项目1Jupyter Notebook项目1Go项目1Tabby: 自托管的AI编码助手 创建周期:310 天开发语言:Rust协议类…...

【Rabbitmq】Rabbitmq高级特性-发送者可靠性

Rabbitmq发送者可靠性 发送者重连发送者确认1.开启确认机制2.ReturnCallback3.ConfirmCallback MQ的可靠性数据持久化交换机持久化队列持久化消息持久化 Lazy Queue 总结其他文章 Rabbitmq提供了两种发送来保证发送者的可靠性&#xff0c;第一种叫发送者重连&#xff0c;第二种…...

K8S中Service详解(一)

Service介绍 在Kubernetes中&#xff0c;Service资源解决了Pod IP地址不固定的问题&#xff0c;提供了一种更稳定和可靠的服务访问方式。以下是Service的一些关键特性和工作原理&#xff1a; Service的稳定性&#xff1a;由于Pod可能会因为故障、重启或扩容而获得新的IP地址&a…...

Effective C++读书笔记——item23(用非成员,非友元函数取代成员函数)

一、主要观点&#xff1a; 在某些情况下&#xff0c;使用 non-member、non-friend 函数来替换 member 函数可以增强封装性和可扩展性&#xff0c;提供更好的软件设计。 二、详细解释&#xff1a; 封装性&#xff1a; 类成员函数的封装性考量&#xff1a;成员函数可以访问类的…...

云原生前端开发:打造现代化高性能的用户体验

引言&#xff1a;前端开发的新风向 在过去的几年中&#xff0c;前端开发领域经历了快速的演变&#xff0c;从早期的静态网页到如今复杂的单页应用&#xff08;SPA&#xff09;&#xff0c;再到微前端架构和渐进式Web应用&#xff08;PWA&#xff09;&#xff0c;前端技术一直处…...

循环队列(C语言版)

循环队列(C语言版&#xff09; 1.简单介绍循环队列2.使用何种结构来实现3.基本结构4.初始化5.判空判满6.向循环队列插入一个元素7.从循环队列中删除一个元素8.获取队头队尾元素9.释放空间10.完整代码 &#x1f31f;&#x1f31f;hello&#xff0c;各位读者大大们你们好呀&#…...

考研408笔记之数据结构(五)——图

数据结构&#xff08;五&#xff09;——图 1. 图的基本概念 1.1 图的定义 1.2 有向图和无向图 在有向图中&#xff0c;使用圆括号表示一条边&#xff0c;圆括号里元素位置互换没有影响。 在无向图中&#xff0c;使用尖括号表示一条边&#xff0c;尖括号里元素位置互换则表示…...

没有公网IP实现seafile本地IP访问和虚拟局域网IP同时访问和上传文件

前言 Ubuntu 24.04 LTSDocker 安装 seafileOpenWrtTailscale Ubuntu 24.04 LTS 通过 docker desktop 安装 seafile 搭建个人网盘中&#xff0c;已经实现了本地局域网放问Ubuntu IP来访问Seafile&#xff0c;以及通过 Ubuntu 的 Tailscale IP 访问Seafile。但是&#xff0c;文…...

【Hadoop面试题2025】

文章目录 简单题故障及相应的处理方法中等难度高难度小文件小文件的产生小文件问题的影响小文件治理方案推荐方案 冷文件冷文件的产生冷文件问题的影响冷文件治理方案推荐方案 简单题 一、基础概念类 什么是Hadoop&#xff1f; 答案&#xff1a;Hadoop是一个开源的分布式计算框…...

2000-2010年各省第三产业就业人数数据

2000-2010年各省第三产业就业人数数据 1、时间&#xff1a;2000-2010年 2、来源&#xff1a;统计年鉴、各省年鉴 3、指标&#xff1a;行政区划代码、地区、年份、第三产业就业人员数&#xff08;万人&#xff09; 4、范围&#xff1a;31省 5、指标解释&#xff1a;第三产业…...

第十一讲 多线程

多线程是提升程序性能非常重要的一种方式&#xff0c;也是Java编程中的一项重要技术。在程序设计中&#xff0c;多线程就是指一个应用程序中有多条并发执行的线索&#xff0c;每条线索都被称作一个线程&#xff0c;它们会交替执行&#xff0c;彼此间可以进行通信。 1. 进程与线…...

Java 语言特性(面试系列1)

一、面向对象编程 1. 封装&#xff08;Encapsulation&#xff09; 定义&#xff1a;将数据&#xff08;属性&#xff09;和操作数据的方法绑定在一起&#xff0c;通过访问控制符&#xff08;private、protected、public&#xff09;隐藏内部实现细节。示例&#xff1a; public …...

1.3 VSCode安装与环境配置

进入网址Visual Studio Code - Code Editing. Redefined下载.deb文件&#xff0c;然后打开终端&#xff0c;进入下载文件夹&#xff0c;键入命令 sudo dpkg -i code_1.100.3-1748872405_amd64.deb 在终端键入命令code即启动vscode 需要安装插件列表 1.Chinese简化 2.ros …...

【C语言练习】080. 使用C语言实现简单的数据库操作

080. 使用C语言实现简单的数据库操作 080. 使用C语言实现简单的数据库操作使用原生APIODBC接口第三方库ORM框架文件模拟1. 安装SQLite2. 示例代码:使用SQLite创建数据库、表和插入数据3. 编译和运行4. 示例运行输出:5. 注意事项6. 总结080. 使用C语言实现简单的数据库操作 在…...

Docker 本地安装 mysql 数据库

Docker: Accelerated Container Application Development 下载对应操作系统版本的 docker &#xff1b;并安装。 基础操作不再赘述。 打开 macOS 终端&#xff0c;开始 docker 安装mysql之旅 第一步 docker search mysql 》〉docker search mysql NAME DE…...

Netty从入门到进阶(二)

二、Netty入门 1. 概述 1.1 Netty是什么 Netty is an asynchronous event-driven network application framework for rapid development of maintainable high performance protocol servers & clients. Netty是一个异步的、基于事件驱动的网络应用框架&#xff0c;用于…...

STM32HAL库USART源代码解析及应用

STM32HAL库USART源代码解析 前言STM32CubeIDE配置串口USART和UART的选择使用模式参数设置GPIO配置DMA配置中断配置硬件流控制使能生成代码解析和使用方法串口初始化__UART_HandleTypeDef结构体浅析HAL库代码实际使用方法使用轮询方式发送使用轮询方式接收使用中断方式发送使用中…...

从面试角度回答Android中ContentProvider启动原理

Android中ContentProvider原理的面试角度解析&#xff0c;分为​​已启动​​和​​未启动​​两种场景&#xff1a; 一、ContentProvider已启动的情况 1. ​​核心流程​​ ​​触发条件​​&#xff1a;当其他组件&#xff08;如Activity、Service&#xff09;通过ContentR…...

Kubernetes 网络模型深度解析:Pod IP 与 Service 的负载均衡机制,Service到底是什么?

Pod IP 的本质与特性 Pod IP 的定位 纯端点地址&#xff1a;Pod IP 是分配给 Pod 网络命名空间的真实 IP 地址&#xff08;如 10.244.1.2&#xff09;无特殊名称&#xff1a;在 Kubernetes 中&#xff0c;它通常被称为 “Pod IP” 或 “容器 IP”生命周期&#xff1a;与 Pod …...

高防服务器价格高原因分析

高防服务器的价格较高&#xff0c;主要是由于其特殊的防御机制、硬件配置、运营维护等多方面的综合成本。以下从技术、资源和服务三个维度详细解析高防服务器昂贵的原因&#xff1a; 一、硬件与技术投入 大带宽需求 DDoS攻击通过占用大量带宽资源瘫痪目标服务器&#xff0c;因此…...

ArcGIS Pro+ArcGIS给你的地图加上北回归线!

今天来看ArcGIS Pro和ArcGIS中如何给制作的中国地图或者其他大范围地图加上北回归线。 我们将在ArcGIS Pro和ArcGIS中一同介绍。 1 ArcGIS Pro中设置北回归线 1、在ArcGIS Pro中初步设置好经纬格网等&#xff0c;设置经线、纬线都以10间隔显示。 2、需要插入背会归线&#xf…...