vue2.0+使用md-edit编辑器
前言:小刘开发过程中,如果是博客项目一般是会用到富文本。众多富文本中,小刘选择了markdown,并记录分享了下来。
# 使用 npm
npm i @kangc/v-md-editor -Smain.js基本配置import VueMarkdownEditor from '@kangc/v-md-editor';
import '@kangc/v-md-editor/lib/style/base-editor.css';
import vuepressTheme from '@kangc/v-md-editor/lib/theme/vuepress.js';
import '@kangc/v-md-editor/lib/theme/style/vuepress.css';import Prism from 'prismjs';VueMarkdownEditor.use(vuepressTheme, {Prism,
});/* 2、v-md-editor 代码块关键字高亮 */
import githubTheme from '@kangc/v-md-editor/lib/theme/github.js';
import '@kangc/v-md-editor/lib/theme/style/github.css';
// 引入所有语言包
import hljs from 'highlight.js';
VueMarkdownEditor.use(githubTheme, {Hljs: hljs,
});/*** 3.创建行号*/
import createLineNumbertPlugin from '@kangc/v-md-editor/lib/plugins/line-number/index';VueMarkdownEditor.use(createLineNumbertPlugin());Vue.use(VueMarkdownEditor);
页面加载使用
<template><div class="hello"><v-md-editor v-model="text" height="400px"></v-md-editor></div>
</template><script>
export default {data() {return {text: '',};},
};
</script>
特别注意:当步骤到行号的时候,会出现依赖有问题;
类似:* @babel/runtime/helpers/interopRequireDefault in ./node_modules/@kangc/v-md-editor/lib/plugins/line-number/index.js To install it, you can run: npm install --save @babel/runtime/helpers/interopRequireDefault Error from chokidar (C:): Error: EBUSY: reso。。。。。。。
这种错误;
解决方案:
当使用 babel 转换 es 6出现下面错误时:
Module not found: Error: Can’t resolve
‘@babel/runtime/helpers/interopRequireDefault’ 我们可以重新安装一下:npm i @babel/runtime --save-dev
至此:github主题的markdown编辑器基本用法完成了。
运行demo效果:

