呀！这款markdown编辑器我太中意啦！

2024-01-01 17:30
文章标签 编辑器 markdown 这款 中意

本文主要是介绍呀！这款markdown编辑器我太中意啦！，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

📖阅读本文，您将收获

  • 了解到优秀的markdown产品wolai、notion
  • markdown编辑器选型，多一个选择项
  • 学会如何使用Mildown

一、markdown编辑器的槽点

作为研发人员，我不相信您编写文档没有使用过markdown；如果使用markdown编写文档，那肯定是离不开一款markdown编辑器。

但是呢，市面上markdown编辑器又有蛮多槽点的：

  • 大部分开源编辑器，它是编辑区与预览区分离

    上图为掘金平台使用的编辑器，编辑区与预览区分离老碍眼了。古板，我觉得两者结合做到所见即所得会更好。

  • 收费

    做到所见即所得的markdown编辑器，当然有，例如市面上的Typora、wolai、notion。

    这三款编辑器产品，用过的人都说好，强烈推荐。

    它们有个共同的问题：商业化，商业化的产品目的就是搞钱，所以呢，它们有部分高级功能是需要付费的。

    但对大部分无特殊功能要求的人，它们已经够用了。

  • 不开源

    像Typora、wolai、notion产品，它们的源代码是没有开放出来的，我们想在项目中集成它们是不可能的。

二、新宠儿：Milkdown

GitHub Star数: 6k+

Milkdown是什么?

官方自我介绍：

Milkdown 是一个轻量但强大的 WYSIWYG（所见即所得）的 markdown 编辑器

为什么选择Milkdown?

官方理由：

  • 为开发者提供一个免费开源解决方案
  • 不同于 Notion 和 Typora 等商用软件，Milkdown是开源且永久免费的
  • 值得信赖，有强大的社区支撑

在线体验：milkdown.dev/zh-hans/onl…

GitHub: github.com/Saul-Mirone…

2.1 安装并运行

Mildown以插件驱动，它由核心模块、官方插件组成。

安装核心模块：

npm i @milkdown/core @milkdown/transformer @milkdown/prose @milkdown/ctx
复制代码

创建Editor实例：

import { Editor } from "@milkdown/core"
Editor.make().create()
复制代码

执行，两行代码就报错啦！！

  • 错误1:Uncaught (in promise) Timing InitReady timeout.

    原因是缺少主题，再安装一个主题包：

npm i  @milkdown/theme-nord 
复制代码
import { Editor } from "@milkdown/core"
import { nord } from "@milkdown/theme-nord"
Editor.make().use(nord).create()
复制代码
再次运行，紧接着第二个报错出现。
复制代码

  • 错误2:Uncaught (in promise) RangeError: Schema is missing its top node type ('doc')

    错误大概意思是缺少doc节点，这是原因缺少markdown预设指令插件。

    官方提供了两款插件：@milkdown/preset-commonmark、@milkdown/preset-gfm，推荐@milkdown/preset-gfm。

    同样的，下载使用：

import { Editor } from "@milkdown/core"
import { nord } from "@milkdown/theme-nord"
import {gfm} from "@milkdown/preset-gfm"
Editor.make().use(nord).use(gfm).create()
复制代码

至此，Milkdown成功运行。接下来，只需要按需添加插件。

2.2 顶部工具栏插件

npm i @milkdown/plugin-menu
复制代码

还是链式调用use ,注册插件。

import { Editor } from "@milkdown/core"
import { nord } from "@milkdown/theme-nord"
import { gfm } from "@milkdown/preset-gfm"
// 工具栏
import { menu } from '@milkdown/plugin-menu';
Editor.make().use(nord).use(gfm).use(menu).create()
复制代码

但得到的是一堆英文单词：

功能是存在的，但展示有问题，需要把一堆英文单词替换成字体图标。

import { Editor ,ThemeIcon} from "@milkdown/core"
import { nord } from "@milkdown/theme-nord"
import { gfm } from "@milkdown/preset-gfm"
// 工具栏
import { menu } from '@milkdown/plugin-menu';
import { getIcon } from "./icon"
Editor.make().use(nord.override((emotion, manager) => {manager.set(ThemeIcon, (icon) => {if (!icon) return;return getIcon(icon);});})).use(gfm).use(menu).create()
复制代码

针对@milkdown/theme-nord 设置，添加一个getIcon 方法。

icon 文件内容过多此处不粘贴，请移动GitHub阅读：github.com/CatsAndMice…。

另外需要加载字体图标资源：

 <html>//...<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" /></html>
