Nuxt integrates the mavon-editor rich text editor

1: Install

cnpm install mavon-editor --save

2. Create vueMarkdown.js in plugins

import Vue from 'vue'
import mavonEditor from 'mavon-editor'
import "mavon-editor/dist/css/index.css"
Vue.use(mavonEditor)

3. Introduce in nuxt.config.js

  plugins: [
    '~/plugins/vueMarkdown',
  ],

4 Editing with mavon-editor

<template>
  <client-only>
    <mavon-editor
      ref="md"
      placeholder="请输入文档内容..."
      :boxShadow="false"
      style="z-index:1;border: 1px solid #d9d9d9;height:50vh"
      v-model="content"
      :toolbars="toolbars"
    />
  </client-only>
</template>

<script>
export default {
  name: "home",
  components: {},
  data() {
    return {
      content: "",
      toolbars: {
        bold: true, // 粗体
        italic: true, // 斜体
        header: true, // 标题
        underline: true, // 下划线
        strikethrough: true, // 中划线
        mark: true, // 标记
        superscript: true, // 上角标
        subscript: true, // 下角标
        quote: true, // 引用
        ol: true, // 有序列表
        ul: true, // 无序列表
        link: true, // 链接
        imagelink: true, // 图片链接
        code: true, // code
        table: true, // 表格
        fullscreen: true, // 全屏编辑
        readmodel: true, // 沉浸式阅读
        htmlcode: true, // 展示html源码
        help: true, // 帮助
        /* 1.3.5 */
        undo: true, // 上一步
        redo: true, // 下一步
        trash: true, // 清空
        save: false, // 保存（触发events中的save事件）
        /* 1.4.2 */
        navigation: true, // 导航目录
        /* 2.1.8 */
        alignleft: true, // 左对齐
        aligncenter: true, // 居中
        alignright: true, // 右对齐
        /* 2.2.1 */
        subfield: true, // 单双栏模式
        preview: true // 预览
      }
    };
  },
  methods: {
    // 上传图片方法
    $imgAdd(pos, $file) {
      console.log(pos, $file);
    }
  }
};
</script>

Pay attention to the client-only tag here, because nuxt.js renders pages on the server side, and there is no window or document on the server side. If you need to use window or document when rendering, document is not defined or window is not will appear. Both defined client-only and no-ssr tags can be written below

no-ssr

 <no-ssr>
    <mavon-editor :autofocus="false" ref="md" v-model="mdContent" @change="getMdHtml"
                  @imgAdd="uploadContentImg" @imgDel="delContentImg"/>
  </no-ssr>

client-only

 <client-only>
     <mavon-editor :autofocus="false" ref="md" v-model="mdContent" @change="getMdHtml"
                   @imgAdd="uploadContentImg" @imgDel="delContentImg" />
 </client-only>

{{o.name}}

{{m.name}}