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的hash
  defaultModel: '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的hash
  defaultModel: 'full', // pure: 精简模式/缩略模式，只有一排小点； full: 完整模式，会展示所有标题
  showAutoNumber: false, // 是否显示自增序号
  position: 'fixed', // 悬浮目录的悬浮方式。当滚动条在cherry内部时，用absolute；当滚动条在cherry外部时，用fixed
  cssText: '', // 自定义样式
},

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

image-20240923093933644

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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mfbz.cn/a/887865.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

netty之Netty心跳服务与断线重连

netty之Netty心跳服务与断线重连

前言 使用netty中&#xff0c;需要监测服务是否稳定以及在网络异常链接断开时候可以自动重连。需要实现监听&#xff1b;f.addListener(new MyChannelFutureListener()) 代码目录结构 package com.lm.demo.netty.client;import io.netty.channel.ChannelFuture; import io.nett…
阅读更多...
【11】纯血鸿蒙HarmonyOS NEXT星河版开发0基础学习笔记-模块化语法与自定义组件

【11】纯血鸿蒙HarmonyOS NEXT星河版开发0基础学习笔记-模块化语法与自定义组件

序言&#xff1a; 本文详细讲解了关于鸿蒙系统学习中的模块化语法与自定义组件&#xff0c;在模块化语法中我们学习到了多种导入导出方式&#xff0c;实现了在一个项目中&#xff0c;通过引用不同的组件&#xff0c;让我们整体代码的可读性更强&#xff0c;相当于我们把一个手…
阅读更多...
认知战认知作战：认知战与安全挑战中方企业在海外的应对策略分析

认知战认知作战：认知战与安全挑战中方企业在海外的应对策略分析

认知战认知作战&#xff1a;认知战与安全挑战中方企业在海外的应对策略分析 关键词&#xff1a;认知战, 中方企业, 恐怖袭击, 安全挑战, 信息传播, 社会责任, 风险管理, 国际合作,认知作战,新质生产力,人类命运共同体,认知战,认知域,认知战研究中心,认知战争,认知战战术,认知战…
阅读更多...
MATLAB中lsqminnorm函数用法

MATLAB中lsqminnorm函数用法

