Javascriptでマークダウンエディタを使う ついでにNuxt3でもやる

Javascriptでマークダウンエディタ的なものを使うことができるようなので、作ってみようと思います。
今回はeasy-markdown-editor(EasyMDE)というライブラリを使用します。

選定理由はなんとなく。強いて言えば調査中に見つけた他のライブラリは最終アップデートから数年たっているものばかりだったからです(このへん見ました)。

まずはJavaScriptで導入、そのあとNuxt3でも扱ってみます。

環境

Node 16.17.0
Nuxt 3.0.0

JavaScriptでやる

EasyMDEをCDNで使います。

<link rel="stylesheet" href="https://unpkg.com/easymde/dist/easymde.min.css">
<script src="https://unpkg.com/easymde/dist/easymde.min.js"></script>

EasyMDEをtextareaにロードします。

<textarea id="mde-area"></textarea>
<script>
const easyMDE = new EasyMDE({ 
  element: document.getElementById("mde-area"),
});
</script>

こんな感じになります(中のテキストは自分で書いています)

ツールバーのカスタマイズ

ツールバーをカスタマイズすることもできるようです。

この部分です↓

toolbarを設定してやることで、このツールバーのアイコン配置を変えることができます。
Toolbar iconsにあるアイコンの名前を使用します。

<script>
const easyMDE = new EasyMDE({ 
  element: document.getElementById("mde-area"),
  // 区切り線は "|" で表します
  toolbar: ["bold", "heading", "|", "image"],
});
</script>

上記の書き方だとこんな感じ

アイコンやテキストも指定することができます。

<script>
const easyMDE = new EasyMDE({ 
  element: document.getElementById("mde-area"),
  toolbar: [
    "bold",
    "heading",
    "|",
    {
      // ツールバーアイコンの名前
      name: "quote",
      // クリックした際の動作
      action: EasyMDE.toggleBlockquote,
      // fontawesomeを参照する
      className: "fa fa-quote-left",
      title: "Quote"
    },
  ],
});
</script>

Nuxt3でもやる

まずはプロジェクトを作成して、EasyMDEをインストールします。

npx nuxi init nuxt-easymde
cd nuxt-easymde
npm install
npm install easymde

最初、scriptブロック内で直接記述するとnavigator is not definedみたいなエラーが出てしました。
どうやらonMountedの中で読み込む必要があるようです。

app.vueに直接書いていきます。

<script setup lang="ts">
import type EasyMde from "easymde";

let mde: InstanceType<typeof EasyMde> | null = null;
const content = ref("")
const contentArea = ref();

onMounted(async () => {
  const EasyMde = (await import("easymde")).default;
  mde = new EasyMde({
    element: contentArea.value.$el,
  });
  mde.codemirror.on("change", () => {
    if (mde) {
      content.value = mde.value();
    }
  });
});
</script>

<template>
  <div>
    <textarea
      ref="contentArea"
      v-model="content"
      rows="5"
      placeholder="markdown形式で説明を記述できます"
      maxlength="300"
    ></textarea>
  </div>
</template>

こんな感じになります
プレースホルダのも設定も上手くいっていますね

おわり

興味があったら使ってみてください。