Vue.js / Nuxt.js

【Nuxt.js / mavon-editor】マークダウンエディタ導入

ふぐ

Nuxt.jsのプロジェクトで
マークダウン記法が利用できるエディタを作成したかったので
mavon-editorを入れて実装してみた

mavon-editorを使用

配布サイトはコチラ

インストール

npm install mavon-editor --save

pluginsにファイル追加

pluginsディレクトリの中にvue-mavon-editor.jsファイルを作成

  • plugins/vue-mavon-editor.js
import Vue from 'vue';
import mavonEditor from 'mavon-editor';
import 'mavon-editor/dist/css/index.css';

Vue.use(mavonEditor);

nuxt.config.jsに設定追加

  • nuxt.config.jsのpluginsにvue-mavon-editorを追加
 plugins: [
    { src: '@/plugins/vue-mavon-editor', ssr: false }, // ⭐️ 追加
  ],

使ってみる

  • MarkdownEditor.vue
<template>
  <div class="markdown-editor">
    <no-ssr>
      <mavon-editor
        :toolbars="markdownOption"
        language="ja"
        v-model="model"
      />
    </no-ssr>
  </div>
</template>

<script>
  export default {
    props: {
      model: {
        type: Object | null,
        default: null,
      }
    },
    data() {
      return {
        markdownOption: {
          bold: true,
          italic: true,
          header: true,
          underline: true,
          strikethrough: true,
          mark: true,
          quote: true,
          ol: true,
          ul: true,
          link: true,
          imagelink: true,
          code: true,
          table: true,
          fullscreen: true,
          htmlcode: true,
        },
      };
    },
  };
</script>

<style scoped>
  .markdown-editor {
    width: 100%;
    height: 100%;
  }
</style>
  • 結果

\ 案件のご依頼・ご相談はこちらから /