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

cherry-markdown开源markdown组件详细使用教程

文章目录

  • 前言
  • 开发定位
  • 目标
  • 调研
  • 技术方案
    • 前提
    • 工作量安排
    • 数据库表设计
    • 实现步骤
      • 1、引入依赖
      • 2、实现cherry-markdown的vue组件(修改上传接口路径)
      • 3、支持draw.io组件
      • 4、支持展示悬浮目录toc
      • 前端使用:编辑状态使用cherry-markdown的vue组件
      • 前端使用:展示markdown(对外展示)
  • 问题解决
    • 问题1:cherrymarkdown不随对应的markdown加载最新的
    • 问题2:在一个vue文件中使用了两次cherrymarkdown组件,打开一个之后,另一个位置打开时就会出现空情况
    • 问题3:cherry-markdown中支持虚拟目录toc

前言

博主介绍:✌目前全网粉丝3W+,csdn博客专家、Java领域优质创作者,博客之星、阿里云平台优质作者、专注于Java后端技术领域。

涵盖技术内容:Java后端、大数据、算法、分布式微服务、中间件、前端、运维等。

博主所有博客文件目录索引:博客目录索引(持续更新)

视频平台:b站-Coder长路


开发定位

个人开源项目https://gitee.com/changluJava/studio-vue,位于开发分支:feat_1.2.x_fsstudio,提交哈希码:9fff82c76f5a02e0977455fe53d2c560ca4c0ca7


目标

支持cherry markdown语法编辑博文


调研

Quill富文本编辑器

CherryMarkdown (推荐):https://github.com/Tencent/cherry-markdown

  • 推荐

Tinymce富文本编辑器:

可学习案例:ruo-yi-vue-blog:https://gitee.com/Ning310975876/ruo-yi-vue-blog


技术方案

前提

将studio-ui改造为studio-ui-vite为vite版本,引入cherry-markdown没有报错问题。


工作量安排

改造studio_think表

改造studio_race表

改造studio_ccie表


数据库表设计

针对有包含文本内容编辑的都额外支持一个字段:content_markdown

  • 主要包含两个字段存储博文内容:content(博客文章html)、contentMarkdown(博客文章markdown格式内容)

包含有存储内容形式的表如下

studio_ccie:证书表

原字段:ccie_think

studio_race:竞赛表

原字段:race_summarize

studio_think:个人思考表

原字段:content改造后:
content
content_markdown

实现步骤

1、引入依赖

package.json添加依赖:

"cherry-markdown": "0.8.22"

安装依赖:

npm install --force

2、实现cherry-markdown的vue组件(修改上传接口路径)

在components目录下添加cherry-markdown组件:

image-20240907083535373

修改该组件的上传图片地址:

import commonConfig from "@/api/common.js";// 图片上传路径修改为自己连接
request.open('POST', commonConfig.uploadAction) // 上传的图片服务器地址

image-20240921012448257

修改上传资源之后的markdown语法:

if (resp.code === 200) {if (/mp4|avi|rmvb/i.test(resp.fileSuffix)) {imgMdStr = `!video[${resp.data.originName}](${resp.data.visitUrl})`;} else if (/mp3/i.test(resp.fileSuffix)) {imgMdStr = `!audio[${resp.data.originName}](${resp.data.visitUrl})`;} else if (/bmp|gif|jpg|jpeg|png/i.test(resp.fileSuffix)) {imgMdStr = `![${resp.data.originName}](${resp.data.visitUrl})`} else {imgMdStr = `![${resp.data.originName}](${resp.data.visitUrl})`}
}

image-20240921012619487


3、支持draw.io组件

支持引入draw.io:引入该drawio目录

image-20240921012715024

效果展示:

image-20240921012746159

实际打开的时候访问的就是我们对应的public下的目录:

image-20240921012955264


4、支持展示悬浮目录toc

原始:

toc: {/** 默认只渲染一个目录 */allowMultiToc: false
},

修改后:

