MTEditor

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

1. 大小只有 160K
2. 图片功能，
   • 本地图片，
   • 网路图片
   • 上传图片到自己的服务器，
   • 右键调整图片在富文本中的百分比
3. 表格功能
   • 快速新建表格，可以通过右键对表格进行行列操作，例如新增行，删除行，以及删除整个表格。
   • 表格的列是等宽的，

维护

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

属性

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

函数

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

头部配置,可按需分配

    {
        "标题": { "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导入

import mtEditor from 'mteditor'
Vue.use(mtEditor)

2. 在组件中使用

<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>