# v3-markdown-editor

**Repository Path**: suwenhao/v3-markdown-editor

## Basic Information

- **Project Name**: v3-markdown-editor
- **Description**: vue3.0的一个markdown编辑器和预览
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-04-28
- **Last Updated**: 2022-11-13

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# v3-markdown-editor
vue3.0的一个markdown编辑器

# 安装
```
npm run v3-markdown-editor
```

# 使用
- 在main.js中导入
```
import { createApp } from "vue";
import App from "./App.vue";

import V3MarkdownEditor from "v3-markdown-editor";
// css
import "v3-markdown-editor/src/styles/index.scss";

const app = createApp(App);
app.use(V3MarkdownEditor);

```

- 在组件中使用
```
 <v3-markdown-editor :locale="locale" :content="content" @uploadImage="uploadImage"/>

 //上传图片
 const uploadImage = async (files, callback) => {
  let file = files[0];
  let param = new FormData();
  param.append("file", file);
  try {
    let res = await uploadfile(param);
    if (res.data?.code == 1) {
      // 把返回的图片地址传入callback中
      callback(res.data.image);
    }
  } catch (error) {
    console.log(error);
  }
}

# API 文档
```
|name 名称|type 类型|default 默认值|describe 描述|
|---|---|---|---|
|locale|String|zh-CN|暂时只支持英文（en-US）和中文（zh-CN）   |
|content|String|默认为空|输入的内容|
|toolbar|Object|如下例|工具栏|


## 工具栏
```
toolbar = {
  // 左边
  bold: true, // 粗体
  italic: true, // 斜体
  header: true, // 标题
  underline: true, // 下滑线
  strikethrough: true, // 删除线
  mark: true, // 标记
  superscript: true, // 上角线
  subscript: true, // 下角线
  alignleft: true, // 居左
  aligncenter: true, // 居中
  alignright: true, // 居右
  quote: true, // 段落引用
  ol: true, // 有序列表
  ul: true, // 无序列表
  link: true, // 链接
  imagelink: true, // 图片//网络链接或上传
  code: true, // 代码块
  table: true, // 表格
  clear: true, // 清除
  // 右边
  preview: true, // 预览
  fullEdit: true, // 全屏编辑
  fullScreen: true, // 网页全屏
  html: true, // 查看html
}
```
# events 事件绑定

|name 方法名|params 参数|describe 描述|
|---|---|---|
|uploadImage|File:imgfile,Function:callback|File是选择的文件的files对象，然后回调函数是必须的因为要写入图片地址，callback(url)，把地址放到回调中就行|