【Milkdown】编辑器集成使用指南

前言

最近因业务需要集成一款所见即所得的Markdown编辑器，在谷歌搜寻一番后看到了Milkdown，当时一看到界面就被它的颜值吸引到了，在体验到他便捷的语法后当即决定使用这款编辑器。
但不料在使用过程中却并没有那么一帆风顺，文档看的是一头雾水，国内外搜相关的教程也寥寥无几，99%基本都只是简单介绍，而且还都是同一篇帖子粘来粘去😂
👉再见 Typora！这款 Markdown 神器绝了！👈

---

踩坑过程及使用示例

这里以 Vue 2 为例，Vue 3 及其他框架使用方法类似，参照 Vue 3.x 集成示例 配置即可

1. 简易初始化

进入集成示例你会看到这么一句话：创建一个组件十分简单。

<template>
    <div ref="editor"></div>
</template>

<script>
    import {
      defaultValueCtx, Editor, rootCtx } from '@milkdown/core';
    import {
      nord } from '@milkdown/theme-nord';
    import {
      commonmark } from '@milkdown/preset-commonmark';
    export default {
     
        name: 'Editor',
        mounted() {
     
            Editor.make()
                .config((ctx) => {
     
                    ctx.set(rootCtx, this.$refs.editor);
                    ctx.set(defaultValueCtx, "# Hello Milkdown💗");
                })
                .use(nord)
                .use(commonmark)
                .create();
        },
    };
</script>

<style></style>

在引入插件和一通熟练的CV后，你会发现界面上除了几个单薄的文字外毛都没有——是的，所有功能插件都需要你自己单独安装，当我想要尝试把顶部的工具栏搞进来时，这个时候 第一个坑 来了，你会发现文档的 插件目录 中并没有我们想要的menu，一番搜寻后在Github仓库中才找到了该插件。

npm i @milkdown/plugin-menu

2. 完全体配置示例

效果参考 官网示例

import {
    defaultValueCtx, Editor, editorViewOptionsCtx, rootCtx } from '@milkdown/core';
import {
    clipboard } from '@milkdown/plugin-clipboard';
import {
    cursor } from '@milkdown/plugin-cursor';
import {
    diagram } from '@milkdown/plugin-diagram';
import {
    emoji } from '@milkdown/plugin-emoji';
import {
    history } from '@milkdown/plugin-history';
import {
    indent } from '@milkdown/plugin-indent';
import {
    listener, listenerCtx } from '@milkdown/plugin-listener';
import {
    math } from '@milkdown/plugin-math';
import {
    menu } from '@milkdown/plugin-menu';
import {
    prism } from '@milkdown/plugin-prism';
import {
    slash } from '@milkdown/plugin-slash';
import {
    tooltip } from '@milkdown/plugin-tooltip';
import {
    upload } from '@milkdown/plugin-upload';
import {
    gfm } from '@milkdown/preset-gfm';
import {
    nord } from '@milkdown/theme-nord';

export const createEditor = (
    root: HTMLElement | null,
    defaultValue: string,
    readOnly: boolean | undefined,
) => {
   
    const editor = Editor.make()
        .config((ctx) => {
   
            ctx.set(rootCtx, root);
            ctx.set(defaultValueCtx, defaultValue);
            ctx.set(editorViewOptionsCtx, {
    editable: () => !readOnly });
        })
        .use(nord)
        .use(gfm)
        .use(listener)
        .use(clipboard)
        .use(history)
        .use(cursor