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

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

https://github.com/Ionaru/easy-markdown-editor

選定理由はなんとなく。強いて言えば調査中に見つけた他のライブラリは最終アップデートから数年たっているものばかりだったからです([このへん見ました](https://npmtrends.com/easymde-vs-react-mde-vs-simplemde-vs-tui-editor))。  

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

## 環境

Node 16.17.0  
Nuxt 3.0.0  

## JavaScriptでやる

EasyMDEをCDNで使います。  

```html
<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にロードします。  

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

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

![スクリーンショット 2023-03-26 155754.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2780581/79471085-509c-ecdb-6284-45c39865869d.png)


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

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

この部分です↓  
![スクリーンショット 2023-03-26 160007.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2780581/2e2268d9-921c-4aec-ff66-0121c6225f8b.png)

`toolbar`を設定してやることで、このツールバーのアイコン配置を変えることができます。  
[Toolbar icons](https://github.com/Ionaru/easy-markdown-editor#toolbar-icons)にあるアイコンの名前を使用します。  

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

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

![スクリーンショット 2023-03-27 210621.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2780581/99233344-0db4-7bfc-b5a3-3111f5dc84a1.png)

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

```html
<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をインストールします。  

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

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

https://debug-life.net/entry/4645

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

```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>
```

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

![スクリーンショット 2023-03-27 152532.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2780581/8510c060-eea4-8589-a11b-a42bc71c9265.png)

## おわり

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