复制代码

2.3 复制粘贴插件

import { clipboard } from '@milkdown/plugin-clipboard';
复制代码
//...
import { clipboard } from '@milkdown/plugin-clipboard';
Editor.make().use(nord.override((emotion, manager) => {manager.set(ThemeIcon, (icon) => {if (!icon) return;return getIcon(icon);});})).use(gfm).use(menu).use(clipboard).create()
复制代码

2.4 选择工具栏插件

npm i @milkdown/plugin-tooltip
复制代码

设置工具栏选中后置顶：

//...
import { tooltipPlugin, tooltip } from '@milkdown/plugin-tooltip';
Editor.make().use(nord.override((emotion, manager) => {manager.set(ThemeIcon, (icon) => {if (!icon) return;return getIcon(icon);});})).use(gfm).use(menu)//新增.use(tooltip.configure(tooltipPlugin, {top: true,})).create()
复制代码

2.5 支持/ 命令插件

npm i @milkdown/plugin-slash
复制代码

输入/，自定义添加面板功能配置：

import { defaultValueCtx, Editor, rootCtx, ThemeIcon, themeManagerCtx } from "@milkdown/core";
//...
import {slash,createDropdownItem,defaultActions,slashPlugin} from '@milkdown/plugin-slash';Editor.make()// 新增.use(slash.configure(slashPlugin, {config: (ctx) => {return ({ content, isTopLevel }) => {if (!isTopLevel) return null;if (!content) {return { placeholder: "键入文字或'/'选择" };}const mapActions = (action) => {const { id = "" } = action;switch (id) {case "h1":action.dom = createDropdownItem(ctx.get(themeManagerCtx),"标题1","h1");return action;//...default:return action;}};if (content.startsWith("/")) {return content === "/"? {placeholder: " ",actions: defaultActions(ctx).map(mapActions)}: {actions: defaultActions(ctx, content).map(mapActions)};}return null;};}}))
复制代码

2.6 设置默认内容及添加事件插件

设置默认内容是核心模块提供的功能，不必安装插件。

import { defaultValueCtx, Editor, rootCtx, ThemeIcon, themeManagerCtx } from "@milkdown/core";
//...Editor.make().config((ctx) => {ctx.set(rootCtx, document.querySelector('#app'));ctx.set(defaultValueCtx, "## 点赞+评论+关注=学会");})//...
复制代码

添加事件:

npm i @milkdown/plugin-listener
复制代码

@milkdown/plugin-listener分别对应七个生命周期函数：