目录 语法 说明 示例 求解具有无限个解的线性系统 指定容差以减少含噪数据的影响 切换显示低秩矩阵警告 lsqminnorm函数的功能是线性方程的最小范数最小二乘解。 语法 X lsqminnorm(A,B) X lsqminnorm(A,B,tol) X lsqminnorm(___,rankWarn) 说明 X lsqminnorm(A,B…
阅读更多...
Ansible学习之ansible-pull命令

Ansible学习之ansible-pull命令

想要知道ansible-pull是用来做什么的&#xff0c;就需要了解Ansible的工作模&#xff0c;Ansible的工作模式有两种&#xff1a; push模式 push推送&#xff0c;这是Ansible的默认模式&#xff0c;在主控机上编排好playbook文件&#xff0c;push到远程主机上来执行。pull模式 p…
阅读更多...
QT系统学习篇（2）- Qt跨平台GUI原理机制

QT系统学习篇（2）- Qt跨平台GUI原理机制

一、Qt工程管理 1、新建项目&#xff1a; 我们程序员新建项目对话框所有5类项目模板 Application: Qt的应用程序&#xff0c;包含Qt Quick和普通窗口程序。 Library: 它可以创建动态库、静态库、Qt Creator自身插件、Qt Quick扩展插件。 其他项目: 创建单元测试项目、子目录项…
阅读更多...
数据分析之Spark框架介绍

数据分析之Spark框架介绍

文章目录 概述一、发展历程与背景二、核心特点三、生态系统与组件四、应用场景五、与其他大数据技术的比较 核心概念1. 弹性分布式数据集&#xff08;RDD, Resilient Distributed Dataset&#xff09;2. 转换&#xff08;Transformations&#xff09;和动作&#xff08;Actions…
阅读更多...
Redis主从复制(replica)、哨兵

Redis主从复制(replica)、哨兵

一、Redis主从复制介绍: 主从复制&#xff0c;master主机以写为主&#xff0c;slave从机以读为主&#xff0c;当主机数据变化的时候自动将新的数据异步同步到其他从机数据库&#xff1b;能够实现读写分离&#xff0c; 容灾恢复、 数据备份以及水平扩容支撑高并发 二、实现方法…
阅读更多...
【stm32】ADC的介绍与使用

【stm32】ADC的介绍与使用

ADC的介绍与使用 1、ADC介绍2、逐次逼近型ADC3、ADC电路4、ADC基本结构程序代码编写&#xff1a;ADC 通道和引脚复用的关系 5、转换模式&#xff08;1&#xff09;单次转换&#xff0c;非扫描模式转换流程&#xff1a;程序编写&#xff1a; &#xff08;2&#xff09;连续转换&…
阅读更多...
基于 springboot vue中学生日常行为评分管理系统设计与实现

基于 springboot vue中学生日常行为评分管理系统设计与实现

博主介绍&#xff1a;专注于Java&#xff08;springboot ssm 等开发框架&#xff09; vue .net php python(flask Django) 小程序 等诸多技术领域和毕业项目实战、企业信息化系统建设&#xff0c;从业十五余年开发设计教学工作☆☆☆ 精彩专栏推荐订阅☆☆☆☆☆不然下次找…
阅读更多...
​通用代码生成器典型应用场景​

​通用代码生成器典型应用场景​

​通用代码生成器典型应用场景​ 1. 通用代码生成器简介 通用代码生成器或称动词算子式通用代码生成器&#xff0c;是一系列各种语言的易用的整站式代码生成器。其根本原理是把方法分解成动词算子和域对象的笛卡儿积。根据动词算子式代码生成器的基本原理。所有方法&#xff…
阅读更多...
网 络 安 全

网 络 安 全

网络安全是指保护网络系统及其所存储或传输的数据免遭未经授权访问、使用、揭露、破坏、修改或破坏的实践和技术措施。网络安全涉及多个方面&#xff0c;包括但不限于以下几个方面&#xff1a; 1. 数据保护&#xff1a;确保数据在传输和存储过程中的完整性和保密性&#xff0c;…
阅读更多...
[Python] 《人生重开模拟器》游戏实现

[Python] 《人生重开模拟器》游戏实现

文章目录 优化点一&#xff1a;多元化的天赋系统示例天赋&#xff1a;天赋选择代码&#xff1a; 优化点二&#xff1a;更加多样化的随机事件年龄阶段划分&#xff1a;随机事件代码&#xff1a; 优化点三&#xff1a;设定人生目标人生目标示例&#xff1a;人生目标代码&#xff…
阅读更多...
python爬虫 - 初识requests模块

python爬虫 - 初识requests模块

&#x1f308;个人主页&#xff1a;https://blog.csdn.net/2401_86688088?typeblog &#x1f525; 系列专栏&#xff1a;https://blog.csdn.net/2401_86688088/category_12797772.html 前言 requests 是一个用于发送 HTTP 请求的 Python 库&#xff0c;设计简单且功能强大&am…
阅读更多...
如何创建虚拟环境并实现目标检测及验证能否GPU加速

如何创建虚拟环境并实现目标检测及验证能否GPU加速

创建虚拟环境&#xff1a; 先创建一个虚拟python环境&#xff0c;敲如下代码 然后再到该虚拟环境里面安装自己想要的包 激活虚拟环境 然后再聚类训练这些 验证GPU加速 阿里源 pip install torch torchvision -i http://mirrors.aliyun.com/pypi/simple/ --trusted-host mir…
阅读更多...
B树系列解析

B树系列解析

我最近开了几个专栏&#xff0c;诚信互三&#xff01; > |||《算法专栏》&#xff1a;&#xff1a;刷题教程来自网站《代码随想录》。||| > |||《C专栏》&#xff1a;&#xff1a;记录我学习C的经历&#xff0c;看完你一定会有收获。||| > |||《Linux专栏》&#xff1…
阅读更多...
YOLO11改进|卷积篇|引入线性可变形卷积LDConv

YOLO11改进|卷积篇|引入线性可变形卷积LDConv

目录 一、【LDConv】卷积1.1【LDConv】卷积介绍1.2【LDConv】核心代码 二、添加【LDConv】卷积2.1STEP12.2STEP22.3STEP32.4STEP4 三、yaml文件与运行3.1yaml文件3.2运行成功截图 一、【LDConv】卷积 1.1【LDConv】卷积介绍 下图是【LDCNV】的结构图&#xff0c;让我们简单分析…
阅读更多...
鸿蒙HarmonyOS开发生态

鸿蒙HarmonyOS开发生态

1、官网 华为开发者联盟-HarmonyOS开发者官网&#xff0c;共建鸿蒙生态 2、开发工具IDE下载及使用 https://developer.huawei.com/consumer/cn/ 3、使用帮助文档 4、发布到华为应用商店 文档中心
阅读更多...
多模态大语言模型（MLLM）-Blip2深度解读

多模态大语言模型（MLLM）-Blip2深度解读

前言 Blip2是一个多模态大语言模型&#xff0c;因其提出时间较早&#xff08;2023年&#xff09;&#xff0c;且效果较好&#xff0c;很快成为一个标杆性工作。Blip2中提出的Q-former也成为衔接多模态和文本的重要桥梁。 Blip2发表时间是2023年&#xff0c;现在引用已经3288了…
阅读更多...
事件抽取（Event Extraction, EE）

事件抽取（Event Extraction, EE）

一、引言 事件抽取&#xff08;Event Extraction, EE&#xff09;是信息抽取领域中的一个重要任务&#xff0c;旨在从非结构化文本中识别和抽取事件相关的信息。事件抽取通常包括识别事件触发词、事件类型以及事件中的参与者、时间、地点等元素&#xff0c;最终将这些信息结构…
阅读更多...
最新文章

Copyright @ 2022~2023