使用mavonEditor写文章,并且很好的预览。

2024-04-16 15:58

本文主要是介绍使用mavonEditor写文章,并且很好的预览。,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

最近在写博客,选了好久的编辑器最终选中了mavonEditor,它也没有让我失望,下面我们就来看一下它的使用吧

1、演示(先来看一下我做成的最终效果吧)

1-1:编辑

在这里插入图片描述

1-2:预览 (由于截图工具的原因,没有全部框出来。一直到点个赞上面都是噢)

在这里插入图片描述

2、解释

2-1、我编辑和预览都是用的mavonEditor。最开始我想自己去实现预览功能,我发现这个想法是愚蠢的

2-2、使用mavonEditor预览的好处
2-2-1:你不用担心数据库存什么,直接存它的markdown语法就好了。最开始我自定义预览的时候还保存了html
2-2-2:你不用去想着怎么解决代码高亮的问题
2-2-3:你不用担心图片太小无法看清楚,要自己实现点击查看。 这个mavonEditor已经实现好了
2-2-4:等待发掘…


3、使用

对于后台的编辑就比较简单就不说了,直接存markdown就好了不用管其他的。我这里就说一下前台的预览

第一步:和后台使用一样的引入mavonEditor
第二步:设置如下属性(属性含义自行去看官方文档)

这里你可能遇到,背景颜色、和边框的问题看这里 mavonEditor 修改预览背景颜色、去除边框和阴影
在这里插入图片描述

 <no-ssr>                                <mavon-editor                                    v-model="bamFrom.bafMarkdown"                                     :subfield="false"                                    :boxShadow="false"                                    defaultOpen="preview"                                    :toolbarsFlag="false"                                   />                            </no-ssr>

如果还有不明白的可以给我留言,我会尽快回复你的



如果对你有帮助的话,可以关注我的微信公众号支持一下噢

在这里插入图片描述

这篇关于使用mavonEditor写文章,并且很好的预览。的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/909247

相关文章

使用 sql-research-assistant进行 SQL 数据库研究的实战指南(代码实现演示)

《使用sql-research-assistant进行SQL数据库研究的实战指南(代码实现演示)》本文介绍了sql-research-assistant工具,该工具基于LangChain框架,集... 目录技术背景介绍核心原理解析代码实现演示安装和配置项目集成LangSmith 配置(可选)启动服务应用场景

使用Python快速实现链接转word文档

《使用Python快速实现链接转word文档》这篇文章主要为大家详细介绍了如何使用Python快速实现链接转word文档功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 演示代码展示from newspaper import Articlefrom docx import

oracle DBMS_SQL.PARSE的使用方法和示例

《oracleDBMS_SQL.PARSE的使用方法和示例》DBMS_SQL是Oracle数据库中的一个强大包,用于动态构建和执行SQL语句,DBMS_SQL.PARSE过程解析SQL语句或PL/S... 目录语法示例注意事项DBMS_SQL 是 oracle 数据库中的一个强大包,它允许动态地构建和执行

SpringBoot中使用 ThreadLocal 进行多线程上下文管理及注意事项小结

《SpringBoot中使用ThreadLocal进行多线程上下文管理及注意事项小结》本文详细介绍了ThreadLocal的原理、使用场景和示例代码,并在SpringBoot中使用ThreadLo... 目录前言技术积累1.什么是 ThreadLocal2. ThreadLocal 的原理2.1 线程隔离2

Python itertools中accumulate函数用法及使用运用详细讲解

《Pythonitertools中accumulate函数用法及使用运用详细讲解》:本文主要介绍Python的itertools库中的accumulate函数,该函数可以计算累积和或通过指定函数... 目录1.1前言:1.2定义:1.3衍生用法:1.3Leetcode的实际运用:总结 1.1前言:本文将详

浅析如何使用Swagger生成带权限控制的API文档

《浅析如何使用Swagger生成带权限控制的API文档》当涉及到权限控制时,如何生成既安全又详细的API文档就成了一个关键问题,所以这篇文章小编就来和大家好好聊聊如何用Swagger来生成带有... 目录准备工作配置 Swagger权限控制给 API 加上权限注解查看文档注意事项在咱们的开发工作里,API

Java数字转换工具类NumberUtil的使用

《Java数字转换工具类NumberUtil的使用》NumberUtil是一个功能强大的Java工具类,用于处理数字的各种操作,包括数值运算、格式化、随机数生成和数值判断,下面就来介绍一下Number... 目录一、NumberUtil类概述二、主要功能介绍1. 数值运算2. 格式化3. 数值判断4. 随机

Spring排序机制之接口与注解的使用方法

《Spring排序机制之接口与注解的使用方法》本文介绍了Spring中多种排序机制,包括Ordered接口、PriorityOrdered接口、@Order注解和@Priority注解,提供了详细示例... 目录一、Spring 排序的需求场景二、Spring 中的排序机制1、Ordered 接口2、Pri

Springboot 中使用Sentinel的详细步骤

《Springboot中使用Sentinel的详细步骤》文章介绍了如何在SpringBoot中使用Sentinel进行限流和熔断降级,首先添加依赖,配置Sentinel控制台地址,定义受保护的资源,... 目录步骤 1: 添加 Sentinel 依赖步骤 2: 配置 Sentinel步骤 3: 定义受保护的

Python中Markdown库的使用示例详解

《Python中Markdown库的使用示例详解》Markdown库是一个用于处理Markdown文本的Python工具,这篇文章主要为大家详细介绍了Markdown库的具体使用,感兴趣的... 目录一、背景二、什么是 Markdown 库三、如何安装这个库四、库函数使用方法1. markdown.mark