您当前的位置:首页 > 电脑百科 > 软件技术 > 应用软件

这个markdown编辑器无敌了

时间:2022-05-16 12:09:14  来源:  作者:记忆旅途

前言

Markdown 是一种轻量级标记语言,由于其具备简洁的语法和轻量化等优点,现在越来越多的内容网站用它来进行文档的编写,比如git的readme文档、腾讯文档等都支持markdown语法。

我们在日常生活中多多少少也会跟markdown相关周边会有接触。今天给大家推荐一款强大的markdown编辑器,可用于桌面,也可嵌入我们的网站用于内容创作。

Vditor

一般开源的markdown编辑器都是分屏预览,左边写内容,右边渲染内容。而Vditor可以做到实时渲染

这个markdown编辑器无敌了

 

当然,也支持传统的分屏预览模式

这个markdown编辑器无敌了

 

除此之外,还有很多特点:

  • 支持三种编辑模式:所见即所得(wysiwyg)、即时渲染(ir)、分屏预览(sv)
  • 支持大纲、数学公式、脑图、图表、流程图、甘特图、时序图、五线谱、多媒体、语音阅读、标题锚点、代码高亮及复制、graphviz、PlantUML 渲染
  • 内置安全过滤、导出、图片懒加载、任务列表、多平台预览、多主题切换、复制到微信公众号/知乎功能
  • 实现 CommonMark 和 GFM 规范,可对 Markdown 进行格式化和语法树查看,并支持10+项配置
  • 工具栏包含 36+ 项操作,除支持扩展外还可对每一项中的快捷键、提示、提示位置、图标、点击事件、类名、子工具栏进行自定义
  • 表情/at/话题等自动补全扩展
  • 可使用拖拽、剪切板粘贴上传,显示实时上传进度,支持 CORS 跨域上传
  • 实时保存内容,防止意外丢失
  • 录音支持,用户可直接发布语音
  • 粘贴 html 自动转换为 Markdown,如粘贴中包含外链图片可通过指定接口上传到服务器
  • 支持主窗口大小拖拽、字符计数
  • 多主题支持,内置黑白绿三套主题
  • 多语言支持,内置中、英、韩文本地化
  • 支持主流浏览器,对移动端友好

vue项目中使用

  • 安装依赖
npm install vditor --save
  • 实际开发
<template>
	<div id="vditor" class="editor"></div>
</template>
import Vditor from 'vditor'
import "~vditor/src/assets/scss/index"