图片上传功能:将图片上传到服务器,然后回显图片
:disabled-menus="[]"
@upload-image="handleUploadImage"
注意
上传图片菜单默认为禁用状态 设置 disabled-menus 为空数组可以开启。
handleUploadImage(event, insertImage, files) {// 拿到 files 之后上传到文件服务器,然后向编辑框中插入对应的内容console.log(files);// 此处只做示例insertImage({url:'https://pic.rmb.bdstatic.com/bjh/down/a477f2b15e2039b9fc7e2282791a9897.jpeg',desc: '七龙珠',// width: 'auto',// height: 'auto',});},
测试效果如下

相关文章:
vue2.0+使用md-edit编辑器
前言:小刘开发过程中,如果是博客项目一般是会用到富文本。众多富文本中,小刘选择了markdown,并记录分享了下来。 # 使用 npm npm i kangc/v-md-editor -Smain.js基本配置import VueMarkdownEditor from kangc/v-md-editor; import…...
Java设计模式大全:23种常见的设计模式详解(二)
本系列文章简介: 设计模式是在软件开发过程中,经过实践和总结得到的一套解决特定问题的可复用的模板。它是一种在特定情境中经过验证的经验和技巧的集合,可以帮助开发人员设计出高效、可维护、可扩展和可复用的软件系统。设计模式提供了一种在…...
【算法与数据结构】718、1143、1035、392、115、LeetCode最长重复子数组+最长公共子序列+不相交的线+判断子序列+不同的子序列
文章目录 一、718、最长重复子数组二、1143、最长公共子序列三、1035、不相交的线四、392、判断子序列五、115、不同的子序列六、完整代码 所有的LeetCode题解索引,可以看这篇文章——【算法和数据结构】LeetCode题解。 一、718、最长重复子数组 思路分析࿱…...
OCR文本纠错思路
文字错误类别:多字 少字 形近字 当前方案 文本纠错思路 简单: 一、构建自定义词典,提高分词正确率。不在词典中,也不是停用词,分成单字的数据极有可能是错字(少部分可能是新词)。错字与前后的…...
【java批量导出pdf】优化方案
问题情境: 项目中存在web页面点击一键导出,导出所有数据对应的pdf文件,由于有些pdf文件是实时生成的,之前最简答的写法for循环处理速度太慢,超过了nginx配置的最大响应时间了,且对用户交互体验上很不友好&…...
Linux第42步_移植ST公司uboot的第3步_uboot命令测试,搭建nfs服务器和tftp服务器
测试uboot命令,搭建nfs服务器和tftp服务器,是测试uboot非常关键的一步。跳过这一节,后面可能要踩坑。 一、输入“help回车”,查询uboot所支持的命令 二、输入“? bootz回车”,查询“bootz”怎么用 注意:和…...
C++枚举算法(3)
我家的门牌号 题目描述: 我家住在一条短胡同里,这条胡同的门牌号从1开始顺序编号。 若所有的门牌号之和减去我家门牌号的两倍,恰好等于n,求 我家的门牌号及总共有多少家。 数据保证有唯一解。 输入 一个正整数n。n < 100000。…...
【51单片机】LED的三个基本项目(LED点亮&LED闪烁&LED流水灯)(3)
前言 大家好吖,欢迎来到 YY 滴单片机系列 ,热烈欢迎! 本章主要内容面向接触过单片机的老铁 主要内容含: 欢迎订阅 YY滴C专栏!更多干货持续更新!以下是传送门! YY的《C》专栏YY的《C11》专栏YY的…...
Day 17------C语言收尾之链表的删除、位运算、预处理、宏定义
链表 空链表: 注意:函数不能返回局部变量的地址 操作: 1.创建空链表 2.头插 3.尾插 4.链表遍历 5.链表的长度 free:释放 删除: 头删 void popFront(struct Node *head) { //1.p指针变量指向首节点 //2.断…...
python_蓝桥杯刷题记录_笔记_全AC代码_入门5
前言 关于入门地刷题到现在就结束了。 题单目录 1.P1579 哥德巴赫猜想(升级版) 2.P1426 小鱼会有危险吗 1.P1579 哥德巴赫猜想(升级版) 一开始写的代码是三重循环,结果提交上去一堆地TLE,然后我就给减少…...
二叉树的详解
二叉树 【本节目标】 掌握树的基本概念掌握二叉树概念及特性掌握二叉树的基本操作完成二叉树相关的面试题练习 树型结构(了解) 概念 树是一种非线性的数据结构,它是由n(n>0)个有限结点组成一个具有层次关系的集合。…...
【第三十五节】idea项目的创建以及setting和Project Structure的设置
项目创建 Project Structure的设置 点击file ~ Project Structure 进入...
【c++】跟webrtc学引用计数
rtc::RefCountInterface 接口类 G:\CDN\rtcCli\m98\src\rtc_base\ref_count.h引用计数想形成一种树状结构 // Interfaces where refcounting is part of the public api should // inherit this abstract interface. The implementation of these // methods is usually provid…...
开源免费的物联网网关 IoT Gateway
1. 概述 物联网网关,也被称为IOT网关,是一种至关重要的网络设备。在物联网系统中,它承担着连接和控制各种设备的重要任务,将这些设备有效地连接到云端、本地服务器或其他设备上。它既能够在广域范围内实现互联,也能在…...
华为OD机试真题C卷-篇3
文章目录 查找一个有向网络的头节点和尾节点幼儿园篮球游戏 查找一个有向网络的头节点和尾节点 在一个有向图中,有向边用两个整数表示,第一个整数表示起始节点,第二个整数表示终止节点;图中只有一个头节点,一个或者多…...
[SWPUCTF 2021 新生赛]include
他让我们传入一个flag值 我们传入即可看到代码部分 传入一个php的伪类即可 得到经过Base64加密的flag,解密即可...
LeetCode、17. 电话号码的字母组合【中等,dfs回溯】
文章目录 前言LeetCode、17. 电话号码的字母组合【中等,dfs回溯】题目与类型思路递归回溯优化:StringBuilder来回溯补充代码:2024.1.31(简化) 资料获取 前言 博主介绍:✌目前全网粉丝2W,csdn博…...
SSRF漏洞给云服务元数据带来的安全威胁
文章目录 前言元数据服务威胁1.1 Metadata元数据1.2 RAM资源管理角色1.3 STS 临时凭据利用1.4 CF云环境利用框架1.5 元数据安全性增强 TerraformGoat2.1 永久性AccessKey2.2 SSRF靶场环境搭建2.3 腾讯云CVM配角色2.4 接管腾讯云控制台 SSRF组合拳案例3.1 上传图片功能SSRF3.2 文…...
【C++】强制类型转换
强制类型转换分为显式和隐式 显式直接用小括号强制转换,float b (int)a; 隐式直接 float b 0.5; int a b; C中更推荐用四个强制类型转换的关键字: 1、static_cast, 2、const_cast, 3、reinterpret_cast, 4、dynami…...
java日志框架总结(四 、JCL日志门面技术)
日志框架出现的历史顺序:Log4j → JUL → JCL → slf4j → logback → log4j2 一、背景 在前面博文中,我们分别讲述了常用的2个日志框架:JUL(Java Util Logging)、Log4J。那么如何选择使用哪一个呢? 根据项…...
别再乱选ASCII/HEX了!野火串口调试助手发送接收区配置详解(附实战案例)
串口通信调试实战:ASCII与HEX模式的选择艺术 调试智能家居设备时,你是否遇到过发送"ON"指令毫无反应,接收区却显示一堆乱码的尴尬?这往往不是设备故障,而是串口调试中最常见的模式选择错误。作为嵌入式开发者…...
Java八股文实践篇:从理论到DeOldify项目中的设计模式应用
Java八股文实践篇:从理论到DeOldify项目中的设计模式应用 每次面试被问到设计模式,是不是都只能背出“单例模式确保一个类只有一个实例”这样的标准答案?背得滚瓜烂熟,但一上手写代码,还是觉得这些模式离自己很远&…...
请解释 Linux 系统中的内核模块管理,并描述如何加载和卸载模块。
在 Linux 系统中,内核模块(Kernel Modules) 是可以在不重新编译或重启内核的情况下,动态添加到运行中内核的代码片段。它们通常用于支持新的硬件设备、文件系统或网络协议。 这种机制使得 Linux 内核保持精简(核心功能…...
2026权威评测:TOP5毕业论文AIGC降重方案对比与首选建议
全景速览:2026盲审季TOP5降重工具核心对比表 排名工具名称降重与去痕效能核心适用场景致命短板 / 核心优势1Scholingo靠岸妙写★★★★★国内本科/硕博盲审、核心期刊投稿优势:DOM级自定义大纲独家AIGC物理去痕2Paperpal★★★★☆SCI/海外顶刊纯英润色…...
Win11Debloat开源工具:焕新Windows系统体验的极简优化指南
Win11Debloat开源工具:焕新Windows系统体验的极简优化指南 【免费下载链接】Win11Debloat A simple, lightweight PowerShell script that allows you to remove pre-installed apps, disable telemetry, as well as perform various other changes to declutter an…...
保姆级教程:用LongCat动物百变秀,快速给猫狗加帽子、换造型
保姆级教程:用LongCat动物百变秀,快速给猫狗加帽子、换造型 1. 为什么选择动物百变秀? 给宠物照片添加创意元素一直是许多人的需求,但传统方法要么需要专业PS技能,要么效果生硬不自然。LongCat动物百变秀解决了这个痛…...
从原理到实践:深入理解Shellcode免杀技术及其对抗策略
Shellcode免杀技术的深度解析与对抗策略演进 在网络安全攻防对抗的永恒博弈中,Shellcode免杀技术始终占据着特殊地位。不同于传统的恶意软件检测规避,Shellcode免杀更注重代码层面的"隐形"能力,其核心在于让关键载荷在内存中执行时…...
多语言交易所/外汇系统源码/合约/期权/杠杆合约 秒合约/理财/申购
支持控盈亏等等功能支持合约、期权两大交易品类(当前选中「期权」),以 XRP/USDT 为交易对示例,提供双向交易:买涨(做多):预判价格上涨时开仓盈利买跌(做空)&a…...
Topgrade性能优化技巧:提升大规模更新效率的5种方法
Topgrade性能优化技巧:提升大规模更新效率的5种方法 【免费下载链接】topgrade Upgrade all the things 项目地址: https://gitcode.com/gh_mirrors/top/topgrade Topgrade是一款强大的系统更新工具,它能自动检测并升级系统中的所有包管理器、编程…...
tomcat和国产web中间件区别和联系
国产中间件 宝蓝德 https://www.bessystem.com/product/e717be5b091e4e14a7339aa4be49ca80/info?p101东方通 https://www.tongtech.com/sy.html非国产tomcat tomcat的项目发布方式 将项目复制到tomcat/webapps中启动Tomcat服务器,双击 startup.bat访问项目 IDEA 中…...
