The WYSIWYG Markdown Editor Framework 【milkdown】

はじめに

WYSIWYG マークダウンエディタ「Milkdown」を svelteで試してみたので、軽くですが紹介できたらと思います。

mikldownの紹介

Milkdownは、WYSIWYGマークダウンエディタの一つで、TypeScriptで書かれたオープンソースのエディタです。 リポジトリ GitHub - Milkdown/milkdown: 🍼 Plugin driven WYSIWYG markdown editor framework.

🍼 Plugin driven WYSIWYG markdown editor framework. - GitHub - Milkdown/milkdown: 🍼 Plugin driven WYSIWYG markdown editor framework. ドキュメント Milkdown

The plugin based WSIWYG markdown editor framework.

1. 必要なものをインストールする

下記の3つをyarn add してinstallしてください (npm でも可)

$ yarn add @milkdown/core

$ yarn add @milkdown/preset-commonmark

$ yarn add @milkdown/theme-nord

インストールできたらscriptの中でimport

import { Editor, rootCtx } from '@milkdown/core';
import { commonmark } from '@milkdown/preset-commonmark';
import { nord } from '@milkdown/theme-nord';

2. editorを挿入するdomを生成

空のdomを生成して変数に代入しておく ※initializeEditorについては次の工程で説明します

  let editorElement = null;
  
  $: {
    editorElement;
    if (editorElement) {
      initializeEditor(editorElement);
    }
  }

<div bind:this={editorElement}></div>

3. editorインスタンス生成

先ほど生成したdomをsetに渡せば完成です！

 const initializeEditor = (element) => {
    Editor.make()
      .config((ctx) => {
      ctx.set(rootCtx, element);
      })
      .config(nord)
      .use(commonmark)
      .create();
  };

完成

少しスタイルは異なりますが、完成するとこんな感じになります！

最後に

上記は、生成するところまでですが、プラグインでmenuやtooltipなどもありますので是非調べて追加してみてください！