toc: {updateLocationHash: true, // 要不要更新URL的hashdefaultModel: 'pure', // pure: 精简模式/缩略模式,只有一排小点; full: 完整模式,会展示所有标题
},

前端使用:编辑状态使用cherry-markdown的vue组件

使用方式如下:

<CherryMarkdown ref="CherryMarkdown" :height='400' v-model='blogText.contentMarkdown' ></CherryMarkdown>import CherryMarkdown from '@/components/CherryMarkdown'components: {CherryMarkdown},data() {return {// 博客内容blogText: {contentMarkdown: '',content: ''}}},methods: {submitForm() {this.setFormContent()console.log("submitForm=>", this.blogText)},// 对于markdown的html需要调用对应markdown组件中的getCherryHtml()方法setFormContent(){this.blogText.content = this.$refs.CherryMarkdown.getCherryHtml()},}

最终效果演示:

关注这两个内容即可,分别一个是html内容,另一个是markdown内容:

image-20240921011346778


前端使用:展示markdown(对外展示)

代码如下:这里若是仅仅只需要预览,添加该属性即可:defaultModel="'previewOnly'"

<CherryMarkdown v-if="previewOpen" v-model='curThinkMarkdown' :defaultModel="'previewOnly'"></CherryMarkdown>import CherryMarkdown from '@/components/CherryMarkdown'components: {CherryMarkdown},

效果:

image-20240923093933644


问题解决

问题1:cherrymarkdown不随对应的markdown加载最新的

**场景:**例如编辑打开了一个markdown,此时又编辑打开另一个markdown,此时依旧是原先的markdown内容。

修复方式:

在cherrymarkdown组件中添加watch:

    watch: {// 监控 value 属性value(newValue, oldValue) {// 当 value 发生变化时,这个函数会被调用// console.log(`value changed from ${oldValue} to ${newValue}`);this.setMarkdown(newValue)}},  

问题2:在一个vue文件中使用了两次cherrymarkdown组件,打开一个之后,另一个位置打开时就会出现空情况

**场景:**首先打开预览总结的,然后打开添加或编辑的,此时就会为空

image-20240922225805994

image-20240922225817949

解决方案:

在对应的对框中的组件里分别加上v-if随着预览对话框的是否展示而统一进行变动:

image-20240922230832587

此时即可解决该问题。


问题3:cherry-markdown中支持虚拟目录toc

问题描述:

按照网站的配置参数:https://blog.csdn.net/weixin_73480865/article/details/136604029,发现不生效

问题解决:

首先确认你的cherry版本,我一开始是0.8.22,可以找到node_module中对应cherry-markdown的config.js,在配置文件中看是否支持这个toc,若是有下面的配置项就是支持的:

image-20240923081927465

关于cherry团队在github解决的issue:

  • [docs]自定义语法:https://github.com/Tencent/cherry-markdown/issues/620
  • 添加目录在预览时的右侧[Feature Request]:https://github.com/Tencent/cherry-markdown/issues/658

最终经过验证补充的toc配置方式:

toc: true, // 不展示悬浮目录
toc: {updateLocationHash: false, // 要不要更新URL的hashdefaultModel: 'full', // pure: 精简模式/缩略模式,只有一排小点; full: 完整模式,会展示所有标题showAutoNumber: false, // 是否显示自增序号position: 'fixed', // 悬浮目录的悬浮方式。当滚动条在cherry内部时,用absolute;当滚动条在cherry外部时,用fixedcssText: '', // 自定义样式
},

此时右侧出现了toc悬浮目录:

image-20240923093933644


整理者:长路 时间:2024.9.7-9.21

相关文章:

cherry-markdown开源markdown组件详细使用教程

文章目录 前言开发定位目标调研技术方案前提工作量安排数据库表设计实现步骤1、引入依赖2、实现cherry-markdown的vue组件&#xff08;修改上传接口路径&#xff09;3、支持draw.io组件4、支持展示悬浮目录toc前端使用&#xff1a;编辑状态使用cherry-markdown的vue组件前端使用…...

Android SystemUI组件(10)禁用/重启锁屏流程分析

该系列文章总纲链接&#xff1a;专题分纲目录 Android SystemUI组件 本章关键点总结 & 说明&#xff1a; 说明&#xff1a;本章节持续迭代之前章节的思维导图&#xff0c;主要关注左侧上方锁屏分析部分 应用入口处理流程解读 即可。 在 Android 系统中&#xff0c;禁用锁屏…...

【Geeksend邮件营销】外贸邮件中的一些常用语

外贸邮件中的相关术语丰富多样&#xff0c;涉及邮件的开头、正文、结尾以及特定的商务用语。以下是一些常用的外贸邮件术语及其解释&#xff1a; 一、邮件开头用语 1、问候语&#xff1a; Dear [收件人姓名]&#xff0c; Trust this email finds you well. How are you? …...

配置静态ip

背景:因业务需要需要将一台服务器从机房搬到实验室,机房是光纤,实验室是网线,需要重新配置下静态ip 确认网络配置文件(网上没找到,不清楚一下方法对不对) 先随便一个网口连接网线,执行 ifconfig -a 找到带“RUNNING”的(lo不是哈)----eno1 到/etc/sysconfig/network…...

[LeetCode] LCR170. 交易逆序对的总数

题目描述&#xff1a; 在股票交易中&#xff0c;如果前一天的股价高于后一天的股价&#xff0c;则可以认为存在一个「交易逆序对」。请设计一个程序&#xff0c;输入一段时间内的股票交易记录 record&#xff0c;返回其中存在的「交易逆序对」总数。 示例 1: 输入&#xff1a…...

大开眼界,原来指针还能这么玩?

文章目录 第一阶段&#xff1a;基础理解目标&#xff1a;内容&#xff1a;题目&#xff1a;答案解析&#xff1a; 第二阶段&#xff1a;指针与数组目标&#xff1a;内容&#xff1a;题目&#xff1a;答案解析&#xff1a; 第三阶段&#xff1a;指针与字符串目标&#xff1a;内容…...

揭秘选择知识产权管理系统的常见误区,避免踩坑

在当今知识经济时代&#xff0c;知识产权管理对于企业的发展至关重要。为了提高管理效率和效果&#xff0c;许多企业纷纷选择采用知识产权管理系统。然而&#xff0c;在选择过程中&#xff0c;存在着一些容易陷入的误区。 误区一&#xff1a;只关注功能&#xff0c;忽视用户体验…...

计算机组成原理之存储器的分类

1、按存储介质分类&#xff1a; 半导体存储器&#xff1a;使用半导体器件作为存储元件&#xff0c;如TTL和MOS存储器。这类存储器体积小、功耗低、存取时间短&#xff0c;但断电后数据会丢失。 磁表面存储器&#xff1a;使用磁性材料涂覆在金属或塑料基体表面作为存储介质&…...

Linux(不同版本系统包含Ubuntu)下安装mongodb详细教程

一、下载MongoDB 在MongoDB官网下载对应的MongoDB版本&#xff0c;可以点击以下链接快速跳转到下载页面&#xff1a; mongodb官网下载地址 注意选择和自己操作系统一致的platform,可以先查看自己的操作系统 查看操作系统详情 命令&#xff1a; uname -a 如图&#xff1a;操…...

如何扫描HTTP代理:步骤与注意事项

HTTP代理是一个复杂的过程&#xff0c;通常用于寻找可用的代理服务器&#xff0c;以便在网络中实现匿名或加速访问。虽然这个过程可以帮助用户找到适合的代理&#xff0c;但也需要注意合法性和道德问题。本文将介绍如何扫描HTTP代理&#xff0c;并提供一些建议和注意事项。 什…...

【分布式微服务云原生】gRPC与Dubbo:分布式服务通信框架的双雄对决

目录 引言gRPC&#xff1a;Google的高性能RPC框架gRPC通信流程图 Dubbo&#xff1a;阿里巴巴的微服务治理框架Dubbo服务治理流程图 表格&#xff1a;gRPC与Dubbo的比较结论呼吁行动Excel表格&#xff1a;gRPC与Dubbo特性总结 摘要 在构建分布式系统时&#xff0c;选择合适的服务…...

Python | Leetcode Python题解之第450题删除二叉搜索树中的节点

题目&#xff1a; 题解&#xff1a; class Solution:def deleteNode(self, root: Optional[TreeNode], key: int) -> Optional[TreeNode]:cur, curParent root, Nonewhile cur and cur.val ! key:curParent curcur cur.left if cur.val > key else cur.rightif cur i…...

[Linux]从零开始的网站搭建教程

一、谁适合本次教程 学习Linux已经有一阵子了&#xff0c;相信大家对LInux都有一定的认识。本次教程会教大家如何在Linux中搭建一个自己的网站并且实现内网访问。这里我们会演示在Windows中和在Linux中如何搭建自己的网站。当然&#xff0c;如果你没有Linux的基础&#xff0c;这…...

牛客——xay loves or与 __builtin_popcount的使用

xay loves or 题目描述 登录—专业IT笔试面试备考平台_牛客网 运行思路 题目要求我们计算有多少个正整数 yy 满足条件 x \text{ OR } y sx OR ys。这里的“OR”是指按位或运算。为了理解这个问题&#xff0c;我们需要考虑按位或运算的性质。 对于任意两个位 a_iai​ 和 b_…...

Docker学习和部署ry项目

文章目录 停止Docker重启设置开机自启执行docker ps命令&#xff0c;如果不报错&#xff0c;说明安装启动成功2.然后查看数据卷结果3.查看数据卷详情结果4.查看/var/lib/docker/volumes/html/_data目录可以看到与nginx的html目录内容一样&#xff0c;结果如下&#xff1a;5.进入…...

Linux中设置cd命令后直接显示当前目录下的所有文件

Linux中cd命令后默认是不显示该目录下的文件的&#xff0c;略微不方便。换个环境经常遇到需要重新设置的情况&#xff0c;网上已有很多发帖了&#xff0c;这里主要汇总下比较简单且常见的bash与csh下的设置方法。 实现的本质就是将"cd" 与 "ls"组合起来&am…...

【RTCP】报文学习笔记

在学习中,发现每一篇都只能窥探其中一部分内容。因此学习了多个大神的文章,记录如下: 参考希望_睿智 大神的文章:从零开始精通RTSP之深入理解RTCP协议, 大神对于细节表述非常到位。 read_book/RTP_RTCP /RTP_RTCP协议内容–精选自译.md 大神提供了更多更为详细的信息。 ZL…...

Solidity优质例子(二)物流的增删改查智能合约(附truffle测试)

本合约非常适合新手学习&#xff0c;其包含了基本的增删改查功能以及各个方式的不同之处的总结&#xff0c;本套合约我也编写了truffle测试&#xff0c;学习truffle测试的小伙伴也有福了~ 该合约的主要作用是通过区块链技术实现物流追踪系统的透明化、自动化与防篡改特性&#…...

对android binder的一些疑问及解答

1上层做了那么多封装是否是过度了&#xff0c;难度增加就在于上层的一层层的封装。 最底层直接ioctl和binder驱动交互&#xff08;单纯c语言实现binder交互&#xff09; 第一层&#xff1a;IPCThreadState.transatct封装了对驱动的请求和接受 第二层封装用IBinder.h里面…...

主流麦克风阵列有哪些?

麦克风阵列在HiFi音频方案中是非常重要的一种方案。它的重要性主要体现在音质提升、环境适应性、噪声处理和空间感创造等方面。以下是它的核心作用&#xff1a; 1. 高精度的声音捕捉 在HiFi音频解决方案中&#xff0c;清晰而高保真的声音捕捉是至关重要的。麦克风阵列可以通过…...

华为云AI开发平台ModelArts

华为云ModelArts&#xff1a;重塑AI开发流程的“智能引擎”与“创新加速器”&#xff01; 在人工智能浪潮席卷全球的2025年&#xff0c;企业拥抱AI的意愿空前高涨&#xff0c;但技术门槛高、流程复杂、资源投入巨大的现实&#xff0c;却让许多创新构想止步于实验室。数据科学家…...

Ubuntu系统下交叉编译openssl

一、参考资料 OpenSSL&&libcurl库的交叉编译 - hesetone - 博客园 二、准备工作 1. 编译环境 宿主机&#xff1a;Ubuntu 20.04.6 LTSHost&#xff1a;ARM32位交叉编译器&#xff1a;arm-linux-gnueabihf-gcc-11.1.0 2. 设置交叉编译工具链 在交叉编译之前&#x…...

DockerHub与私有镜像仓库在容器化中的应用与管理

哈喽&#xff0c;大家好&#xff0c;我是左手python&#xff01; Docker Hub的应用与管理 Docker Hub的基本概念与使用方法 Docker Hub是Docker官方提供的一个公共镜像仓库&#xff0c;用户可以在其中找到各种操作系统、软件和应用的镜像。开发者可以通过Docker Hub轻松获取所…...

蓝牙 BLE 扫描面试题大全(2):进阶面试题与实战演练

前文覆盖了 BLE 扫描的基础概念与经典问题蓝牙 BLE 扫描面试题大全(1)&#xff1a;从基础到实战的深度解析-CSDN博客&#xff0c;但实际面试中&#xff0c;企业更关注候选人对复杂场景的应对能力&#xff08;如多设备并发扫描、低功耗与高发现率的平衡&#xff09;和前沿技术的…...

【git】把本地更改提交远程新分支feature_g

创建并切换新分支 git checkout -b feature_g 添加并提交更改 git add . git commit -m “实现图片上传功能” 推送到远程 git push -u origin feature_g...

【论文阅读28】-CNN-BiLSTM-Attention-(2024)

本文把滑坡位移序列拆开、筛优质因子&#xff0c;再用 CNN-BiLSTM-Attention 来动态预测每个子序列&#xff0c;最后重构出总位移&#xff0c;预测效果超越传统模型。 文章目录 1 引言2 方法2.1 位移时间序列加性模型2.2 变分模态分解 (VMD) 具体步骤2.3.1 样本熵&#xff08;S…...

Java线上CPU飙高问题排查全指南

一、引言 在Java应用的线上运行环境中&#xff0c;CPU飙高是一个常见且棘手的性能问题。当系统出现CPU飙高时&#xff0c;通常会导致应用响应缓慢&#xff0c;甚至服务不可用&#xff0c;严重影响用户体验和业务运行。因此&#xff0c;掌握一套科学有效的CPU飙高问题排查方法&…...

【无标题】路径问题的革命性重构:基于二维拓扑收缩色动力学模型的零点隧穿理论

路径问题的革命性重构&#xff1a;基于二维拓扑收缩色动力学模型的零点隧穿理论 一、传统路径模型的根本缺陷 在经典正方形路径问题中&#xff08;图1&#xff09;&#xff1a; mermaid graph LR A((A)) --- B((B)) B --- C((C)) C --- D((D)) D --- A A -.- C[无直接路径] B -…...

绕过 Xcode?使用 Appuploader和主流工具实现 iOS 上架自动化

iOS 应用的发布流程一直是开发链路中最“苹果味”的环节&#xff1a;强依赖 Xcode、必须使用 macOS、各种证书和描述文件配置……对很多跨平台开发者来说&#xff0c;这一套流程并不友好。 特别是当你的项目主要在 Windows 或 Linux 下开发&#xff08;例如 Flutter、React Na…...

WebRTC调研

WebRTC是什么&#xff0c;为什么&#xff0c;如何使用 WebRTC有什么优势 WebRTC Architecture Amazon KVS WebRTC 其它厂商WebRTC 海康门禁WebRTC 海康门禁其他界面整理 威视通WebRTC 局域网 Google浏览器 Microsoft Edge 公网 RTSP RTMP NVR ONVIF SIP SRT WebRTC协…...