事件名事件描述
beforeMount挂载前
mounted挂载后
updated状态更新
markdownUpdatedmarkdown 更新
blur失焦
focus聚焦
destroy销毁
//...
import { listenerCtx, listener } from "@milkdown/plugin-listener"Editor.make().config((ctx) => {ctx.set(rootCtx, document.querySelector('#app'));ctx.set(defaultValueCtx, "## 点赞+评论+关注=学会");//新增ctx.get(listenerCtx).markdownUpdated((ctx, markdown, prevMarkdown) => {console.log(markdown);});})//...
复制代码

借助上述事件，可以自定义获取内容等功能。

Milkdown官方还有其他功能插件，例如：图片上传等，文章不逐一列举了。

文章演示代码已开放GitHub: github.com/CatsAndMice…

三、结束语

原创不易！如果我的文章对你有帮助，点赞+评论+关注就是对我的最大支持^_^。

这篇关于呀！这款markdown编辑器我太中意啦！的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/560000。

相关文章

Prompt - 将图片的表格转换成Markdown

Prompt - 将图片的表格转换成Markdown

Prompt - 将图片的表格转换成Markdown 0. 引言1. 提示词2. 原始版本 0. 引言 最近尝试将图片中的表格转换成Markdown格式，需要不断条件和优化提示词。记录一下调整好的提示词，以后在继续优化迭代。 1. 提示词 英文版本： You are an AI assistant tasked with extracting the content of
阅读更多...
【H2O2|全栈】Markdown | Md 笔记到底如何使用？【前端 · HTML前置知识】

【H2O2|全栈】Markdown | Md 笔记到底如何使用？【前端 · HTML前置知识】

Markdown的一些杂谈 目录 Markdown的一些杂谈 前言 准备工作 认识.Md文件 为什么使用Md？ 怎么使用Md？ ​编辑 怎么看别人给我的Md文件？ Md文件命令 切换模式 粗体、倾斜、下划线、删除线和荧光标记 分级标题 水平线 引用 无序和有序列表 ​编辑 任务清单 插入链接和图片 内嵌代码和代码块 表格 公式 其他 源代码 预
阅读更多...
【Markdown】如何在Markdown中合并单元格

【Markdown】如何在Markdown中合并单元格

Markdown语法本身不包含复杂表格的插入，但是可以使用html语法来实现。 水平单元格的合并：基于colspan属性，即使一个单元格占多列的空间纵向单元格的合并：基于rowspan属性，即使一个单元格占多行的空间 要想MarkDown中插入复杂表格时，可以先在word或excel中把表格写好，然后在如下网站进行转化为标记对形式： http://pressbin.com/tools/exc
阅读更多...
Linux下vi编辑器命令

Linux下vi编辑器命令

UNIX下的编辑器有ex,sed和vi等，其中，使用最为广泛的是vi。vi是一个创建、修改文本和数据对象的程序。他和字处理程序和桌面出版程序的区别是他只处理 plain ASCII 文本，没有格式信息。 vi 编辑器有三种处理文本的基本模式： ●一般模式：以vi处理文件时，一进入该文件就是一般模式了。在这个模式中，您可以使用上下左右按键来移动光标，可以使用“删除字符”或“删除整行”来处理文
阅读更多...
pdf文件编辑器有哪些？分享适合新手用的5个PDF编辑器（解锁教程）

pdf文件编辑器有哪些？分享适合新手用的5个PDF编辑器（解锁教程）

pdf是一种通用文件格式，也是一种夸操作系统平台的文件格式。 好用的PDF文件编辑器可以让您更改和添加文本、编辑图像、添加图形、签署签名、填写表单数据等。下面整理了关于pdf文件编辑方法介绍，以及一些好用的pdf编辑器，有需要的可以了解下。 一、pdf编辑软件 pdf编辑器1：金舟PDF编辑器——专业的pdf编辑 专业的pdf文件编辑工具，适用于Windows7以上的操作系统。能够完成
阅读更多...
【Markdown】输入空格方式

【Markdown】输入空格方式

文章目录 1.nbsp2. ensp3. emsp4.thinsp5. zwnj6. zwj7. 其它 1.nbsp &nbsp;为“不换行空格”，全称“No-Break Space”，它是最常见和我们使用最多的空格，大多数的人可能只接触了 ，它是按下space键产生的空格。在HTML中，如果你用空格键产生此空格，空格是不会累加的（只算1个）。要使用html实体表示才可累加，该
阅读更多...
好用的 Markdown 编辑器组件

好用的 Markdown 编辑器组件

ByteMD bytedance/bytemd: ByteMD v1 repository (github.com) 这里由于我的项目是 Next，所以安装 @bytemd/react， 阅读官方文档，执行命令来安装编辑器主体、以及 gfm（表格支持）插件、highlight 代码高亮插件： npm i @bytemd/reactnpm i @bytemd/plugin-highlight
阅读更多...
2-1 opencv实战进阶系列 阈值编辑器

2-1 opencv实战进阶系列 阈值编辑器

目录 一、不说废话，先上现象  二、前言 三、方法详解 四、贴出完整代码 一、不说废话，先上现象  二、前言 对图像的处理中，设置合适的掩膜、寻找多边形、颜色追踪等方法都需要预先设置好颜色的上阈值和下阈值，来从原图中分割出我们需要的部分。 然而，opencv并没有像openmv那样方便的阈值编辑器对原图进行处理，所以本文提供一个方便的方法，可以同时处
阅读更多...
vue2+ueditor集成秀米编辑器

vue2+ueditor集成秀米编辑器

一、百度富文本编辑器 1.首先下载 百度富文本编辑器    下载地址：GitHub - fex-team/ueditor: rich text 富文本编辑器 2.把下载好的文件整理好  放在图片目录下 3. 安装插件vue-ueditor-wrap npm install vue-ueditor-wrap 4.在你所需要展示的页面 引入vue-ueditor-wrap 此时
阅读更多...
DevExpress WinForms v24.1新版亮点：功能区、数据编辑器全新升级

DevExpress WinForms v24.1新版亮点：功能区、数据编辑器全新升级

DevExpress WinForms拥有180+组件和UI库，能为Windows Forms平台创建具有影响力的业务解决方案。DevExpress WinForms能完美构建流畅、美观且易于使用的应用程序，无论是Office风格的界面，还是分析处理大批量的业务数据，它都能轻松胜任！ DevExpress WinForms控件2024年第一个重大版本——v24.1全新发布，此版本对功能区、状态栏
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2