export default {
	created() {
		// 可写编辑器
		initEdit();

		// 预览模式
		initPriview();
	},
	method: {
		initEdit() {
			window.vditor = new Vditor('vditor', {
        			// config,配置项参考:https://ld246.com/article/1549638745630#options
			}
		},
		initPriview() {
			let vditor = document.getElementById('vditor');
      			Vditor.preview(vditor,
        			// options,配置项参考:https://ld246.com/article/1549638745630#methods
			);

		// 点击图片放大预览
      		vditor.addEventListener('click', function (event) {
        		if (event.target.tagName === 'IMG') {
          			Vditor.previewImage(event.target, 'zh_CN', vditor.classList.contAIns('dark') ? 'dark' : 'classic')
        			}
      			})
		}
	}
}

开发文档

具体开发文档参考:
https://ld246.com/article/1549638745630#--%E7%AE%80%E4%BB%8B

原文链接:记忆旅途



Tags:markdown   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,不构成投资建议。投资者据此操作,风险自担。如有任何标注错误或版权侵犯请与我们联系,我们将及时更正、删除。
▌相关推荐
2023年全网最火的前端5大 markdown 解析器与编译器!
今天给大家带来的主题是盘点2023年全网最火的 markdown 解析器和编译器,话不多说,直接进入正题。1.Marked.js1.1 什么是marked.jsmarked.js是markdown解析器和编译器,其具有以...【详细内容】
2023-08-20  Search: markdown  点击:(273)  评论:(0)  加入收藏
网页的markdown怎么导出?手把手详细教学
网页的markdown怎么导出?如今markdown提供给人们一种便携式创建文本的形式,通过简易文本进行文档内容的创建和浏览,由于占用内存小,使用简便,而广受欢迎。随着社会的不断发展,mark...【详细内容】
2023-02-23  Search: markdown  点击:(197)  评论:(0)  加入收藏
这个markdown编辑器无敌了
前言Markdown 是一种轻量级标记语言,由于其具备简洁的语法和轻量化等优点,现在越来越多的内容网站用它来进行文档的编写,比如git的readme文档、腾讯文档等都支持markdown语法。...【详细内容】
2022-05-16  Search: markdown  点击:(543)  评论:(0)  加入收藏
markdown基本语法介绍
一.markdown是什么Markdown 是一种轻量级标记语言。使用标题、加粗、斜体和高亮等方式,对文本进行展示。具有着易读易写等特点。同时对图片、图表和数学均有支持。而且目前...【详细内容】
2022-05-16  Search: markdown  点击:(382)  评论:(0)  加入收藏
微信图文 Markdown 编辑器开源了
不知道逛逛GitHub 的读者有没有公众号的博主,或者你是不是也像我一样经常在公众号上面发一些东西。公众号的编辑器不支持 Markdown 语法,只能算是一个功能强大一点的富文本编...【详细内容】
2022-05-05  Search: markdown  点击:(428)  评论:(0)  加入收藏
Joplin-跨平台平开源免费Markdown笔记(替代印象笔记/可离线同步)
每个人的记忆力是有限的,在如今信息如此丰富的时代,我们都需要使用一些笔记软件来保存备忘和资料,否则时间长了你会慢慢地忘记很多东西。所以笔记软件是刚需,但每人的需求和习惯...【详细内容】
2022-02-11  Search: markdown  点击:(4107)  评论:(0)  加入收藏
用 Markdown 写作,该用什么编辑器?
来源:麻瓜编程本文约984字,建议阅读3分钟。本文介绍了10款高颜值又好用的Markdown编辑器。● Typorahttps://www.typora.io免费,支持 Windows、OS X 和、Linux。Typora 支持实...【详细内容】
2020-08-24  Search: markdown  点击:(479)  评论:(0)  加入收藏
Markdown基本语法详解
很多写作者都知道Markdown写作的巨大优点:专注于写作本身而不是排版。很多博客、内容平台(包括头条号)都支持Markdown写作语法了。今天我们就来了解一下Markdown。一、什么是Ma...【详细内容】
2020-07-12  Search: markdown  点击:(615)  评论:(0)  加入收藏
MySQL数据库表结构快速导出成MarkDown文档
1.前言作为一名技术人员,少不了接触数据库,那么当遇到一个旧项目数据库表比较多,怎么快速的导出表结构,形成文档方便后续跟进呢?今天我给大家安利一个好用的工具mysql_markdown。...【详细内容】
2020-06-11  Search: markdown  点击:(1170)  评论:(0)  加入收藏
程序员为什么要使用Markdown
为什么要学习markdown,因为markdown可以让你养成了记录的习惯。我自从使用了markdown之后,就喜欢了写文档,记录工作日志,记录周会,记录季度计划,记录学习目标,写各种设计文档。mark...【详细内容】
2020-05-16  Search: markdown  点击:(327)  评论:(0)  加入收藏
▌简易百科推荐
系统优化工具,Ultimate Windows Tweaker软件体验
电脑上的Windows优化工具年年都有,每年还会翻着花样地出现新东西,都不带重复的。每个人都可以上来折腾一番Windows...从这个角度来说,Windows系统还挺“稳定”的,经得起各种用户...【详细内容】
2024-04-10  果核剥壳    Tags:系统优化   点击:(4)  评论:(0)  加入收藏
Telegram怎么不显示在线?
在Telegram中,您可以通过进入“设置” -> “隐私与安全” -> “最后在线时间”,然后选择“没有人”或者自定义特定的人群,以隐藏自己的在线状态。这样设置后,其他用户将无法看到...【详细内容】
2024-04-04  HouseRelax    Tags:Telegram   点击:(8)  评论:(0)  加入收藏
谷歌 Gmail 新规生效:为遏制钓鱼 / 欺诈情况,日群发超 5000 封邮件账号需验证
IT之家 4 月 2 日消息,谷歌为了增强对垃圾邮件和网络钓鱼攻击的管控,今天宣布正式启用新措施:对于向 Gmail 邮箱账号日群发数量超过 5000 封的用户,需要其在域名中设置 SPF / DK...【详细内容】
2024-04-02    IT之家  Tags:Gmail   点击:(16)  评论:(0)  加入收藏
钉钉AI升级多模态:能根据图片识人、翻译、创作、多轮问答
新浪科技讯 3月28日午间消息,钉钉AI助理迎来升级,上线图片理解、文档速读、工作流等产品能力,探索多模态、长文本与RPA技术在AI应用的落地。基于阿里通义千问大模型,升级后的钉...【详细内容】
2024-03-28    新浪科技  Tags:钉钉   点击:(17)  评论:(0)  加入收藏
都2024年了,谁还在用QQ聊天啊?
你还在用 QQ 吗?之所以突然这么问,是因为前些天腾讯发了份热气腾腾的财报。随手翻了翻,发现 QQ 这个老企鹅,居然还有5.54 亿多人每个月都在坚持登录。虽说和辉煌时候没法比了,但...【详细内容】
2024-03-26    差评  Tags:QQ   点击:(11)  评论:(0)  加入收藏
腾讯QQ浏览器工具权益卡上线PC端,每月最低6元
IT之家 1 月 29 日消息,腾讯 QQ 浏览器此前在手机端上线工具权益卡,现将部分权益适用范围拓展至 PC 端,每月 10 元,连续包月为 6 元。开通后用户可以在 QQ 浏览器软件内享有由腾...【详细内容】
2024-01-29    IT之家  Tags:QQ浏览器   点击:(87)  评论:(0)  加入收藏
开源工具Ventoy更新:新增对FreeBSD 14.0的支持
近日,开源装机工具Ventoy发布了1.0.97版本的更新。本次更新的主要亮点是新增了对FreeBSD 14.0版本的支持,并修复了启动问题以及解决了几个Linux独有的bug等。同时,官方还修复了...【详细内容】
2024-01-25    中关村在线  Tags:Ventoy   点击:(42)  评论:(0)  加入收藏
微软Copilot Pro来了:个人用户也能在Word里用GPT-4,20美元/月
面向个人用户的微软Copilot会员版来了。一个月多交20刀(约合人民币142元),Microsoft 365个人版/家庭版用户就能在Word、Excel、PPT等Office全家桶中用上GPT-4。就像这样,不用在C...【详细内容】
2024-01-16    量子位  Tags:Copilot Pro   点击:(97)  评论:(0)  加入收藏
微软 Edge 浏览器支持双引擎同时搜索功能,便利与槽点并存
IT之家 1 月 15 日消息,微软广告和网络服务部门首席执行官 Mikhail Parakhin 近日透露了一个微软 Edge 浏览器的隐藏功能:双引擎同时搜索。顾名思义,该功能允许用户同时使用两...【详细内容】
2024-01-16    IT之家  Tags:Edge   点击:(65)  评论:(0)  加入收藏
11个面向设计师的必备AI工具
译者 | 布加迪审校 | 重楼在当今快速发展的设计领域,人工智能(AI)工具已成为不可或缺的创新催化剂。这些工具专门用于提高效率和创造力,从而重新定义传统的设计方法。AI正在彻底...【详细内容】
2024-01-09    51CTO  Tags:AI工具   点击:(109)  评论:(0)  加入收藏
站内最新
站内热门
站内头条