编辑器的使用

一、Markdown编辑器

第一步： 安装Markdown插件

npm install mavon-editor --save

第二步：调用插件

<template>
  <div>
    <mavon-editor></mavon-editor>
  </div>
</template>

<script>
import { mavonEditor } from "mavon-editor";
import "mavon-editor/dist/css/index.css";
export default {
  name: "Markdown",
  components: {
    mavonEditor
  }
};
</script>

我们只需要在我们需要使用Markdown的页面引入插件，如果使用页面比较多的话，建议全局引入。这里我们仅在Markdown页面引入。

第三步：运行项目，查看效果

npm run serve

如图

 二、wangeditor   VUE3的

<template>
    <div style="margin-top:100px">
     <div class="editor" name="editor" id="editor" ref="editor"></div>
    </div>
</template>

<script>
import EWangEditor from "wangeditor"

import { onMounted } from 'vue'

export default {
  setup() {

    onMounted(() => {
        var editor = new EWangEditor("#editor")
        editor.config.uploadImgShowBase64 = true
  
        var menuItem= [
              "head",
              "bold",
              "fontSize",
              "fontName",
              "italic",
              "underline",
              "indent",
              "lineHeight",
              "foreColor",
              "backColor",
              "link",
              "list",
              "justify",
              "image",
              "video"
            ];
            
        editor.config.menus = [...menuItem]; /* 自定义系统菜单 */
        editor.config.onchangeTimeout = 400; /* 配置触发 onchange 的时间频率，默认为 200ms */
        editor.config.customAlert = err => {
          console.log(err);
        };



        // 配置颜色（文字颜色、背景色）
        editor.config.colors = [
            '#000000',
            '#eeece0',
            '#1c487f',
            '#4d80bf'
        ];

        // 配置字体
        editor.config.fontNames = [
            '黑体',
            '仿宋',
            '楷体',
            '标楷体',
            '华文仿宋',
            '华文楷体',
            '宋体',
            '微软雅黑'
        ]



        editor.create();

        console.log("dsad");
    })

    return {  
    };
  },
};
</script>

<style>

</style>