# mteditor

> MTEditor超轻量Vue富文本编辑器，使用方式更简单，更符合你的习惯

Latest version **2.2.9** (published 2024-06-28) · ISC license · 0 weekly downloads

## Install

```sh
npm install mteditor
pnpm add mteditor
yarn add mteditor
bun add mteditor
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.2.9 |
| Published | 2024-06-28 |
| First published | 2024-05-21 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 151.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |

## Links

- npm: https://www.npmjs.com/package/mteditor
- Repository: https://gitee.com/mengtuo/mteditor
- npm.io page: https://npm.io/package/mteditor

## Recent versions

- 2.2.9 (latest) — 2024-06-28
- 2.2.8 — 2024-06-24
- 2.2.7 — 2024-06-22
- 2.2.6 — 2024-06-22
- 2.2.5 — 2024-06-22
- 2.2.4 — 2024-06-20
- 2.2.3 — 2024-05-21

## README

# MTEditor

MTEditor超轻量级Vue富文本编辑器，使用方式更符合你的习惯
1. 大小只有 160K
1. 图片功能，
    - 本地图片，
    - 网路图片
    - 上传图片到自己的服务器，
    - 右键调整图片在富文本中的百分比
2. 表格功能
    - 快速新建表格，可以通过右键对表格进行行列操作，例如新增行，删除行，以及删除整个表格。
    - 表格的列是等宽的，

# 维护
单兵作战，一个富文本也没太多东西需要维护的。如果实在想加一些自定义功能，源码应该也容易看得懂。
如果有疑问可以提 issue 或者加 qq群：519967151

# 属性
属性名|描述|示例
---|---|---
height| 富文本高度| 500px
width | 富文本宽度| 500px
config | 工具栏配置 | 默认可以不设置，具体设置看以下config
# 函数

函数名|描述|
---|:---:|
uploadMethod| 图片上传的函数,详情请看示例

# 头部配置,可按需分配
```json
    {
        "标题": { "command": "h", "icon": "fa fa-header", "title": "标题", "popup": true, 'component': 'headerList' },
        "加粗": { "command": "bold", "icon": "fa fa-bold", "title": "加粗" },
        "斜体": { "command": "italic", "icon": "fa fa-italic", "title": "斜体" },
        "字体": { "command": "fontSize", "icon": "fa fa-font", "title": "字体", "popup": true, 'component': 'fontList' },
        "下划线": { "command": "underline", "icon": "fa fa-underline", "title": "下划线" },
        "删除线": { "command": "strikethrough", "icon": "fa fa-strikethrough", "title": "删除线" },
        "居左": { "command": "justifyLeft", "icon": "fa fa-align-left", "title": "居左" },
        "居中": { "command": "justifyCenter", "icon": "fa fa-align-center", "title": "居中" },
        "居右": { "command": "justifyRight", "icon": "fa fa-align-right", "title": "居右" },
        "两侧": { "command": "justifyFull", "icon": "fa fa-align-justify", "title": "两侧" },
        "无序列表": { "command": "InsertUnorderedList", "icon": "fa fa-list-ul", "title": "无序列表" },
        "有序列表": { "command": "insertOrderedList", "icon": "fa fa-list-ol", "title": "有序列表" },
        "上标": { "command": "superscript", "icon": "fa fa-superscript", "title": "上标" },
        "下标": { "command": "subscript", "icon": "fa fa-subscript", "title": "下标" },
        "链接":{"command":"CreateLink","icon":"fa fa-link","title":"链接","popup":true,'component':'linkBox'},        
        "表格": { "command": "table", "icon": "fa fa-table", "title": "表格", "popup": true, 'component': 'tableBox' },
        "图片": { "command": "img", "icon": "fa fa-image", "title": "图片", "popup": true, 'component': 'imageBox' },
        "擦除": { "command": "removeFormat", "icon": "fa fa-eraser", "title": "擦除" },
        "撤销": { "command": "undo", "icon": "fa fa-undo", "title": "撤销" },
        "重做": { "command": "redo", "icon": "fa fa-repeat", "title": "重做" }
    }
```

# 使用方式

1. 通过vue插件的方式导入，在main.js导入
```html
import mtEditor from 'mteditor'
Vue.use(mtEditor)
```
2. 在组件中使用 
```html
<template>
  <div id="app">
    <mt-editor
      height="500px"
      width="100%"
      v-model="editorContent"
      :uploadMethod="uploadMethod"
    ></mt-editor>
  </div>
</template>

<script>
export default {
  name: 'App',
  components: {},
  data () {
    return {
      editorContent: '',
      config: {
        "标题": { "command": "h", "icon": "fa fa-header", "title": "标题", "popup": true, 'component': 'headerList' },
        "加粗": { "command": "bold", "icon": "fa fa-bold", "title": "加粗" },
        "斜体": { "command": "italic", "icon": "fa fa-italic", "title": "斜体" },
        "字体": { "command": "fontSize", "icon": "fa fa-font", "title": "字体", "popup": true, 'component': 'fontList' },
        "下划线": { "command": "underline", "icon": "fa fa-underline", "title": "下划线" },
        "删除线": { "command": "strikethrough", "icon": "fa fa-strikethrough", "title": "删除线" },
        "居左": { "command": "justifyLeft", "icon": "fa fa-align-left", "title": "居左" },
        "居中": { "command": "justifyCenter", "icon": "fa fa-align-center", "title": "居中" },
        "居右": { "command": "justifyRight", "icon": "fa fa-align-right", "title": "居右" },
        "两侧": { "command": "justifyFull", "icon": "fa fa-align-justify", "title": "两侧" },
        "无序列表": { "command": "InsertUnorderedList", "icon": "fa fa-list-ul", "title": "无序列表" },
        "有序列表": { "command": "insertOrderedList", "icon": "fa fa-list-ol", "title": "有序列表" },
        "上标": { "command": "superscript", "icon": "fa fa-superscript", "title": "上标" },
        "下标": { "command": "subscript", "icon": "fa fa-subscript", "title": "下标" },
        "表格": { "command": "table", "icon": "fa fa-table", "title": "表格", "popup": true, 'component': 'tableBox' },
        "图片": { "command": "img", "icon": "fa fa-image", "title": "图片", "popup": true, 'component': 'imageBox' },
        "擦除": { "command": "removeFormat", "icon": "fa fa-eraser", "title": "擦除" },
        "撤销": { "command": "undo", "icon": "fa fa-undo", "title": "撤销" },
        "重做": { "command": "redo", "icon": "fa fa-repeat", "title": "重做" }
      }
    }
  },
  methods: {
    /**
     * @description 上传图片函数，在该函数内完成图片的上传操作
     * @param 
     *   params参数：该参数里包含了要上传的图片,由富文本调用uploadMethod方法时传递过来
     *     {fd:fd}
    */
    uploadMethod (params) {
      // 1 获取需要上传的图片formdata
      let fd = params.fd;
      // 2 拼接除了文件之外，接口需要的参数,如果没有则不需要再拼接，以下是例子
      fd.append('username', 'zmt')
      // 3.调用真实的图片上传接口，由于现在大部分接口都是promise封装的，我这里就用一个Promise来做示意
      return new Promise((resolve) => {
        /*
          4. 将图片数据取出，组成以下格式，传给
          {
            imgURL: '图片地址'
          }
        */
        resolve({
          imgURL: '图片地址'
        })
      })
    }
  },
}
</script>

<style>

</style>

```

---
_Source: https://npm.io/package/mteditor · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._