Vue-BL-Markdown-Editor 使用教程

Vue-BL-Markdown-Editor 使用教程

1. 项目介绍

Vue-BL-Markdown-Editor 是一个基于 markdown-it 的高度可扩展的 Vue 编辑器组件。它允许用户通过插槽自定义工具栏，动态注册组件，并插入工具栏指定位置。该组件的优势在于可以完全自定义工具栏功能，并且支持 markdown-it 插件调用。

2. 项目快速启动

安装

首先，使用 npm 安装 vue-bl-markdown-editor：

npm install vue-bl-markdown-editor --save

引入

在 main.js 中全局注册组件：

import Vue from 'vue';
import MarkDownEditor from 'vue-bl-markdown-editor';
import 'vue-bl-markdown-editor/dist/css/main.css';

Vue.use(MarkDownEditor);

new Vue({
  el: '#app',
  data() {
    return {
      value: ''
    };
  }
});

配置要求

在 index.html 中引入必要的 CSS 文件：

<link href="//cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link href="//cdn.bootcss.com/highlight.js/9.14.1/styles/atom-one-dark.min.css" rel="stylesheet">
<link href="//cdn.bootcss.com/github-markdown-css/3.0.1/github-markdown.min.css" rel="stylesheet">

基本使用

在 Vue 组件中使用 MarkDownEditor：

<template>
  <div>
    <MarkDownEditor v-model="content" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      content: ''
    };
  }
};
</script>

3. 应用案例和最佳实践

自定义工具栏

通过 registerToolBarComponent 方法动态注册自定义工具栏组件：

let editor = this.$refs.editor;
let toolBar1 = editor.registerToolBarComponent('demo1', require('./Example1.vue'));
editor.addToolBar(toolBar1);

配置工具栏

通过 config 属性配置工具栏：

config: {
  emojis: {
    more: [
      { name: 'test', datas: ['1', '2'] }
    ],
    isCover: true
  },
  picture: {
    uploadCallback: (file, from) => {
      return new Promise(resolve => {
        resolve({ name: '', url: '' });
      });
    },
    resolving: true
  }
}

4. 典型生态项目

Markdown-It

Vue-BL-Markdown-Editor 基于 markdown-it，因此可以轻松集成 markdown-it 的各种插件，如表格、代码高亮、任务列表等。

FontAwesome

项目中使用了 FontAwesome 字体图标库，可以通过配置自定义图标。

Highlight.js

代码块的样式由 Highlight.js 提供，支持多种代码高亮主题。

通过以上步骤，您可以快速上手并使用 Vue-BL-Markdown-Editor 构建功能强大的 Markdown 编辑器。